Foodie - Visit Live Site

Foodie is a food delivery application that allows users to search for food in different cities, filter based on food type, delivery time, and price, and place orders through an easy-to-use interface. The frontend is built using Vite, TypeScript, and React, with TailwindCSS for styling. It integrates Auth0 for authentication and Stripe for payment processing.

Features

• Search for food across various cities.
• Filter results based on food type, delivery time, and price.
• Authenticated login using Auth0.
• Secure payment integration using Stripe.
• Responsive UI with TailwindCSS.
• Seamless user experience built with React and optimized with React Query.

Tech Stack

• Vite - Fast development server and build tool.
• TypeScript - Strongly typed JavaScript for more reliable code.
• React - Component-based UI library.
• React Query (useQuery) - Data-fetching library for React.
• TailwindCSS - Utility-first CSS framework.
• Auth0 - Authentication and authorization provider.
• Stripe - Payment processing API.

Project Setup

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn package manager
• Auth0 account for authentication
• Stripe account for payment processing

Installation

1. Clone the repository:

git clone https://github.com/yourusername/foodie-frontend.git

2. Navigate to the project directory:

cd foodie-fe

3. Install dependencies:

npm install

4. Set up environment variables by creating a .env file in the root of the project:

.env

VITE_API_BASE_URL=backend-base-url
VITE_AUTH0_AUDIENCE=Auth0-audience-id
VITE_AUTH0_CALLBACK_URI=Auth0-callback-url
VITE_AUTH0_CLIENT_ID=Auth0-client-id
VITE_AUTH0_DOMAIN=Auth0-domain-url

5. Run the development server:

npm run dev

6. Open the app in your browser:

Visit http://localhost:5173 in your browser.