Skip to content

README.md

Latest commit

 

History

History
148 lines (127 loc) · 7.03 KB

README.md

File metadata and controls

148 lines (127 loc) · 7.03 KB
Raw

SwiftTrack - Real-Time Delivery Management Platform

SwiftTrack is a modern, real-time delivery management and tracking application designed to streamline logistics for vendors, empower delivery partners, and provide customers with transparent order tracking.

Core Features

  • Vendor Order Management:
    • Vendor dashboard to view their list of orders.
    • Ability to assign available delivery partners to pending orders.
    • Real-time view of order statuses.
  • Delivery Partner Operations:
    • Delivery partner dashboard to view assigned orders.
    • "Start Delivery" feature to initiate live location tracking using the browser's Geolocation API.
    • Ability to pause/resume live tracking.
    • Functionality to mark orders as "Delivered".
    • Real-time toast notifications for new order assignments.
  • Real-Time Customer Map Tracking:
    • Dedicated tracking page for customers to view their order details.
    • Live map (Leaflet.js) displaying the delivery partner's current location.
    • Map and order status auto-update in real-time via WebSockets (Socket.IO).
    • Real-time toast notifications for order status changes.
  • User Authentication & Authorization:
    • Secure signup and login for Vendors and Delivery Partners using Supabase Auth.
    • Customer order lookup by Order ID.
    • Role-based access control for dashboards.
  • Modern UI/UX:
    • Responsive design built with Next.js (App Router), React, and TypeScript.
    • Styled with Tailwind CSS and ShadCN UI components.
    • Light/Dark theme toggle.
    • Subtle animations for an enhanced user experience.
  • Backend & Real-Time Communication:
    • Supabase for PostgreSQL database (users, profiles, orders, items, vendors, delivery partners).
    • Supabase for authentication.
    • Next.js Server Actions for secure backend operations interacting with Supabase.
    • Socket.IO for pushing real-time updates to connected clients.

Technology Stack

  • Frontend:
    • Next.js (App Router)
    • React
    • TypeScript
    • Tailwind CSS
    • ShadCN UI
    • react-hook-form for forms
    • zod for validation
    • lucide-react for icons
    • react-leaflet & leaflet for maps
    • socket.io-client for WebSocket communication
    • next-themes for theme management
  • Backend:
    • Supabase (PostgreSQL Database & Authentication)
    • Next.js Server Actions
    • Socket.IO (server-side integrated with Next.js API route)
  • Development & Tooling:
    • Node.js
    • npm
    • Jest & React Testing Library for testing
    • ESLint & Prettier (assumed standard setup)

Prerequisites

  • Node.js (v18 or later recommended)
  • npm or yarn
  • A Supabase account and a new project created.

Setup Instructions

  1. Clone the Repository:

    git clone https://github.com/Meetmendapara09/SwiftTrack.git
cd SwiftTrack

  2. Install Dependencies:

    npm install
# or
# yarn install

  3. Set Up Supabase Database:

    • Log in to your Supabase project dashboard.
    • Navigate to the SQL Editor.
    • Execute the SQL schemas provided in the project documentation (or previously by the AI assistant). This includes creating tables for profiles, vendors, delivery_partners, orders, order_items, the order_status ENUM type, the handle_new_user function/trigger, and the trigger_set_timestamp function/triggers.
    • Crucially, enable Row Level Security (RLS) on all your tables and define appropriate policies. The example policies provided are a starting point.

  4. Configure Environment Variables:

    • Create a .env.local file in the root of your project by copying the .env.sample file: 
      cp .env.sample .env.local
    • Open .env.local and fill in your Supabase project details:
      • NEXT_PUBLIC_SUPABASE_URL: Your Supabase project URL (e.g., https://your-project-ref.supabase.co). Found in Project Settings > API.
      • NEXT_PUBLIC_SUPABASE_ANON_KEY: Your Supabase project anon public key. Found in Project Settings > API.

  5. Generate Supabase TypeScript Types:

    • Make sure you have the Supabase CLI installed: npm install -g supabase (or npm install --save-dev supabase for project-local install).
    • Log in to the Supabase CLI: npx supabase login
    • Run the following command from your project root to generate types (replace YOUR_PROJECT_ID with your actual Supabase project ID, which can be found in the URL of your Supabase dashboard or project settings): 
      npx supabase gen types typescript --project-id YOUR_PROJECT_ID --schema public > src/lib/database.types.ts

  6. Run the Development Server:

    npm run dev
# or
# yarn dev

    The application should now be running, typically at http://localhost:9002 (as configured in package.json).

Running Tests

  • To run tests once: 
    npm test
  • To run tests in watch mode: 
    npm run test:watch
  • Test Reports: To generate an HTML test report (e.g., in ./src/test/result/test-report.html), you can install jest-html-reporter (npm install --save-dev jest-html-reporter) and configure it in your jest.config.mjs file.

Supabase Key Setup Points

  • profiles Table & handle_new_user Trigger: Essential for linking Supabase authenticated users (auth.users) to application-specific roles and data. The handle_new_user trigger automatically creates a profile when a user signs up.
  • vendors & delivery_partners Tables: These tables are populated after user signup (via AuthContext) to establish the vendor/delivery partner entities.
  • Row Level Security (RLS): This is fundamental for securing your data. Ensure policies are defined for each table to control who can access and modify data.
  • Database Triggers for updated_at: Use the trigger_set_timestamp function to automatically update updated_at columns on row modifications.

Project Structure (Overview)

  • src/app/: Contains all the Next.js App Router pages and layouts.
    • src/app/actions/: Server Actions for backend logic.
    • src/app/(auth-routes)/: Authentication related pages.
    • src/app/vendor/dashboard/: Vendor-specific dashboard.
    • src/app/delivery/dashboard/: Delivery partner specific dashboard.
    • src/app/track/[orderId]/: Customer order tracking page.
  • src/components/: Shared and feature-specific React components.
    • src/components/auth/: Authentication forms.
    • src/components/shared/: Globally used components like Header, Logo.
    • src/components/ui/: ShadCN UI components.
  • src/contexts/: React Context providers (e.g., AuthContext, OrderDataContext).
  • src/hooks/: Custom React hooks.
  • src/lib/: Utility functions, constants, Supabase client setup, type definitions.
  • pages/api/socket.ts: Next.js API route for Socket.IO server setup.