Development Documentation for Banizzik.com

Project Overview

Banizzik.com is a full-stack e-commerce platform designed to provide seamless buying, selling, and management experiences. The platform is developed using modern technologies to ensure scalability, security, and performance.

Development Stack

• Frontend: Next.js, Tailwind CSS, ShadCN, Headless UI
• Backend: Python, Django (Django REST Framework)
• Database: MySQL (via PyMySQL)
• Authentication: NextAuth integrated with Django API
• Deployment: Google Cloud Functions
• OS Used: Ubuntu Linux

Key Features

1. Authentication System

   • Custom login and registration forms.
   • OTP verification for secure sign-ins.
   • JWT-based sessions with token refresh logic.

2. User Roles

   • Admin: Manage products, orders, and users.
   • Seller: Add and manage their products.
   • Customer: Browse and purchase products.

3. Product Management

   • Sellers can upload, update, and delete product listings.
   • Customers can browse products by categories, filters, and sorting.

4. Cart and Checkout

   • Persistent cart implementation.
   • Secure payment methods.
   • Order tracking and history.

5. Analytics

   • Admin dashboard with order, sales, and user activity tracking.

6. Public and Private Routes

   • Private routes (e.g., dashboard, account details) require login.
   • Public routes (e.g., home, register, product browsing) are accessible without login.

Backend Development

API Structure

Base URL: /api/v1

Endpoints:

• Authentication
  • POST /auth/register/: Register new users.
  • POST /auth/login/: Authenticate users and issue JWT tokens.
  • POST /auth/otp/verify/: Verify OTP during login.
  • POST /auth/refresh/: Refresh JWT tokens.
• Product Management
  • GET /products/: Fetch all products with filters.
  • POST /products/: Add a new product (seller only).
  • PUT /products/<id>/: Update a product (seller only).
  • DELETE /products/<id>/: Delete a product (seller only).
• Cart
  • GET /cart/: Retrieve cart items for the user.
  • POST /cart/: Add item to cart.
  • DELETE /cart/<id>/: Remove item from cart.
• Orders
  • POST /orders/: Place a new order.
  • GET /orders/: Get order history for the user.
  • GET /orders/admin/: Admin view of all orders.
• Analytics
  • GET /analytics/orders/: Retrieve daily and monthly order stats.

Authentication Flow

• JWT tokens issued upon login, including access and refresh tokens.
• OTP verification for enhanced security.
• Sessions managed via Django REST Framework's custom authentication classes.

Middleware

• Request validation for API inputs.
• Role-based access middleware.
• Sequential navigation checks.

Frontend Development

Key Components

• Authentication Forms: Built with custom UI and integrated with Django API.
• Dashboard: Dynamic admin, seller, and customer dashboards.
• Product Listings: Paginated and filterable views with responsive design.
• Cart Page: Real-time cart updates and item removal.
• Checkout Process: Multi-step UI with secure payment options.

NextAuth Configuration

• Custom pages for login, register, and error handling.
• Session callbacks to update JWT tokens.
• Role-based route protection.

Deployment

1. Backend:

   • Django backend deployed as Google Cloud Functions.
   • Static files served via a CDN for performance optimization.

2. Frontend:

   • Deployed via Vercel for seamless integration with Next.js.

3. Environment Variables:

   • DATABASE_URL: MySQL connection string.
   • SECRET_KEY: Django secret key.
   • NEXTAUTH_SECRET: Used for JWT encryption.
   • NEXTAUTH_URL: URL for NextAuth callbacks.

Challenges & Solutions

1. Token Refresh Logic

   • Challenge: Managing secure session expiration.
   • Solution: Implemented refresh token logic using Django REST Framework.

2. Role-Based Access

   • Challenge: Enforcing role-based permissions.
   • Solution: Middleware for API-level and frontend route protection.

3. Sequential Navigation

   • Challenge: Prevent users from skipping registration steps.
   • Solution: Added middleware in both Next.js and Django.

4. Database Optimization

   • Challenge: Handling high-volume traffic.
   • Solution: Optimized queries and implemented caching.

Future Enhancements

1. Real-Time Notifications for order updates.
2. AI-Powered Product Recommendations.
3. Progressive Web App (PWA) support for better mobile accessibility.

Let me know if you need further modifications or additional sections for the documentation.