Grocery House (Full Stack Assignment)

This project was bootstrapped with Create React App.

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
• React Router
• Firebase Authentication
• Context API
• Bootstrap 5.0
• MongoDB
• Node.js
• Express.js
• React Hooks Form
• Axios
• CRUD operations
• Heroku
• Font Awesome

Project Features

In this project, I was introduced to the idea of backend technologies. I had hands on experience of using MongoDB, Express.js (a framework for Node.js).

1. User can buy grocery items from the homepage but he/she needs to login first. Applied Private Route (also known as Protected Route/ Authenticated Route) to restrict convenient access. Implemented Google and Facebook sign in method using Firebase Authentication.

2. On the process of buying, a checkout page is loaded by using route parameter to fetch data dynamically from MongoDB and displayed data accordingly. User’s order specific details are stored on MongoDB.

3. Used create, read, and delete of CRUD operations in this project. Unlike using fakeData, this time data displaying in the homepage is fetched from MongoDB. I slightly used React Authentication along with my previous knowledge of React Routing.

4. Admin can add/remove products. When products are added/removed, changes are reflected immediately on the homepage. User can view his/her specific order summary by clicking on Orders tab.

5. In addition, I used plain bootstrap to make the website device responsive (for mobile and desktop version). Furthermore, I deployed the site on Firebase which can be accessed through the above mentioned link.

Some screenshots of the project

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

We can get in touch through LinkedIn, Twitter or my email mehnazkhan231@gmail.com.

Thank you.