Sai PSB Laboratory - Chemical E-commerce

A modern, full-stack e-commerce platform aimed at providing premium laboratory chemicals and supplies. Built with Next.js, TypeScript, and MongoDB.

🚀 Features

• User Authentication: Secure Sign Up & Login/Logout with JWT (Access & Refresh tokens).
• Role-Based Access Control:
  • User: Browse products, manage cart, place orders, view order history.
  • Admin: Dedicated Dashboard for managing products (Add/Edit/Delete) and viewing all customer orders, with direct access via the Navbar.
• Product Management:
  • Image uploads via Cloudinary.
  • Detailed product attributes (CAS Number, Pack Size, Unit-based Pricing, etc.).
• Shopping Experience:
  • Add to cart functionality.
  • Checkout process.
  • Order tracking.
• Responsive Design: Styled with Tailwind CSS for mobile and desktop.
• Support & Inquiries:
  • Contact Form: Users can submit inquiries and support requests directly.
• Order & Communication Processing:
  • Tax Integration: Automated 18% GST calculation on all orders.
  • Receipt Generation: Auto-generated digital receipts with Lab/Company details.
  • Email Notifications: Automated email alerts for order confirmation, status updates, and new contact inquiries sent via Resend API.

🛠️ Tech Stack

• Framework: Next.js 16 (React 19)
• Language: TypeScript
• Database: MongoDB (using Mongoose)
• Styling: Tailwind CSS
• Icons: Lucide React
• Notifications: React Toastify
• Image Storage: Cloudinary
• PDF/Image Generation: Satori & Resvg
• Email: Resend

⚙️ Environment Variables

Create a .env file in the root directory and add the following variables:

# MongoDB Connection
MONGODB_URI=your_mongodb_connection_string

# JWT Configuration
ACCESS_TOKEN_SECRET=your_access_token_secret
ACCESS_TOKEN_EXPIRY=1d
REFRESH_TOKEN_SECRET=your_refresh_token_secret
REFRESH_TOKEN_EXPIRY=10d

# Cloudinary (for image uploads)
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# Resend (Email Service)
RESEND_API_KEY=re_your_resend_api_key
RESEND_FROM_EMAIL=Sai PSB Laboratory <onboarding@resend.dev>

📦 Getting Started

1. Clone the repository:

   git clone https://github.com/Tiyas04/project-anode.git
   cd project-anode

2. Install dependencies:

   npm install

3. Set up environment variables: Copy the example above into a new .env file.

4. Run the development server:

   npm run dev

5. Open the app: Visit http://localhost:3000 in your browser.

📂 Folder Structure

.
├── src
│   ├── app                 # Next.js App Router
│   │   ├── admin           # Admin dashboard & management routes
│   │   ├── api             # Backend API endpoints (Auth, Products, Orders)
│   │   ├── auth            # User authentication pages
│   │   ├── cart            # Shopping cart page
│   │   ├── contact         # Contact Us page
│   │   ├── products        # Product listing and details
│   │   ├── user            # User profile and order history
│   │   ├── layout.tsx      # Root layout
│   │   └── page.tsx        # Homepage
│   ├── components          # Reusable UI components (NavBar, Footer, etc.)
│   ├── lib                 # Utility functions (database, cloud storage)
│   ├── models              # Mongoose database models (User, Product, Order)
│   ├── pages               # Next.js Pages Router (Legacy/Auth API)
│   └── types               # TypeScript type definitions
├── public                  # Static assets (images, icons)
├── uploads                 # Temporary upload storage
├── .env                    # Environment variables
├── next.config.ts          # Next.js configuration
├── tailwind.config.ts      # Tailwind CSS configuration
└── tsconfig.json           # TypeScript configuration

📜 Scripts

• npm run dev: Starts the development server.
• npm run build: Builds the application for production.
• npm start: Starts the production server.
• npm run lint: Runs ESLint.

👤 Author

• Name: Tiyas
• GitHub: @Tiyas04