Vendora Frontend

This is the frontend for the Vendora application, a modern e-commerce platform for food delivery, built with React.js and Vite. It provides a responsive user interface for customers, restaurant partners, and administrators.

Technologies Used

• React.js: A JavaScript library for building user interfaces.
• Vite: A fast build tool for modern web projects.
• npm (Node Package Manager) / Yarn: Package manager for JavaScript.
• Tailwind CSS: A utility-first CSS framework (based on App.css and index.css usage).
• Redux Toolkit: For state management (inferred from store/ directory).
• Axios: For making HTTP requests to the backend API.
• React Router DOM: For client-side routing.

Prerequisites

Before setting up the project, ensure you have the following installed:

• Node.js: v14.x or higher
• npm (Node Package Manager): Comes with Node.js

Installation

1. Clone the repository: If you haven't already, clone the main Vendora repository:

   git clone https://github.com/ayethan/Vendora-frontend

2. Navigate to the frontend directory:

   cd Vendora/frontend

3. Install dependencies:

   npm install
   # or
   yarn install

Configuration

1. Create a .env file: Copy the .env.example file and rename it to .env in the frontend/ directory.

   cp .env.example .env

2. Update environment variables: Open the newly created .env file and fill in the values for your specific setup:

   • VITE_APP_TITLE: The title of your application.
   • VITE_ENV: The environment (e.g., local, development, production).
   • VITE_BACKEND_URL: The URL of your backend API (e.g., http://localhost:5000/api/).
   • VITE_CLOUDINARY_CLOUD_NAME: Your Cloudinary cloud name, if using Cloudinary for image uploads.
   • VITE_STRIPE_PUBLISHABLE_KEY: Your Stripe publishable key for client-side payment processing.

Running the Project

To start the development server:

npm run dev
# or
yarn dev

The application will typically open in your browser at http://localhost:5173 (or another port if 5173 is in use).

Building for Production

To build the application for production:

npm run build
# or
yarn build

This command will create a dist directory with the optimized production build.

Project Structure

The src/ directory contains the main application code:

• assets/: Static assets like images and icons.
• components/: Reusable UI components (e.g., buttons, cards, modals). Subdirectories like Admin, Auth, Form, Modals, Nav, Partner, Restaurant, ui organize these components further.
• context/: React Context APIs for global state management (e.g., AuthContext.tsx).
• helpers/: Utility functions.
• hooks/: Custom React hooks.
• lib/: Library configurations or utility functions.
• pages/: Top-level components representing different views/pages of the application. Subdirectories like Admin, Auth, Frontend, Partner organize these pages.
• routes/: Route definitions for React Router DOM.
• services/: API client services for interacting with the backend.
• store/: Redux Toolkit store setup and slices for state management.

Contributing

(Add contributing guidelines here once the project is open-sourced)

License

(Add license information here)