EasyBuyHub: Full-Stack E-Commerce Platform

Overview

EasyBuyHub is a modern e-commerce platform built with Next.js and Firebase, offering a complete shopping experience with secure Stripe payments, user authentication, and persistent order history. The platform features a responsive design with real-time cart updates and seamless checkout flow.

Key Features

• Product Catalog: Browse products with dynamic filtering and search
• Shopping Cart: Add and remove products with real-time updates
• User Authentication: Secure login with Next Auth
• Stripe Checkout: Complete payment processing with Stripe integration
• Order History: Track purchase history stored in Cloud Firestore
• Webhooks: Real-time order confirmation and status updates
• Responsive Design: Optimized for all device sizes
• Data Persistence: Firebase for reliable data storage

Why I Built This

I built this project to create a production-ready e-commerce solution that demonstrates:

• Complete payment flow with Stripe
• Server-side rendering for SEO and performance
• Real-time data synchronization with Firebase
• Scalable state management with Redux Toolkit

Tech Stack

Frontend

• Next.js: Hybrid static & server rendering for optimal performance
• React: Component-based UI architecture
• Tailwind CSS: Rapid UI development without leaving HTML
• Redux Toolkit: Efficient state management for cart and user data
• Heroicons: Beautiful hand-crafted SVG icons

Backend & Services

• Firebase: Authentication, database, and cloud functions
• Firebase Admin: Server-side Firebase operations
• Cloud Firestore: NoSQL database for orders and user data
• Stripe: Secure payment processing
• Webhooks: Real-time payment confirmation

APIs & Libraries

• Next Auth: Authentication for Next.js
• Axios: HTTP client for API requests
• Lodash: Utility functions for data manipulation
• Fake Store API: Pseudo-real product data for development

Core Features Implementation

Shopping Cart System

• Real-time cart updates with Redux Toolkit
• Persistent cart state across sessions
• Quantity management and price calculations

Payment Integration

// Stripe Checkout Session
POST /api/create-checkout-session
- Creates Stripe checkout session
- Handles product line items
- Redirects to Stripe payment page

Webhooks

// Stripe Webhook Handler
POST /api/webhook
- Listens for payment events
- Confirms successful payments
- Stores order in Firestore

User Authentication

• Next Auth with multiple providers
• Protected routes for checkout and orders
• Session management with JWT

Technical Highlights

• Server-Side Rendering: Improved SEO and initial load performance
• Firebase Cloud Functions: Serverless backend operations
• Stripe Webhooks: Reliable payment confirmation
• Redux Toolkit: Simplified state management with less boilerplate
• Responsive Design: Mobile-first approach with Tailwind CSS

Technical Challenges & Solutions

Challenge 1: Stripe Webhook Verification

• Problem: Ensuring webhook requests are genuinely from Stripe and not malicious actors
• Solution: Implemented signature verification using Stripe's webhook secret, validating each request's stripe-signature header before processing

Challenge 2: Cart State Persistence

• Problem: Maintaining cart state across page refreshes and user sessions
• Solution: Combined Redux Toolkit with localStorage persistence, syncing cart state on mount and updating storage on every cart action

Challenge 3: Firebase Admin SDK in Serverless Functions

• Problem: Initializing Firebase Admin multiple times caused errors in Next.js API routes
• Solution: Implemented singleton pattern to check if Firebase Admin is already initialized before creating new instances

Challenge 4: Handling Payment Edge Cases

• Problem: Managing scenarios like failed payments, duplicate orders, or network timeouts
• Solution: Built idempotency checks using order IDs, implemented retry logic, and added comprehensive error handling with user feedback

Challenge 5: Server-Side Rendering with Authentication

• Problem: Protecting pages while maintaining SSR benefits for SEO
• Solution: Used Next Auth's getServerSideProps integration to check authentication server-side, redirecting unauthenticated users before page render

Challenge 6: Real-time Order Status Updates

• Problem: Keeping users informed about order status without manual page refresh
• Solution: Implemented Firebase real-time listeners on the order document, updating UI instantly when webhook confirms payment

Future Improvements

• Add product reviews and ratings
• Implement wishlist functionality
• Add email notifications for orders
• Integrate more payment methods
• Add admin dashboard for product management