Giter Club home page Giter Club logo

testo-burger-client's Introduction

Testo Burger (on going MERN Stack Project)

This project was bootstrapped with Create React App.

Important Notice!

This website design is inspired from one of many beautiful designs created by Jthemes (A theme forest member). Jthemes is the author of these amazing wordpress themes Testo - Restaurant Caffe Wordpress Theme. (Please check out their amazing Word Press Themes if you haven't already !)

I have developed a website based on one of their theme with some customizations of my own. This is purely an approach motivated by learning purposes. Almost all the images and graphics used in the website belong to the respective owner and I do not claim any right over them.

Firebase Live Site Link

The project was deployed at Firebase. One can access the link by clicking here Firebase Live Site Link.

Technology Used

  • React.js
  • Material UI
  • React Router (6.2.1)
  • React Redux
  • Redux Toolkit
  • React Stripe JS
  • MongoDB
  • Firebase Authentication
  • Context API
  • Node.js
  • Express.js
  • React Hooks Form
  • React Swiper JS
  • Axios
  • CRUD operations
  • Heroku
  • React Reveal
  • SweetAlert2

Project Features

  1. User can add foods from the homepage (Explore Our Menu section), Our Menu tab (at Navbar) and All Items section under Shop tab available at Navbar. But he/she needs to login first to proceed to Cart and eventually Checkout.

  2. Applied Private Route (also known as Protected Route/ Authenticated Route) to restrict convenient access. Implemented Google/Twitter/Github sign in method using Firebase Authentication. User can also register and sign in using their credentials.

  3. The data displayed in the homepage (Explore Our Menu & Image Gallery section) is fetched from MongoDB but for most parts I used static data. Used route parameter to fetch data dynamically from MongoDB and displayed accordingly.

  4. Used React Redux for state management of Cart and handling Checkout Data. Followed Ducks Pattern while implementing Redux.

  5. User can pay with card (integrated payment gateway method specifically Stripe Payment) while ordering.

  6. Exhausted CRUD operations on multiple occasions while building the website.

  7. In addition, I used Material UI to make the website device responsive. Furthermore, I deployed the client side on Firebase which can be accessed through the above mentioned link. Server side is deployed using Heroku.

  8. Working on to add these features

    • User can view his/her orders (along with status).
    • Admin/User differentiation.
    • Admin will be able to manage Food Items and Placed Orders.
    • An admin will be capable of adding another user as an admin.

In order to access the server side code of this website, please click here.

We can get in touch through LinkedIn, Twitter or my email [email protected].

Thank you.

Some screenshots of the project

Main Banner

Image Gallery

Product Details

Main Menu

Login page

Cart Items

testo-burger-client's People

Contributors

mk-khan123 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.