Hi reader, I hope you have landed here while searching for web development project ideas or maybe you got this blog recommended by your friend, or you have randomly searched for web development or maybe www.foodxprs.com. Well, as you are here, I would like to tell you a bit about me first. I am Ankit Bajpai and I have been learning web development at www.masaischool.com for over 2 months now. In this blog, I would like to share with you a little project that I and a few of my fellow colleagues have made.
What is foodxprs.com and what did we actually achieve?
If you have never visited www.foodxprs.com, it provides Lunch Services to meet the healthy lunch requirements of employees and professionals who are unable to prepare themselves lunch due to hectic mornings. In our clone, we have tried to make all the sections and pages that one could find over there. We used a technology stack containing HTML5, CSS, and JavaScript.
A glimpse of the project and a simple walkthrough of the website.
Talk is cheap, show me the code! — Linus Torvalds
Now, I’ll be guiding you through some of the pages that we have made. In order to use the project, you need to follow the below steps.
1. Open index.html on the live server(using VS code live server)
2. This is our landing page. You can enjoy it for a while and then click on Register on the top right to Register
3. Now you should click on the Register button and Login yourself on the next page
4. Now you have landed on our main page
5. This is our Packages page clone
6. This is our Order Online Page where you have different Meals to buy
7. After making an order you will redirect to Order Summary Page
8. After clicking to Pay now button you will redirect to Payment Portal(in this UI is developed by us not clone by the original website)
Okay I know this might be a little overwhelming but if you are interested to try it yourself or watch more snapshots of our website, you can go to the link mentioned in the endnotes ( last section of this blog ).
A little about the teammates and their contributions.
I can’t thank Nil Patil, Bhargav Reddy, and Anwar Shad enough, who worked hard for this project to become what it is today. I think the best way to thank them would be to mention their contribution and let their work speak for them.
Nil Patil was responsible for designing the landing page(one-fourth part), about us page, why us page, delivery waiting page, and pricing page. He took care of all the little, but important, things such as making the hover effect on images which simply take the user experience to the next level.
Bhargav Reddy was responsible for designing the landing page(one-fourth part), order online page, package page, and plan my meal page. He also took care of all the little, but important, things which simply take the user experience to the next level.
Anwar Shad was responsible for designing the register page, contact us page, login page. He makes the registration page we stick that it should follow all rules at login by use of local storage.
I on the other hand handled the landing page, payment portal page, navigation bar, and footer. Out of all the pages, I also managing user data using LocalStorage (something which the original website does too) and making the cloned project pixel perfect. I also worked with all three of them to work on the pages you’ll see in the profile section.
Though this project was not a piece of cake and neither our 3 days journey was all rainbows, I would say that managing these guys was fun. I used to merge all our codes at night and was tracking the progress of all of us. I found very few merge conflicts during merging, which is a good thing because it shows how flawlessly we worked.
Ending Notes
In our humble attempt to clone the www.foodxprs.com website we tried our best to achieve the preciseness with whatever limited knowledge we possess. Though this project was our attempt to work on the front side of things, we would surely be working on the backend in the future in order to make it perfect from the backend perspective too. I hope you liked our efforts.
If you want to check out the repository and try it yourself, please go to https://github.com/ankitbajpai1607/project-2-FoodXprs_clone and fork the repository.
In the end, I would like to thank you for sticking around to the end. Please like, share, and comment your suggestions down below.