Awesome Meal Platform
Online meal ordering platform that offers a variety of amazing cuisines.
Explore Our Website
Table of contents
App first look
Home Page
Meals Explore
Authentication
Checkout
About the project
Online meal ordering platform that offers a variety of amazing cuisines.
Open source kits and API we have used
- Using Redux for state management in React.
- Using Redux-Saga for asynchronous actions in Redux.
- Using Reselect for selectors memoization in Redux.
- Using React Router for routing in React.
- Using TypeScript for static type checking.
- Using Redux Persist for data persistence locally for redux data.
- Using Stripe API for payment processing.
- Using Redux Logger for logging redux actions.
- Using Firebase Authentication for user authentication.
- Using Firebase Firestore for storing data.
- Using TheMealDB API for meal data.
- Using ImageKit for image optimization.
What's included
Here are the feature included:
Home page
- Explore various categories provided
- Explore recommended meals
Meals Page
- Preview meals from various categories
- Add meals to cart
- Redirect to category detail page
Category Detail Page
- Preview more meals from a specific category
- Add meals to cart
Checkout Page
- Preview meals in cart
- Remove meals from cart
- Increase or decrease quantity of meals in cart
- Checkout and pay for meals via Stripe
Sign In Page
- Sign in with Google
- Sign in with email and password
Sign Up Page
- Sign up with email and password
Run the app locally
The following instructions will go through the setting needed to run the front-end app on your local machine.
Run App Locally
1. Clone the project
git clone https://github.com/smallpaes/random-meal-platform.git
2. Enter the project folder
Open a new terminal and enter the folder
$ cd random-meal-platform
3. Install packages via npm
$ npm install
4. Create a Stripe account and get the publishable key and secret key
More about the key, kindly check This website
5. Create .env file
$ touch .env
6. Store API Keys in .env file and save
VITE_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
7. Optionally specify the currency for Stripe in .env file and save(Default: gbp)
Supported currency, kindly check This website
CURRENCY=
8. Run the app for development
$ npm run dev