ShopHub - E-Commerce Application

A modern, full-stack e-commerce application built with Next.js 16 (App Router), Express.js, and NextAuth.js.

📋 Project Description

ShopHub is a feature-rich online shopping platform that allows users to browse products, view detailed information, and manage items through an intuitive interface. The application includes authentication, protected routes, and a complete CRUD API for product management.

✨ Features Implemented

Core Features

1. Landing Page ✅

   • 7 comprehensive sections (Hero, Features, Categories, Stats, Testimonials, Newsletter, CTA)
   • Responsive design with Tailwind CSS and DaisyUI
   • Navigation to all major pages
   • Professional UI/UX

2. Authentication System ✅

   • NextAuth.js integration for secure authentication
   • Mock login with hardcoded credentials
   • Session management with cookies
   • Protected routes using middleware
   • Login credentials: admin@shophub.com / admin123

3. Items List Page ✅

   • Publicly accessible
   • Fetches data from Express.js API
   • Displays product cards with:
     • Product name
     • Description
     • Price
     • Image
     • Category
     • Stock information
   • Responsive grid layout
   • Link to detailed view

4. Item Details Page ✅

   • Publicly accessible
   • Full product information display
   • Large product image
   • Detailed specifications
   • Add to cart functionality (UI)
   • Related product features

5. Protected Add Item Page ✅

   • Only accessible when logged in
   • Form to add new products
   • Stores data via Express.js API
   • Automatic redirect for unauthenticated users
   • Form validation

Additional Features

• Toast Notifications ✅

  • Success/error messages using react-hot-toast
  • Login feedback
  • Product creation confirmation

• Express.js Backend ✅

  • RESTful API for product management
  • CRUD operations (Create, Read, Update, Delete)
  • Mock database with sample products
  • CORS enabled for Next.js integration

• Additional Pages ✅

  • About page
  • Contact page with form
  • Professional footer

🛠️ Technologies Used

• Frontend:

  • Next.js 16 (App Router)
  • React 19
  • Tailwind CSS 4
  • DaisyUI 5
  • NextAuth.js (Authentication)
  • React Hot Toast (Notifications)

• Backend:

  • Express.js
  • Node.js
  • MongoDB (Database)
  • Mongoose (ODM)
  • CORS

• Other:

  • Axios (HTTP client)
  • js-cookie (Cookie management)

📦 Installation & Setup

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Step 1: Clone the Repository

git clone <repository-url>
cd simple_application

Step 2: Install Dependencies

npm install

Step 3: Environment Variables

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

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key-change-this-in-production
API_URL=http://localhost:5000

# MongoDB Configuration
MONGODB_URI=mongodb://localhost:27017/shophub
# Or use MongoDB Atlas:
# MONGODB_URI=mongodb+srv://userName:password@allunityit.looszdp.mongodb.net/?appName=AllUnityIt

Step 4: Setup MongoDB

Option 1: Local MongoDB

• Install MongoDB from: https://www.mongodb.com/try/download/community
• Start MongoDB service

Option 2: MongoDB Atlas (Cloud)

• Create free account at: https://www.mongodb.com/cloud/atlas
• Get connection string and update .env.local

See MONGODB_QUICK_START.md for detailed instructions

Step 5: Seed Database

npm run seed

This will populate your MongoDB with sample products.

Step 6: Run the Application

Option 1: Run Both Servers Simultaneously

npm run dev:all

This will start:

• Next.js dev server on http://localhost:3000
• Express.js API server on http://localhost:5000

Option 2: Run Servers Separately

Terminal 1 - Next.js:

npm run dev

Terminal 2 - Express.js:

npm run server

Step 5: Access the Application

Open your browser and navigate to:

• Frontend: http://localhost:3000
• API: http://localhost:5000/api/items
• Health Check: http://localhost:5000/api/health

🗺️ Route Summary

Public Routes

Route	Description
/	Landing page with 7 sections
/items	List of all products
/items/[id]	Individual product details
/about	About page
/contact	Contact page with form
/login	Login page

Protected Routes

Route	Description	Auth Required
/items/add	Add new product form	✅ Yes

API Routes

Method	Endpoint	Description
GET	/api/items	Get all items
GET	/api/items/:id	Get single item
POST	/api/items	Create new item
PUT	/api/items/:id	Update item
DELETE	/api/items/:id	Delete item

🔐 Authentication

Login Credentials

For testing purposes, use these credentials:

• Email: admin@shophub.com
• Password: admin123

How It Works

1. User enters credentials on /login page
2. NextAuth.js validates credentials
3. Session is created and stored in cookies
4. Protected routes check for valid session
5. Unauthenticated users are redirected to login

📱 Features Explanation

1. Landing Page Sections

• Hero: Eye-catching introduction with CTA
• Features: Key benefits (Fast Delivery, Quality, Security)
• Categories: Product category navigation
• Stats: Business metrics and achievements
• Testimonials: Customer reviews
• Newsletter: Email subscription form
• CTA: Final call-to-action for conversions

2. Authentication Flow

• Mock authentication using NextAuth.js
• Credentials stored securely in session cookies
• Middleware protects sensitive routes
• Automatic redirect on unauthorized access

3. Product Management

• Browse: View all products in grid layout
• Details: Click any product for full information
• Add: Authenticated users can add new products
• API Integration: All data fetched from Express.js backend

4. Toast Notifications

• Real-time feedback for user actions
• Success messages for completed operations
• Error handling with user-friendly messages

🎨 Styling

The application uses:

• Tailwind CSS: Utility-first CSS framework
• DaisyUI: Component library for consistent design
• Responsive Design: Mobile-first approach
• Custom Components: Reusable UI elements

🚀 Deployment

Next.js Frontend

Deploy to Vercel:

vercel deploy

Express.js Backend

Deploy to:

• Heroku
• Railway
• DigitalOcean
• AWS EC2

Update .env.local with production API URL.

📝 Development Notes

Adding New Products

1. Login with credentials
2. Navigate to "Add Item" button
3. Fill out the form
4. Submit to add to database

Modifying Mock Data

Edit server/server.js to modify the initial product list.

Extending Authentication

To add Google OAuth:

1. Configure Google Cloud Console
2. Add GoogleProvider to NextAuth config
3. Update environment variables

🐛 Troubleshooting

Items Not Loading

• Ensure Express.js server is running on port 5000
• Check console for API errors
• Verify CORS is enabled

Authentication Issues

• Clear browser cookies
• Check NEXTAUTH_SECRET is set
• Verify credentials match mock data

Image Loading Issues

• Ensure image URLs are valid
• Check Next.js config for image domains
• Use Unsplash for free placeholder images

📄 License

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

👥 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📧 Contact

For questions or support, please contact: support@shophub.com

---

Built with ❤️ using Next.js 16 and Express.js