A sophisticated clone of the Bento application, showcasing modern web development practices with a robust frontend and backend architecture.

• User Authentication: Secure sign-up and login functionality using OAuth.
• Responsive UI: Adaptive design built with SCSS.
• Dynamic Data: API integration for real-time data updates.
• Image Storage: Utilizes Cloudinary for efficient and secure image storage.
• Deployment: Frontend seamlessly deployed on Vercel. Backend deployed on Render.

Experience the application live https://bento-clone-app.vercel.app

• Installation
• Usage
• Project Structure

Follow these steps to set up the project locally:

1. Clone the repository

   git clone https://github.com/Balaganesh003/bento-clone.git

2. Navigate to the project directory

   cd bento-clone

3. Install dependencies

   • Backend

     cd backend
     npm install

   • Frontend

     cd frontend
     npm install

• GOOGLE_CLIENT_ID
• GOOGLE_CLIENT_SECRET
• CLIENT_URL
• MONGO_URL
• PORT
• PASSWORD
• JWT_SECRET
• SESSION_SECRET
• COOKIE_KEY_1
• COOKIE_KEY_2
• ORIGIN_1
• ORIGIN_2
• ORIGIN_3
• ORIGIN_4
• NODE_ENV
• CLOUDINARY_CLOUD_NAME
• CLOUDINARY_API_KEY
• CLOUDINARY_API_SECRET
• EMAIL_HOST
• EMAIL_PORT
• EMAIL_USER
• EMAIL_PASS
• EMAIL_FROM

• NEXT_PUBLIC_MAPBOX_TOKEN
• NEXT_PUBLIC_API_URL

To run this project, create a .env file in the root directory for the backend and another .env file in the root directory for the frontend with the necessary environment variables listed above.

4. Run the application
   • Backend

     cd backend
     npm start

   • Frontend

     cd frontend
     npm start

Once the application is up and running, open your browser and navigate to:

• Frontend: http://localhost:3000
• Backend: http://localhost:5000

bento-clone/
├── backend/
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   └── server.js
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── services/
│   │   └── App.js
├── .prettierrc
└── README.md