Introduction

Recently, I decided to build an image gallery application using Go and Vue.js 3. What started as a simple image upload feature gradually evolved into a full-featured web application with SEO optimization, PWA support, and responsive design.

In this article, I want to share my development journey from a developer's perspective - the trials and errors, the challenges I faced, and what I learned along the way.

About This Article

This article chronicles my development experience with the vibe-go-image-gallery project. Rather than diving into detailed code explanations, I'll focus on the "why" behind technical choices and the real challenges I encountered as a developer.

Disclaimer: This article is based on my personal development experience. Technical choices and implementation methods may vary depending on project requirements and environments. The code and approaches mentioned may require additional considerations for security and performance in production environments.

Why I Started This Project

The Motivation

I've been fascinated by the recent advances in web frameworks, particularly Vue.js 3's Composition API and Go's Gin framework. While I had theoretical knowledge, I felt the need to build something practical to truly understand these technologies.

I chose an image gallery because it's deceptively simple yet profound. Starting with basic CRUD operations, it encompasses almost everything a modern web application needs: file uploads, image processing, SEO optimization, and performance tuning.

Technology Choices

I chose Go + Gin for its ability to build simple, fast API servers. Compared to Node.js, I was attracted to its type safety and elegant concurrency handling. The single binary deployment capability was also a significant operational advantage.

For Vue.js 3 + Composition API, the React Hooks-like approach to logic reuse was the deciding factor. While Options API isn't bad, I found Composition API more intuitive for complex state management and side effects.

Tailwind CSS initially concerned me with its verbose class names, but using it revealed the beauty of design system consistency and responsive design simplicity. The rich variants like hover: and group-hover: proved invaluable for creating interactive UIs.

What I Learned During Development

Backend Development Discoveries

Web API development with Go was surprisingly smooth. The Gin framework's documentation is excellent, making everything from basic routing to middleware intuitive to implement.

The image processing part was particularly impressive. Using the github.com/nfnt/resize library for thumbnail generation, I could leverage Go's Goroutines for concurrent processing.

// Concurrent thumbnail generation (actual code excerpt)
go func() {
    defer wg.Done()
    if err := generateThumbnail(originalPath, thumbnailPath); err != nil {
        log.Printf("Thumbnail generation failed: %v", err)
    }
}()

You can see the complete thumbnail generation code here.

I initially planned to use a database, but the simple requirements led me to JSON file-based metadata management. This decision simplified deployment and improved development speed.

Frontend Development Trials

Vue.js 3's Composition API is powerful, but I initially struggled with "how much should be extracted into composables?" Eventually, I abstracted API communication and state management into useImages.js, which cleaned up the components significantly.

// Part of useImages composable
export function useImages() {
  const images = ref([])
  const loading = ref(false)
  
  const fetchImages = async () => {
    // API communication logic
  }
  
  return { images, loading, fetchImages }
}

The image upload feature's drag-and-drop and progress display implementation proved challenging. Looking at the Upload.vue code, you'll see there were more considerations than expected, from file validation to error handling.

SEO Optimization Lessons

I initially underestimated SEO optimization for SPAs. However, considering search engine visibility made me realize proper meta tag configuration is essential.

Dynamic meta tag generation using Vue Router navigation guards and support for Open Graph and Twitter Cards are implemented in router/index.js. For image detail pages specifically, I created a mechanism to fetch SEO data from the backend API and dynamically update meta tags.

Challenges and Solutions

CORS Configuration Struggles

Running frontend and backend on different ports in development led to numerous CORS errors. While I eventually solved this using Gin's CORS middleware, considering the differences between development and production configurations took considerable time.

The CORS configuration code includes environment variable controls.

Performance Optimization Importance

Testing with just a few images initially, I didn't notice the performance impact until exceeding 50 images, when display became noticeably sluggish. I implemented these solutions:

Lazy Loading: Image lazy loading using Intersection Observer API
Virtual Scrolling: Smooth scrolling even with large image sets
Thumbnails: Automatic backend thumbnail generation

The lazy loading implementation was particularly effective, significantly improving initial page load times.

Build Configuration Adjustments

In Vite build configuration, I focused on bundle size optimization. Setting up proper chunk splitting in vite.config.js enables loading only necessary parts.

Features of the Completed Application

Implemented Features

Image Upload: Drag-and-drop support, multiple file simultaneous upload
Metadata Editing: Dynamic editing of titles, descriptions, tags, alt attributes
Responsive Design: Mobile to desktop support
SEO Optimization: Dynamic meta tags, Open Graph, Twitter Cards support
PWA Support: Offline display, home screen installation
Performance Optimization: Lazy loading, thumbnails, caching strategies

Technical Highlights

Backend:

RESTful API design
Concurrent image processing
Proper error handling
Security considerations (file validation, CORS configuration)

Frontend:

Reusable logic with Composition API
Efficient styling with Tailwind CSS
SPA routing with Vue Router
PWA support (Service Worker, Web App Manifest)

GitHub Repository Structure

The project is publicly available on GitHub with the following structure:

vibe-go-image-gallery/
├── main.go                 # Go backend
├── go.mod                 # Go module configuration
├── frontend/              # Vue.js frontend
│   ├── src/
│   │   ├── components/    # Vue components
│   │   ├── composables/   # Composition API logic
│   │   └── router/        # Routing configuration
│   ├── package.json
│   └── vite.config.js
├── uploads/               # Uploaded images
├── data/                  # Metadata JSON
└── README.md

Detailed setup instructions are provided in the README.

Future Improvements

Short-term Improvement Plans

User Authentication: Currently anyone can upload; planning to add authentication
Image Editing: Basic image editing features (rotation, resize, etc.)
Search Functionality: Image search by tags and metadata
Backup Features: Cloud storage integration

Long-term Vision

Multi-tenant Support: Image management for multiple users
AI Integration: Automatic tagging, image recognition
API Publishing: External application usage
Analytics Features: Access analysis, usage visualization

Lessons Learned and Future Directions

Technical Learnings

Through this project, I learned much about "modern web application development." Particularly impressive were:

Full-stack Development Joy: Designing and implementing both backend and frontend connections solo deepened my overall understanding
Performance Importance: I experienced firsthand how performance optimization directly impacts user experience
SEO Depth: SPA SEO optimization has far more considerations than I initially imagined

Development Experience

The Go + Vue.js 3 combination provided an excellent development experience. Type safety and hot reloading reduced development stress, allowing focused feature development.

Particularly, the combination of Vite's fast builds and Vue 3's Composition API created a satisfying "immediate code execution" feeling that significantly contributed to maintaining development motivation.

GitHub Repository Highlights

The project showcases several interesting implementations:

Backend API (main.go): Complete RESTful API with image processing
Image Management Composable: Reusable state management logic
Upload Component: Drag-and-drop with progress tracking
Gallery Component: Responsive masonry layout
Router Configuration: Dynamic SEO meta tag generation

Conclusion

What began as a simple goal to "create an image gallery app" evolved into a comprehensive project containing almost all elements necessary for modern web applications, making it highly valuable for learning.

Initially thinking "as long as it works," I realized when considering actual user scenarios that there are countless factors to consider: SEO, accessibility, performance, security, and more.

All project code is publicly available on GitHub. If you're interested, please check out the code and feel free to provide improvement suggestions or feedback.

I also plan to prepare a live demo so you can experience the application firsthand.

Related Links

Project GitHub Repository - Complete source code
Backend Code (main.go) - Go API implementation
Frontend Code - Vue.js 3 implementation
Setup Guide - Environment setup instructions
Component Design - Vue.js components
API Design Documentation - RESTful API specifications

Technical Documentation

I hope this article serves as a reference for those interested in web application development with Go + Vue.js. If you have questions or feedback, feel free to reach out through GitHub Issues or Discussions!