Laptop Ease

Your one-stop destination for laptop shopping and reviews!
Explore the docs »

View Demo · Report Bug · Request Feature

Table of contents

• Table of contents
• Description
• Features
• Installation
  • Requirements
  • Clone the project
  • Environment setup
  • Database setup
  • Build and run
• Usage
  • For customers
  • For administrators
  • API endpoints
• Configuration
  • Environment variables
  • Database configuration
  • Payment gateway setup
• Development
  • Project structure
  • Contributing
  • Testing
• Deployment
  • Frontend deployment with Vercel
  • Backend deployment with Render
  • Database setup with MongoDB Atlas
• TODO
• License

Description

Laptop Ease is a comprehensive e-commerce platform specifically designed for laptop shopping. Built with modern web technologies, it provides a seamless shopping experience with detailed product information, user reviews, comparison tools, and secure payment processing. The platform caters to both tech enthusiasts looking for detailed specifications and casual users seeking simple laptop recommendations.

Features

• Product Catalog: Extensive laptop database with detailed specifications
• Advanced Search & Filtering: Filter by brand, price range, specifications, and user ratings
• Product Comparison: Side-by-side comparison of multiple laptops
• Shopping Cart & Wishlist: Save items for later and manage purchases
• Secure Checkout: Multiple payment options with secure processing
• User Accounts: Profile management, order history, and preferences
• Compare Multiple Products: Side-by-side comparison of multiple laptops
• Admin Dashboard: Inventory management, order processing, and analytics
• Responsive Design: Optimized for desktop, tablet, and mobile devices

Installation

Requirements

• Node.js (v16.0 or higher)
• npm or yarn package manager (highly recommend NPM)
• MongoDB Atlas account
• React.js
• TailwindCSS (v3)

Clone the project

git clone https://github.com/your-username/laptop-ease.git
cd laptop-ease

Environment setup

# Install dependencies
npm install

# Copy environment template
cp .env.example .env

# Edit environment variables
nano .env

Database setup

Set up your MongoDB Atlas cluster and obtain the connection string:

1. Create a MongoDB Atlas account at mongodb.com/atlas
2. Create a new cluster
3. Set up database user credentials
4. Whitelist your IP address
5. Get the connection string

Build and run

# Development mode
npm run dev

# Production build
npm run build
npm start

Usage

For customers

Access the website at http://localhost:3000 (or your configured domain) to:

• Browse laptop collections by category or brand
• Use advanced filters to find laptops matching specific requirements
• Read and write product reviews
• Compare multiple laptops side-by-side
• Add items to cart and complete secure checkout
• Track order status and history

For administrators

Access the admin panel at http://localhost:3000/admin to:

• Manage product inventory and specifications
• Process orders and update shipping status
• Monitor user reviews and ratings (coming soon...)
• View sales analytics and reports
• Manage user accounts and permissions
• Configure site settings and promotions

API endpoints

The platform provides RESTful API endpoints for integration:

• GET /api/products - Retrieve product listings
• POST /api/products - Add new products (admin only)
• GET /api/products/:id - Get product details
• POST /api/orders - Create new orders
• GET /api/orders/:id - Track order status

Configuration

Environment variables

Variable	Description	Default Value
APP_PORT	Server port number	3000
NODE_ENV	Environment mode	development
URL_CLIENT	Client application URL (development)	http://localhost:5173
URL_ADMIN	Admin panel URL (development)	http://localhost:3001
URL_CLIENT_DEPLOY	Client application URL (production)
URL_ADMIN_DEPLOY	Admin panel URL (production)
URL_API_DEPLOY	API server URL (production)
MONGO_ATLAS_URI	MongoDB Atlas connection string
JWT_ACCESS_TOKEN	Secret key for JWT access tokens	myaccesstoken
JWT_REFRESH_TOKEN	Secret key for JWT refresh tokens	myrefreshtoken
JWT_ACCOUNT_VERIFY	Secret key for account verification tokens	myaccountverify
GOOGLE_CLIENT_ID	Google OAuth client ID
GOOGLE_CLIENT_SECRET	Google OAuth client secret
FACEBOOK_APP_SECRET	Facebook OAuth app secret
NAME	SMTP server name	smtp.gmail.com
HOST	SMTP server host	smtp.gmail.com
SERVICE	Email service provider	gmail
USER	Email username for SMTP
PASS	Email password for SMTP
CLOUDINARY_CLOUD_NAME	Cloudinary cloud name
CLOUDINARY_API_KEY	Cloudinary API key
CLOUDINARY_API_SECRET	Cloudinary API secret
CLOUDINARY_API_ENV	Cloudinary environment variable
ACCESS_KEY_MOMO	MoMo access key	F8BBA842ECF85
SECRET_KEY_MOMO	MoMo secret key	K951B6PE1waDMi640xX08PD3vg6EkVlz
PARTNER_CODE_MOMO	MoMo partner code	MOMO
IPN_URL_MOMO_NGROK	MoMo IPN URL for ngrok testing
ZALOPAY_APP_ID	ZaloPay application ID	2554
ZALOPAY_KEY1	ZaloPay key1 for authentication	sdngKKJmqEMzvh5QQcdD2A9XBSKUNaYn
ZALOPAY_KEY2	ZaloPay key2 for authentication	trMrHtvjo6myautxDUiAcYsVtaeQ8nhf
ZALOPAY_ENDPOINT_CREATE	ZaloPay create payment endpoint	https://sb-openapi.zalopay.vn/v2/create
ZALOPAY_ENDPOINT_QUERY	ZaloPay query payment endpoint	https://sb-openapi.zalopay.vn/v2/query

Database configuration

Configure your MongoDB Atlas connection in the .env file:

MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/laptop_ease?retryWrites=true&w=majority

Payment gateway setup

Configure ZaloPay and MoMo for payment processing:

# ZaloPay Configuration
ZALOPAY_APP_ID=your_zalopay_app_id
ZALOPAY_KEY1=your_zalopay_key1
ZALOPAY_KEY2=your_zalopay_key2

# MoMo Configuration
MOMO_PARTNER_CODE=your_momo_partner_code
MOMO_ACCESS_KEY=your_momo_access_key
MOMO_SECRET_KEY=your_momo_secret_key

Development

Project structure

root/
├── client/ (store)
├── admin/ (store-admin)
├── server/ (store-api)
├── docs/
└── README.md

Contributing

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

Testing

# Run unit tests
npm test

# Run integration tests
npm run test:integration

# Run end-to-end tests
npm run test:e2e

# Generate coverage report
npm run test:coverage

Deployment

Frontend deployment with Vercel

1. Connect your repository to Vercel:

   • Visit vercel.com and sign up/login
   • Click "New Project" and import your GitHub repository
   • Vercel will automatically detect it's a Next.js project

2. Configure environment variables:

    # Application Configuration
    APP_PORT=3000
    NODE_ENV=production
    URL_CLIENT_DEPLOY=https://your-client-app.vercel.app
    URL_ADMIN_DEPLOY=https://your-admin-app.vercel.app
    URL_API_DEPLOY=https://your-api-app.render.com
   
    # Database
    MONGO_ATLAS_URI=mongodb+srv://username:password@cluster.mongodb.net/laptop_ease?retryWrites=true&w=majority
   
    # JWT Configuration
    JWT_ACCESS_TOKEN=your_jwt_access_token_secret
    JWT_REFRESH_TOKEN=your_jwt_refresh_token_secret
    JWT_ACCOUNT_VERIFY=your_jwt_account_verify_secret
   
    # OAuth Configuration
    GOOGLE_CLIENT_ID=your_google_client_id
    GOOGLE_CLIENT_SECRET=your_google_client_secret
    FACEBOOK_APP_SECRET=your_facebook_app_secret
   
    # Email Configuration
    NAME=smtp.gmail.com
    HOST=smtp.gmail.com
    SERVICE=gmail
    USER=your_email@gmail.com
    PASS=your_app_password
   
    # Cloudinary Configuration
    CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
    CLOUDINARY_API_KEY=your_cloudinary_api_key
    CLOUDINARY_API_SECRET=your_cloudinary_api_secret
    CLOUDINARY_API_ENV=your_cloudinary_env_variable
   
    # Payment Gateway Configuration
    ACCESS_KEY_MOMO=F8BBA842ECF85
    SECRET_KEY_MOMO=K951B6PE1waDMi640xX08PD3vg6EkVlz
    PARTNER_CODE_MOMO=MOMO
    IPN_URL_MOMO_NGROK=https://your-api-app.render.com/api/payment/momo/callback
   
    ZALOPAY_APP_ID=2554
    ZALOPAY_KEY1=sdngKKJmqEMzvh5QQcdD2A9XBSKUNaYn
    ZALOPAY_KEY2=trMrHtvjo6myautxDUiAcYsVtaeQ8nhf
    ZALOPAY_ENDPOINT_CREATE=https://sb-openapi.zalopay.vn/v2/create
    ZALOPAY_ENDPOINT_QUERY=https://sb-openapi.zalopay.vn/v2/query

3. Deploy:

   • Click "Deploy" and Vercel will automatically build and deploy your application
   • Your app will be available at https://your-app-name.vercel.app

Backend deployment with Render

If you have a separate backend API:

1. Create a new Web Service on Render:

   • Visit render.com and sign up/login
   • Click "New +" and select "Web Service"
   • Connect your GitHub repository

2. Configure build and start commands:

   # Build Command
   npm install && npm run build
   
   # Start Command
   npm start

3. Set environment variables:

   • Add all the environment variables listed above in the Render dashboard
   • Make sure to update NEXTAUTH_URL to your Render service URL

Database setup with MongoDB Atlas

1. Create MongoDB Atlas cluster:

   • Sign up at mongodb.com/atlas
   • Create a new project and cluster
   • Choose the free tier for development

2. Configure database access:

   • Create a database user with read/write permissions
   • Add your IP address to the IP Access List (or use 0.0.0.0/0 for all IPs in production)

3. Get connection string:

   • Click "Connect" on your cluster
   • Choose "Connect your application"
   • Copy the connection string and replace <password> with your database user password

4. Set up collections:

   // The application will automatically create collections when needed
   // Main collections: users, products, versions, orders, categories, subcategories

Environment-specific configurations

• Development:

  • Use local MongoDB or MongoDB Atlas free tier
  • Hot reloading enabled
  • Detailed error messages

• Production:

  • MongoDB Atlas production cluster
  • Optimized builds
  • Error logging and monitoring
  • Environment variables secured

TODO

• Product catalog with search and filtering
• User authentication and profiles
• Shopping cart and checkout process
• Payment integration with ZaloPay, MoMo (for Vietnamese market)
• Admin dashboard for inventory management
• MongoDB Atlas integration
• Deployment on Vercel and Render
• Advanced recommendation system
  • AI-powered product recommendations
  • Collaborative filtering based on user behavior
• Enhanced features
  • Live chat customer support
  • Product availability notifications
  • Price drop alerts
  • Bulk order discounts
• Mobile application
  • React Native mobile app
  • Push notifications
• Analytics and reporting
  • Advanced sales analytics
  • Customer behavior tracking
  • Inventory forecasting
• Internationalization
  • Multi-language support
  • Multi-currency support
  • Regional shipping options
• Performance optimizations
  • Image optimization and CDN
  • Database query optimization
  • Caching strategies with Redis

License

MIT

---

Laptop Ease - Making laptop shopping easier, one click at a time.