Organic Farm - E-commerce Website

Welcome to Organic Farm, an e-commerce platform for purchasing fresh fruits and vegetables online. Built with modern web technologies, this app offers a seamless shopping experience with user-friendly features like Google Authentication and PhonePe payment integration.

Video Demo

Check out the demo video of the app: Video Link

Features

• Responsive Design: The website is fully responsive, ensuring a great user experience on all devices, from mobile phones to desktops.

• User Authentication: Secure user authentication powered by Google Auth allows users to sign in easily and securely.

• Payment Gateway: Integrated PhonePe payment gateway enables smooth and secure transactions for purchasing products.

• Modern UI: Developed using React.js and Tailwind CSS, the app boasts a clean and intuitive user interface.

• React.js Features:

  • useContext: State management across components.
  • useState: Handling dynamic state changes.
  • useEffect: Managing side effects in components.

• Additional React Packages:

  • react-hook-form: Simplifies form validation and handling.
  • react-hot-toast: Provides customizable toast notifications.
  • react-icons: Offers a vast collection of customizable icons.
  • react-router-dom: Enables navigation and routing within the app.

Installation

To run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/KumarRahul01/Organic-Farm-App.git
   

2. Navigate to the project directory:

   cd organic-farm
   

3. Navigate to the client directory:

   cd client
   

4. Install dependencies:

   npm install
   

5. Run the vite (forntend) server:

   npm run dev
   

6. Open http://localhost:5173 to view it in your browser.

7. Now navigate back to the project directory:

   cd organic-farm
   

8. Navigate to the server directory:

   cd server
   

9. Install dependencies:

   npm install
   

10. Run the backend server:

    npm run dev
    
    

Tech Stack Used

• Frontend: React.js, Tailwind CSS
• Authentication: Google Auth
• Payment Gateway: PhonePe
• State Management: useContext, useState
• Side Effects: useEffect
• Form Handling: react-hook-form
• Notifications: react-hot-toast
• Icons: react-icons
• Routing: react-router-dom

How It Works

• Browse Products: Users can browse a variety of fresh fruits and vegetables available for purchase.
• Add to Cart: Selected products can be added to the cart for checkout.
• Checkout: Users can securely checkout using the integrated PhonePe payment gateway.

Screenshots

[Home Screen] [Product Screen] [Cart Screen]

Video Demo

Check out the demo video of the app: Video Link