Fruitsify is a food e-commerce app that allows users to browse and search a variety of food products, including fruits, vegetables, rice, and more. The project uses modern web development technologies and libraries to provide a seamless shopping experience.
Check out the live demo deployed on Vercel: Food Ecommerce App(Fruitsify)
- User Authentication: Utilizes firebase google auth for secure user authentication.
- Firestore: Uses firestore for storing items data.
- Firebase Storage: Uses firebase storage for storing items image.
- Responsive Design: Optimized for both big screens and mobile devices.
- Search Functionality: Allows users to search for items.
- Form Validation: Utilizes react-hook-form and zod for form validation.
- Styling: Uses Tailwind CSS for modern and responsive UI design.
- State Mangement: Uses redux and redux-tookit for global state management.
- Type Safe: TypeScript is used for static typing and improved code quality.
- Vite: Vite is the build tool and development server for a fast and optimized development experience.
To run this project locally, follow these steps:
- Clone the repository to your local machine:
git clone https://github.com/neerajjoshi-github/food-ecommerce-app.git
- Go to the project directory
cd food-ecommerce-app
- Install the project dependencies:
npm install
-
Configure Environment Variables: Create a
.env.local
file in the root directory and add your environment variables:You can find all these firebase env from your firebase console.
FIREBASE_API_KEY=
FIREBASE_DATABASE_URL=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
FIREBASE_MESSAGING_SENDER_ID=
FIREBASE_APP_ID=
- Run the development server:
npm run dev
- Open your browser and visit http://localhost:5173 to view the app.
Here are some of the key dependencies used in this project:
- React Js: A javascript framework for frontend applications.
- Firebase: A cloud-based platform for database, storage and authentication.
- Tailwind CSS: A utility-first CSS framework for building responsive and modern UIs.
- React Hook Form: A library for flexible and efficient form validation.
- Zod: A runtime type checking library for JavaScript.
For a full list of dependencies, refer to the package.json
file.