DineOut-Clone with ReactJS
Hello there, you might be visiting restaurants frequently and sometimes you have over-obsessed with pre-empting and fulfilling the wants of today’s diner. It simply meant allowing diners to reserve a guaranteed table at the top restaurants in the city which has multiple benefits on one platform for all dining out needs. We team Dineout at Masai School developed a clone of the similar website of DineOut in just 6 days as a part of our construct week curriculum. This blog is all about our journey and the challenges we faced while building the React Application.
Features & Technologies
- Frontend Structure: React,HTML,CSS
- Backend : Express,Nodejs
- Design: Material-UI
- Database: MongoDB Atlas Server
Challenges Of Cloning DineOut
Firstly for data handling, we have tried to scrape the data. we got the total data but while making the queries for filtering and sorting on the backend that made to write very complex queries. Over here we got the total data in one table which caused us a problem while filtering the data. So, we are forced to change the total database structure to Small tables like all the data related to Cuisines, offers and so on.. in separate tables and linking these to the restaurant table which fetching the data . This sorted our issue in solving the problem.
User Flow
We tried to replicate the user flow for booking a table at a particular restaurant and also filtering based on his interest like offers, cuisines, location, and few other things.
Our team consisted of five members. We divided the responsibilities within the rest of the members and they were as follows:-
- Rajesh Paul: He took care of the home page. He worked on the Landing page and Backend of the website
2. Arman Singh: He worked on the navigation bar and the footer that is consistent in all the pages. And also worked on Signin Signup pages.
3. Shivam Sharma: Shivam Worked on Book Table page where user can choose the Restaurant
4. Vijay Kumar Singh: Vijay Created the restaurent details page and user Information Page.
5. Suraj Kumar : Suraj created data and and handled Mongo Database
Learning
- We all became proficient in reading the code of team members.
- Our code writing style became cleaner as we had to think while writing code that other team member will be reading.
- We had to learn about many React concept that we didn’t know before.
- We all learned how to plan a project and execute that.
Wrapping up
It’s not just about coding. It’s all about team collaboration, problem-solving, remote working. The more you do it, The better you become. I have always believed in learning by building and I will encourage you to do the same. Explore our CodeBase to experience some of the functionalities. I felt proud to work with such amazing people and special thanks to our mentor Prabhanjan Padhye.
Source
Deployment Link — Dineout