FreshFast

FreshFast is a web application that streamlines the process of ordering and delivering fresh produce to businesses. It provides a platform for clients to order fruits and vegetables, and for agents to manage and deliver these orders efficiently.

Features

Client Features

• Product Catalog: Browse through a categorized list of fresh produce
• Shopping Cart: Add products to cart with quantity management
• Delivery Scheduling: Choose delivery dates and time slots
• Order Management: View order status and history
• Real-time Updates: Receive SMS notifications about order status

Agent Features

• Order Management Dashboard: View and manage incoming orders
• Daily Purchase Lists: Organize daily procurement needs
• Delivery Route Planning: Optimize delivery routes with Waze integration
• Status Updates: Update order status throughout the fulfillment process

Tech Stack

• Frontend: React with TypeScript
• State Management: Zustand
• Routing: React Router v6
• Styling: Tailwind CSS
• Icons: Lucide React
• Deployment: Vercel

Project Structure

src/
├── components/         # Reusable UI components
│   ├── auth/          # Authentication related components
│   ├── cart/          # Shopping cart components
│   ├── delivery/      # Delivery management components
│   ├── layout/        # Layout components (Header, etc.)
│   └── orders/        # Order management components
├── pages/             # Page components
├── store/             # Zustand store definitions
├── types/             # TypeScript type definitions
└── utils/             # Utility functions

Getting Started

Prerequisites

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

Installation

1. Clone the repository:

git clone https://github.com/yourusername/fresh-fast-client.git
cd fresh-fast-client

2. Install dependencies:

npm install
# or
yarn install

3. Set up environment configuration: VITE_API_URL needs to be defined in production

Note: For local development, no environment file is needed as the application defaults to using `http://127.0.0.1:8000/api`.

4. Start the development server:
```bash
npm run dev
# or
yarn dev

The application will be available at http://localhost:5173

Deployment

Deploying to Vercel

1. Push your code to a GitHub repository

2. Connect your repository to Vercel:

   • Go to Vercel
   • Import your repository
   • Select the project settings:
     • Framework Preset: Vite
     • Build Command: npm run build
     • Output Directory: dist

3. Environment Variables:

   • Set VITE_API_URL to https://fresh-fast-backend.onrender.com/api for production deployment
   • Add any other API keys or configuration as needed

4. Deploy:

   • Vercel will automatically deploy your application
   • All routes will be handled correctly thanks to the vercel.json configuration

Handling Client-Side Routing

The application uses React Router for client-side routing. The vercel.json configuration ensures that all routes are properly handled in production:

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

User Roles

Client

• Can browse product catalog
• Can add items to cart
• Can schedule deliveries
• Can view order history
• Receives SMS notifications

Agent

• Can view and manage orders
• Can update order status
• Can organize delivery routes
• Can view daily purchase lists

Authentication

The application supports two types of authentication:

1. Client Authentication

   • Regular login/register flow
   • Business information required for registration

2. Agent Authentication

   • Separate login portal
   • Restricted access to agent dashboard

Development

Code Style

• Use TypeScript for type safety
• Follow React best practices
• Use functional components with hooks
• Implement responsive design using Tailwind CSS

State Management

The application uses Zustand for state management with the following stores:

• authStore: Manages user authentication state
• cartStore: Manages shopping cart state

Protected Routes

Routes are protected based on user roles:

• /: Product catalog (clients only)
• /agent/dashboard: Agent dashboard (agents only)
• /delivery-schedule: Delivery scheduling (clients only)
• /confirm-order: Order confirmation (clients only)

Contributing

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

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Icons provided by Lucide
• UI components styled with Tailwind CSS
• Hosting provided by Vercel