TasteBox is a full-stack Meal Planning & Delivery Web Application that allows users to personalize their meal plans and receive timely deliveries based on dietary preferences and schedules. Customers can browse curated meal options, set preferences (vegan, keto, gluten-free, etc.), and schedule deliveries. Meal providers can efficiently manage menus, view and respond to customer orders, and tailor offerings to individual needs. The platform is designed with a clean, responsive UI and robust role-based access control to ensure a seamless experience for all users.

• @🌐Live Site: TasteBox Frontend
• @🗃️Frontend GitHub: TasteBox Frontend Repo
• @🗃️Backend GitHub: TasteBox Backend Repo

• Custom login system using email/phone + password
• JWT (JSON Web Tokens) for session handling
• Password hashing with bcrypt for security

Customer Dashboard:

• Select meal plans, track orders, manage preferences

Meal Provider Dashboard:

• Manage menus, respond to orders, track deliveries

• Customers can filter by dietary needs (vegan, keto, etc.)
• Meal providers can define ingredients, pricing, portion sizes

• Customers can search meals by rating, preference, cuisine
• Providers see orders filtered by matching criteria

• Separate routes and views for customers and providers
• Protected routes for authentication-required pages

• JWT for user session management
• bcrypt for secure password encryption
• Custom middleware.ts for protected route access based on roles

• Responsive Design: Fully mobile-optimized
• Modern UI: Tailwind CSS + Shadcn
• User-Friendly: Simple forms, clean navigation, dark mode ready

Framework: Next.js (with App Router)

Language: TypeScript

UI: React.js, Tailwind CSS, Shadcn/ui

State Management: Redux Toolkit

Routing & Forms: Next Navigation, React Hook Form

Authentication: JWT

Node.js with Express for the RESTful API

• MongoDB for storing data (users, meal menus, orders)
• JWT for authentication
• bcrypt for password hashing
• Nodemailer for email notifications

TasteBox/
├── .env.local              # Environment variables (NEXT_PUBLIC_BASE_API)
├── next.config.js          # Next.js configuration
├── tsconfig.json           # TypeScript configuration
├── next-env.d.ts           # Auto-generated for TS support
├── public/                 # Static assets (optional)
├── node_modules/           # Installed dependencies
├── package.json            # Project metadata and scripts
├── README.md               # Project documentation (optional)
└── src/
    ├── app/                # Next.js pages & routing (App Router)
    ├── components/         # All reusable UI components
    ├── constants/          # Static constant values
    ├── context/            # Global context API usage
    ├── hooks/              # Custom React hooks
    ├── lib/                # Utility/helper functions
    ├── providers/          # Context or layout providers
    ├── redux/              # Redux slices & store setup
    ├── services/           # API call services
    ├── types/              # TypeScript interfaces and types
    └── middleware.ts       # Route protection middleware

1. Clone the Repository

git clone https://github.com/nafis200/TasteBox_frontend.git
cd TasteBox_frontend

2. Install Dependencies

npm install

3. Set Up env varriables

Create a .env.local file in the root directory and add the following line

NEXT_PUBLIC_BASE_API=http://localhost:5000

4. Run the Development Server

npm run dev

Nafis Ahamed📧 Email: [email protected]🌐 Portfolio: https://portfoliouser.vercel.app/