Restaurant Website customizer

Making websites affordable and accessible to small business restaurant owners.

Comment

Inspiration

With Covid-19 continuing to affect restaurants, restaurants need websites for their companies for food delivery and to market their business. Mia met a man who was interested in launching his restaurant and he wanted a website for his business but knew nothing about technology. Outreach can be the difference life or death for a restaurant and he told her that many restaurants are sinking because they are unable to access their customers. The average website costs 2,000 dollars which is not affordable but if we have a prototype and use the same prototype for multiple business we realized it can lower the price and benefit more people.

What it does

It creates a cookie cutter website that will allow them to order food for small business in DC.

How we built it

We built the prototype in Framer X and the basic real website in HTML and CSS and Javascript with React.

Challenges we ran into

The greatest challenge throughout this experience was being adaptable to change. A week had passed and we were set on building a html/css website. Upon the suggestion of Prayash, the team decided take the challenge head on and learn the intricacies of React Js. As a team, we realized learning the implementation would be challenging but we were looking to learn from this event. Getting rid of one week worth of code was straining for our minds along side the idea that deadline day was right around the corner. So, the work was divided into researching front-end, back-end and logistics for our possible business while a full-stack developer worked on creating the main webapp. The roles were as follows:

  • Prayash : Full-Stack Developer
  • Arian : Front-End Developer
  • Rishal : Back-End Developer
  • Mia : Business Logistics & Project Management

Prayash, a freshman studying Computer Science, built the foundation of the database from the different pages to the functions and components which define it for what it is currently. The role was to gather and communicate with Rishal and Arian to implement and teach each other what we learned with a focus on getting a finished product by deadline day. The challenges Prayash faced were understanding the difference between const, function, classes and the new different ways to write functions in ReactJS. He also encountered problems reading and writing files into Firebase.

Arian a junior in computer science, was given the responsibility to figure out an intuitive navigation bar and home page which kept its structural integrity regardless of what device it is used on. Meaning it can handle resizing and being available IOS or Android devices. He worked with Rishal and Prayash to learn how to use ReactJs and Firebase to create his own prototype of the restaurant website. It is not implemented in the current prototype, so it will be next on the list. He will be continuing to modify his version after this event. The challenge for Arian was understanding how to properly use ReactJs since it was his first time learning how to use it. With his current prototype he has the front page set up, but due to the time constraint he was unable to finish the navigation to different pages and also linking the page to firebase. His next goal is to set up a pages and a footer for the website and learn how to save data and return data to the user.

Rishal took it upon himself to lean how ReactJs and Firebase talk to each other, to which, we was able to read, write and print categories of data within our project Firestore database. The read and write functionalities are implemented into the current iteration of the prototype. The print action is the next item on the list.

Mia took over the image of what the website should be and it should look like. She also initiated the initial html/css prototype as well as the framerX visual representation prototype. The role was to look for future growth and how to get team working.

All of us had to face the challenge of being present in meetings instead of working together face to face.

Accomplishments that we're proud of

Heading into the first day, we had a rough idea of what our project would look like and how helpful it would be to our community. But having gone through a learning phase where every member started from first base in ReactJS, Firebase & FramerX, we are proud of the multiple prototypes we encountered and the journey getting to a working ReactJS website.

We were able to successfully create :

  1. A functional ReactJs website
  2. A functional Data Storage module(Firebase) and implement it with our website
  3. Create stunning css that is easy on the eyes.
  4. Have team members that have never met, never attended a CS class, or never been to a hackathon work in a cohesive and effective manner.

Additionally, we tried to replicate a real-world work environment by giving team members roles and responsibilities. We also met at 6:00 pm EST on Discord everyday following deadline day to discuss what each member accomplished and come face to face with the steps going forward when we ran into challenges.

It is hard for us to consistently search for solutions when the terminal window was full of red lines. But, after grabbing onto a strong foundation in ReactJS, we can finally say 2 of our members successfully completed their first hackathon!

What we learned

We realized how teamwork dynamics can shift over time. Initially everyone was learning together for the first 3 days and progress was being made on the same page. Then, there was fundamental shift after our colleague introduced the idea of using react and we broke off into the 3 technical and 1 non technical. No matter what things can change and anyone can change the path of a project and anyone can learn something new that can change everything about a project.

What's next for Restaurant Website customization

There are a multitude of changes and quirks that needed to be implemented to the current project base. For example, the forms (Set a Reservation, Contact Us) need to have a field requirement. We need to learn how to implement a pay function, how to decrease load on the server while maintaining the integrity of the website and get feedback from small local businesses so the framework is set for any future plans.

Share this project:

Updates