E-Commerce Portfolio - Full Stack Application

Production-ready E-Commerce platform showcasing best practices in software architecture, scalability, and modern development patterns.

🚀 Tech Stack

Backend

• Language: Go (Golang) 1.22+
• Framework: Gin
• Database: PostgreSQL 16
• Cache: Redis 7
• Architecture: Clean Architecture (Simplified)

Frontend

• Framework: Next.js 14+ (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui

Infrastructure

• Containerization: Docker & Docker Compose
• Database GUI: pgAdmin
• API Testing: REST Client (VS Code)

📋 Features

Core Features

• Clean Architecture implementation
• Rate limiting & throttling
• JWT authentication with refresh tokens
• Role-based access control (RBAC)
• Product catalog with search
• Shopping cart (guest & authenticated)
• Order management & checkout
• Admin dashboard with CRUD operations
• Payment integration (Midtrans Sandbox)
• Frontend development

Advanced Patterns

• Pessimistic & optimistic locking
• Idempotency for critical operations
• Self-healing slug generation
• Database connection pooling
• Full-text search (PostgreSQL)
• Message queue for async processing
• Real-time notifications
• Caching strategy (Redis)

Quality & Testing

• Unit tests (>80% coverage)
• Integration tests
• E2E tests (Playwright)
• Load testing (K6)
• API documentation (Swagger)

🛠️ Prerequisites

• Go: 1.22 or higher (Download)
• Node.js: 18+ (Download)
• Docker Desktop: Latest version (Download)
• Git: Latest version

🚀 Getting Started

1. Clone the Repository

git clone <repository-url>
cd E-Commerce

2. Start Infrastructure (Docker)

# Start PostgreSQL, Redis, and pgAdmin
docker-compose up -d

# Check if containers are running
docker-compose ps

# View logs
docker-compose logs -f

Access Points:

• PostgreSQL: localhost:5432
• Redis: localhost:6379
• pgAdmin: http://localhost:5050
  • Email: admin@admin.com
  • Password: admin

3. Setup Backend

cd backend

# Install dependencies
go mod download

# Copy environment file
copy .env.example .env

# Run migrations
go run cmd/migrate/main.go up

# Start development server
go run cmd/api/main.go

Backend will run on: http://localhost:8080

4. Setup Frontend

cd frontend

# Install dependencies
npm install

# Copy environment file
copy .env.example .env.local

# Start development server
npm run dev

Frontend will run on: http://localhost:3000

📁 Project Structure

E-Commerce/
├── backend/                 # Go backend application
│   ├── cmd/                # Application entry points
│   │   ├── api/           # Main API server
│   │   └── migrate/       # Database migrations
│   ├── internal/          # Private application code
│   │   ├── models/        # Domain entities & data structures
│   │   ├── services/      # Business logic layer
│   │   ├── handlers/      # HTTP controllers
│   │   ├── repositories/  # Data access layer
│   │   └── middleware/    # Auth, rate limit, etc.
│   ├── pkg/               # Shared utilities
│   │   ├── jwt/          # JWT token management
│   │   ├── password/     # Password hashing
│   │   └── response/     # HTTP response helpers
│   └── migrations/        # SQL migration files
├── frontend/              # Next.js frontend
│   ├── app/              # App Router pages
│   ├── components/       # React components
│   ├── hooks/           # Custom React hooks
│   ├── lib/             # Utilities & API client
│   └── types/           # TypeScript types
├── docker/               # Docker configurations
│   ├── postgres/        # PostgreSQL init scripts
│   └── redis/           # Redis configs
├── docs/                 # Documentation
├── scripts/             # Utility scripts
└── docker-compose.yml   # Docker orchestration

🧪 Testing

Backend Tests

cd backend

# Run all tests
go test ./...

# Run with coverage
go test -cover ./...

# Run specific package
go test ./internal/services/...

Frontend Tests

cd frontend

# Run unit tests
npm test

# Run E2E tests
npm run test:e2e

📚 Documentation

Complete project documentation is available in the /docs folder:

Document	Purpose
ARCHITECTURE.md	System design, layer architecture, design patterns
API.md	Complete API endpoint documentation with examples
DEPLOYMENT.md	Setup, deployment, and troubleshooting guide

Quick API Reference

Authentication

POST /api/v1/auth/register      # Register new user
POST /api/v1/auth/login         # Login user
POST /api/v1/auth/refresh       # Refresh access token
GET  /api/v1/auth/me            # Get current user (protected)

Products

GET  /api/v1/products           # List products with filters
GET  /api/v1/products/:id       # Get product detail
GET  /api/v1/products/featured  # Get featured products
GET  /api/v1/categories         # List categories

Shopping Cart & Orders

GET  /api/v1/cart               # Get user cart (protected)
POST /api/v1/cart/items         # Add to cart (protected)
PUT  /api/v1/cart/items/:id     # Update cart item (protected)
POST /api/v1/checkout           # Create order (protected)
GET  /api/v1/orders             # Get user orders (protected)

For complete API documentation, see docs/API.md

🔐 Environment Variables

Environment configuration details are in DEPLOYMENT.md.

Backend (.env)

Copy .env.example and configure:

• PORT - Server port (default: 8080)
• DB_* - PostgreSQL connection settings
• REDIS_* - Redis connection settings
• JWT_SECRET - Secret key for JWT tokens (min 32 chars)

Frontend (.env.local)

Copy .env.example and configure:

• NEXT_PUBLIC_API_URL - Backend API URL

🐳 Docker Commands

# Start all services
docker-compose up -d

# Stop all services
docker-compose down

# View logs
docker-compose logs -f [service-name]

# Rebuild services
docker-compose up -d --build

# Remove volumes (⚠️ deletes data)
docker-compose down -v

🎯 Development Workflow

Git Branching Strategy

This project follows GitHub Flow for clean, maintainable code:

main (production-ready)
├── develop (integration branch)
├── feature/* (new features)
├── bugfix/* (bug fixes)
└── hotfix/* (critical production fixes)

Workflow:

1. Create feature branch from develop: git checkout -b feature/feature-name
2. Make commits frequently with clear messages
3. Push and create Pull Request for review
4. Merge to develop after review
5. Periodically merge develop → main for releases

Development Tools

• Copilot CLI: Used for code scaffolding, architecture planning, and development assistance
• VS Code: Primary IDE with REST Client extension for API testing
• Docker: Local development environment management
• Git: Version control with clean commit history

Local Development:

1. Start Docker services: docker-compose up -d
2. Run backend: cd backend && go run cmd/api/main.go
3. Run frontend: cd frontend && npm run dev
4. Test APIs using VS Code REST Client (.http files)

📊 Project Progress

✅ Completed Phases

Phase 1 & 2: Foundation & Backend Setup

• Monorepo structure (frontend + backend)
• Go backend with Gin framework
• PostgreSQL database with migrations
• Docker Compose setup for local development
• Clean Architecture implementation

Phase 3: Authentication System

• User model and database schema
• JWT authentication (access + refresh tokens)
• User registration and login endpoints
• Password hashing with bcrypt
• Auth middleware for protected routes

Phase 4: Product & Cart Features

• Product CRUD operations
• Category management
• Product search with filters
• Shopping cart (session-based)
• Self-healing slug generation
• Optimistic & pessimistic locking for stock

Phase 5: Frontend Setup

• Next.js 14 with App Router
• TypeScript strict mode
• shadcn/ui component library setup
• Tailwind CSS configuration
• Custom hooks (useAuth, useCart, etc)
• Zustand store for state management

Phase 6: Frontend Pages (In Progress)

• Homepage with hero section, categories, featured products
• Products listing page with filters & search
• Product detail page
• Shopping cart page
• Checkout page (multi-step)
• Order history page
• User profile page
• Authentication pages (login, register)
• Navigation & layouts

Phase 7: UI/UX Fixes (Completed)

• Filter dropdown showing readable labels
• Removed AI-template style elements (Sparkles icon, generic features section)
• Fixed product card hover animations
• Database query fixes (is_active → status, stock → stock_quantity)
• CORS header configuration

Phase 8: Backend Cleanup (Completed)

• Removed duplicate folders (delivery, domain, repository, usecase)
• Cleaned up orphaned files
• Verified clean architecture structure
• Build verification completed

🚧 In Progress / Pending

Backend Tasks:

• Homepage API endpoints (featured products, categories, banners)
• Image upload handler (product images, avatar)
• Newsletter subscription endpoint
• Payment webhook integration (Midtrans)
• Promo code / discount system (admin)
• Order status workflow automation
• Email notifications queue system
• Admin dashboard endpoints (analytics, reports)

Frontend Tasks:

• Wishlist/favorites feature
• Product reviews and ratings
• Live chat integration
• Admin dashboard build
• Payment page integration
• Email verification flow
• Notification system

Testing & Deployment:

• Unit tests (>80% coverage)
• Integration tests
• E2E tests (Playwright)
• Load testing (K6)
• API documentation (Swagger)
• Docker production builds
• CI/CD pipeline (GitHub Actions)

📈 Architecture Quality Metrics

Implemented Best Practices:

• ✅ Clean Code: Consistent naming, modular structure, SOLID principles
• ✅ Architecture: Clean Architecture with clear layer separation
• ✅ Security: JWT auth, rate limiting, input validation
• ✅ Concurrency: Pessimistic & optimistic locking patterns
• ✅ Scalability: Stateless design, horizontal scaling ready
• ✅ Database: Migrations, connection pooling, query optimization
• ✅ DevOps: Docker containerization, environment management

💡 Technical Decisions

Why Go for Backend?

• Performance: Compiled, concurrent, low memory footprint
• Industry Adoption: Used by Gojek, Tokopedia (Indonesia), Google, Uber, Netflix
• Global Demand: High salary range, growing adoption
• Scalability: Built-in goroutines for concurrency
• Deployment: Single binary, no dependencies

Why Next.js for Frontend?

• Full-stack capability: API routes for BFF pattern
• Performance: Server-side rendering, static generation, optimized images
• Developer Experience: TypeScript support, hot reload, extensive ecosystem
• SEO-friendly: Server-side rendering for better crawling
• Modern tooling: Built-in testing, CSS support, environment variables

📊 Architecture Highlights

Backend Architecture

• Handlers → HTTP request/response handling
• Services → Business logic & validation
• Repositories → Database operations
• Models → Domain entities

Key Patterns Implemented

• Rate limiting with Redis
• JWT with refresh tokens
• Optimistic locking for concurrent updates
• Idempotent checkout operations
• Self-healing slugs for SEO

🤝 Contributing

This is a portfolio project, but suggestions and feedback are welcome!

📝 License

MIT License - see LICENSE file for details

👤 Author

Nandana

• GitHub: @Daarns
• Email: nandana219@gmail.com
• Portfolio Project: Full-stack E-Commerce with Go + Next.js

Project Highlights for Portfolio:

• Production-ready architecture with Clean Code principles
• Implemented advanced patterns (rate limiting, optimistic locking, idempotency)

• 80% test coverage target with unit & integration tests

• Containerized with Docker, ready for deployment
• Modern tech stack showcasing current industry standards