Diligent E-Commerce

A modern, full-stack e-commerce application built with Next.js, React, MongoDB, and TailwindCSS. Features product listings, shopping cart functionality, and responsive design.

Features

• 🛍️ Product catalog with responsive grid layout
• 🛒 Shopping cart with localStorage persistence
• 📱 Mobile-first responsive design
• 🎨 Modern UI with TailwindCSS
• 🔍 Product detail pages
• 💾 MongoDB database integration

Tech Stack

• Frontend: Next.js 14, React 18, TailwindCSS
• Backend: Next.js API Routes
• Database: MongoDB with Mongoose
• State Management: React Context API

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• npm or yarn
• MongoDB account (local or cloud like MongoDB Atlas)

Local Setup

1. Clone the Repository

git clone <your-repo-url>
cd Diligent-Ecomerce

2. Install Dependencies

npm install

3. Environment Variables

Create a .env.local file in the root directory:

MONGODB_URI=your_mongodb_connection_string_here

Getting your MongoDB URI:

• MongoDB Atlas (Cloud):

  1. Create a free account at MongoDB Atlas
  2. Create a new cluster
  3. Click "Connect" → "Connect your application"
  4. Copy the connection string and replace <password> with your database password
  5. Add your database name at the end: mongodb+srv://username:password@cluster.mongodb.net/diligent-ecommerce?retryWrites=true&w=majority

• Local MongoDB:

  MONGODB_URI=mongodb://localhost:27017/diligent-ecommerce
  

4. Seed the Database

Populate your database with sample products:

npm run seed

This will insert 10 sample products into your MongoDB database. The script will:

• Clear existing products (optional - you can comment this out in data/seed.js if needed)
• Insert sample products with images, prices, descriptions, and stock levels

5. Run the Development Server

npm run dev

Open http://localhost:3000 in your browser to see the application.

Available Scripts

• npm run dev - Start the development server
• npm run build - Build the application for production
• npm run start - Start the production server
• npm run lint - Run ESLint to check code quality
• npm run seed - Seed the database with sample products

Project Structure

Diligent-Ecomerce/
├── components/          # Reusable React components
│   ├── Navbar.jsx      # Navigation bar with cart icon
│   └── ProductCard.jsx # Product card component
├── context/            # React Context providers
│   └── CartContext.jsx # Shopping cart state management
├── data/               # Data scripts
│   └── seed.js        # Database seeding script
├── lib/                # Utility functions
│   └── db.js          # MongoDB connection
├── models/             # Mongoose models
│   └── Product.js     # Product schema
├── pages/              # Next.js pages and API routes
│   ├── api/           # API endpoints
│   │   └── products/  # Product API routes
│   ├── cart.jsx       # Shopping cart page
│   ├── index.jsx      # Homepage
│   ├── product/       # Product detail pages
│   └── _app.js        # Custom App component
├── styles/             # Global styles
│   └── globals.css    # TailwindCSS directives
├── .env.local          # Environment variables (create this)
├── package.json        # Dependencies and scripts
├── tailwind.config.js # TailwindCSS configuration
└── postcss.config.js  # PostCSS configuration

Deployment to Vercel

Vercel is the recommended platform for deploying Next.js applications. Follow these steps:

1. Prepare Your Repository

Ensure your code is pushed to a Git repository (GitHub, GitLab, or Bitbucket).

2. Create a Vercel Account

1. Go to vercel.com
2. Sign up or log in with your Git provider

3. Import Your Project

1. Click "Add New Project"
2. Import your Git repository
3. Vercel will automatically detect Next.js

4. Configure Environment Variables

1. In the project settings, go to "Environment Variables"
2. Add your MONGODB_URI:
   • Name: MONGODB_URI
   • Value: Your MongoDB connection string
   • Environment: Production, Preview, and Development (select all)

5. Deploy

1. Click "Deploy"
2. Vercel will build and deploy your application
3. Your app will be live at https://your-project.vercel.app

6. Seed Production Database (Optional)

After deployment, you can seed your production database:

1. Use Vercel's CLI to run the seed script:

   npm i -g vercel
   vercel login
   vercel env pull .env.local
   npm run seed

   Or use MongoDB Compass or MongoDB Atlas web interface to run the seed script manually.

Important Notes for Vercel Deployment

• MongoDB Atlas: If using MongoDB Atlas, ensure your IP whitelist includes 0.0.0.0/0 (all IPs) or add Vercel's IP ranges
• Environment Variables: Always set environment variables in Vercel dashboard, never commit .env.local to Git
• Build Time: The build process will run npm run build automatically
• Serverless Functions: API routes will be deployed as serverless functions

Troubleshooting

Database Connection Issues

• Verify your MONGODB_URI is correct in .env.local
• Check MongoDB Atlas IP whitelist (should include 0.0.0.0/0 for Vercel)
• Ensure your MongoDB username and password are URL-encoded if they contain special characters

Seed Script Issues

• Make sure .env.local exists and contains MONGODB_URI
• Verify MongoDB connection is working: npm run dev and check if products load
• Check that dotenv package is installed: npm install dotenv --save-dev

Build Errors

• Run npm run lint to check for code issues
• Ensure all dependencies are installed: npm install
• Check Node.js version compatibility (v18+)

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is open source and available under the MIT License.