TechStore: E-Commerce with Next.js 15

Building a Modern E-Commerce Store

TechStore is a technology online store built with Next.js 15+ and App Router. It simulates a real shopping experience with product catalog, search, filters, shopping cart, and a design inspired by Microsoft Store / Fluent Design.

The Challenge

Create a complete e-commerce experience with modern web technologies, focusing on performance, user experience, and a design that feels familiar to Microsoft Store users.

Inspiration: Microsoft Store

The design philosophy comes directly from:

Microsoft Store with its Fluent Design, soft borders, subtle shadows and the accent color #0078D4 (Microsoft blue)

I wanted to combine that visual elegance with modern React patterns and state management.

Tech Stack

The technologies I chose were:

• Next.js 15: Framework principal with App Router and React Server Components
• TypeScript: Static typing for better developer experience and code quality
• Tailwind CSS v4: Styles and responsive design with Tailwind CSS v4
• Zustand: Global state management for the shopping cart
• Vercel: Deployment and hosting with edge network

Implemented Features

The Code

The project structure follows Next.js App Router conventions:

app/
├── page.tsx                    # Homepage
├── cart/
│   └── page.tsx              # Cart page
├── product/
│   └── [slug]/
│       └── page.tsx          # Product detail
└── brands/
    └── [slug]/
        └── page.tsx          # Products by brand

components/
├── layout/                    # Header, Footer, Search
├── product/                   # ProductCard, ProductGrid
└── ui/                        # Reusable components

lib/
├── services/                  # Mock data & functions
├── store/                     # Cart state (Zustand)
└── types/                     # TypeScript interfaces

The project uses mock product data (no real database) and images from Unsplash and Apple.com. The cart is persisted in localStorage.

Lessons Learned

1. App Router simplifies routing: Next.js 15 App Router with Server Components makes it easy to build SEO-friendly pages with dynamic metadata.
2. Zustand is lightweight and powerful: State management with Zustand is much simpler than Redux for simple use cases like a shopping cart.
3. Tailwind v4 is a game changer: The new version of Tailwind CSS brings improved performance and better DX with CSS-first configuration.
4. Mock data is great for prototyping: Using mock data allows rapid iteration without setting up a backend infrastructure.

Conclusion

TechStore demonstrates how Next.js 15, TypeScript and Tailwind CSS can be combined to create a modern e-commerce experience. The project is available as a demo and can serve as a starting point for real stores.