That's the «Food Ordering» site [made with: React & Tailwind] + Adaptive layout.
version: Nov 2022 - Jan 2023, created by Gleb 'Faitsuma' Kiryakov
- Home page
- Menu page
- Registration page
- Login page
- Cart page, Summary tab
- Cart page, Delivery tab
- Cart page, Payment tab
- Home page
- Menu page
- Registration page
- Login page
- Cart page, Summary tab
- Cart page, Delivery tab
- Cart page, Payment tab
In the root of the project run:
Also, navigate to the server folder and install modules there. You can do that by running:
Afterwards, start the server from the server folder by running:
or
And to start the app in the development mode.
Open http://localhost:3000 to view it in your browser.
Go back to the project directory, you can run:
To store your environment variables, you can create .env
file in the root of your project and fill in the following values:
STRIPE_SECRET_KEY=""
STRIPE_WEBHOOK_SECRET=""
REACT_APP_STRIPE_PUBLISHABLE_KEY=""
REACT_APP_FIREBASE_CONFIG_API_KEY=""
REACT_APP_FIREBASE_CONFIG_AUTH_DOMAIN=""
REACT_APP_FIREBASE_CONFIG_PROJECT_ID=""
REACT_APP_FIREBASE_CONFIG_STORAGE_BUCKET=""
REACT_APP_FIREBASE_CONFIG_MESSAGING_SENDER_ID=""
REACT_APP_FIREBASE_CONFIG_APP_ID=""
REACT_APP_FIREBASE_CONFIG_MEASUREMENT_ID=""
- Tailwind: https://tailwindcss.com/docs/installation;
- React:
- React Router: https://reactrouter.com/en/main;
- Firebase (auth):
- Remix: https://remix.run/docs/en/v1/guides/routing;
- Postman:
- Faker: https://fakerjs.dev/guide/;
- MongoDB:
- Redux Thunk: https://www.npmjs.com/package/redux-thunk;
- Stripe:
- clsx: https://www.npmjs.com/package/clsx;
- Lodash:
- React-Toastify: https://www.npmjs.com/package/react-toastify;
- Redux:
- React Hook Form: https://react-hook-form.com/get-started/;
- Git:
- React-multi-carousel: https://www.npmjs.com/package/react-multi-carousel?activeTab=dependencies;