A modern, full-stack e-commerce web application built with Next.js
EasyBusyHub is a fully responsive e-commerce platform that replicates the core functionality of major online shopping websites. Built from scratch with modern web technologies, it features secure authentication, real-time data persistence, and seamless payment processing.
- Product Catalog - Browse products from Fake Store API
- Shopping Cart - Add/remove items with real-time updates
- Order Management - View purchase history and order details
- Responsive Design - Seamless experience across all devices
- NextAuth Integration - Secure user authentication
- Firebase Auth - Reliable identity management
- Protected Routes - Secure checkout and order pages
- Stripe Checkout - Secure payment gateway integration
- Webhook Events - Real-time order confirmation
- Transaction History - Complete order tracking
- Firebase Firestore - Cloud-based NoSQL database
- Redux Toolkit - Centralized state management
- Data Persistence - Orders saved for logged-in users
- Framework: Next.js 14.2 with React 18.2
- Styling: Tailwind CSS 3.3
- State Management: Redux Toolkit
- UI Components: Heroicons, React Carousel
- Notifications: React Toastify
- Authentication: NextAuth.js
- Database: Firebase Firestore
- Cloud Functions: Firebase Cloud Functions
- Payment: Stripe API
- API: Fake Store API (product data)
- Node.js (v14 or higher)
- npm or yarn
- Firebase account
- Stripe account
- Clone the repository
git clone https://github.com/SaketKothari/easybusyhub-webapp.git
cd easybusyhub-webapp- Install dependencies
npm install- Set up environment variables
Create a .env.local file in the root directory:
# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
# Stripe Configuration
STRIPE_PUBLIC_KEY=your_stripe_public_key
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_webhook_secret
# NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret- Run the development server
npm run devOpen http://localhost:3000 in your browser.
| Command | Description |
|---|---|
npm run dev |
Start development server on localhost:3000 |
npm run build |
Build production-ready application |
npm start |
Start production server |
To test payment webhooks locally:
- Install Stripe CLI
Download from Stripe CLI Releases
- Login to Stripe
stripe login- Forward webhook events to local server
stripe listen --forward-to localhost:3000/api/webhook- Copy the webhook signing secret displayed in the terminal and add it to your
.env.localfile
easybusyhub-webapp/
├── public/ # Static assets
├── src/
│ ├── app/ # Redux store configuration
│ ├── components/ # React components
│ ├── pages/ # Next.js pages and API routes
│ │ ├── api/ # Backend API endpoints
│ │ └── auth/ # Authentication pages
│ ├── services/ # Service layer
│ ├── slices/ # Redux slices
│ ├── styles/ # Global styles
│ └── utils/ # Utility functions
├── firebase.js # Firebase configuration
└── package.json # Project dependencies
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Saket Kothari
- LinkedIn: @saket-kothari
- GitHub: @SaketKothari
- Next.js - The React Framework
- Tailwind CSS - Utility-first CSS framework
- Stripe - Payment processing platform
- Firebase - Backend as a Service
- Fake Store API - Free product data API
Made with ❤️ by Saket Kothari