Efood

Header Component (Header.tsx): Responsive navigation bar with mobile menu Logo and navigation links Cart indicator Hero Section (Hero.tsx): Attractive hero section with gradient background Call-to-action button Responsive text sizing Food Card Component (FoodCard.tsx): Reusable component for displaying food items Shows image, name, description, and price Add to cart functionality Main Page (page.tsx): Integrated all components Responsive grid layout for food items Sample food items data Layout (layout.tsx): Updated metadata Added Inter font Proper HTML structure

???User authentication Checkout process Individual food item pages Order history Search functionality

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

// I'll help you set up MongoDB Atlas step by step:

First, let's create a MongoDB Atlas account: Go to MongoDB Atlas Click "Try Free" Fill in your details or sign up with Google Once logged in: Click "Build a Database" Choose "FREE" tier (M0) Select your preferred cloud provider (AWS, Google Cloud, or Azure) Choose the region closest to you Click "Create" Set up database access: In the security menu, click "Database Access" Click "Add New Database User" Choose "Password" authentication Username: "efood_admin" (or your preferred username) Password: Generate a secure password Set Database User Privileges to "Read and write to any database" Click "Add User" Set up network access: In the security menu, click "Network Access" Click "Add IP Address" Click "Allow Access from Anywhere" (for development) Click "Confirm" Get your connection string: Go back to "Database" section Click "Connect" Choose "Drivers" Copy the connection string

//Google OAuth Setup: Go to Google Cloud Console Click "Select a project" at the top and then "New Project" Name it "efood" and click "Create" Once created, select the project In the left sidebar, go to "APIs & Services" > "OAuth consent screen" Choose "External" and click "Create" Fill in the required information: App name: "eFood" User support email: Your email Developer contact information: Your email Click "Save and Continue" Skip the "Scopes" section and click "Save and Continue" Add your email as a test user and click "Save and Continue" Go to "Credentials" in the left sidebar Click "Create Credentials" > "OAuth client ID" Choose "Web application" Set the following: Name: "eFood Web Client" Authorized JavaScript origins: CopyInsert http://localhost:3001 http://localhost:3000 Authorized redirect URIs: CopyInsert http://localhost:3001/api/auth/callback/google http://localhost:3000/api/auth/callback/google Click "Create" You'll get a Client ID and Client Secret. Save these. Crea