Inspiration
My inspiration was from nightmares kitchen with Gordon Ramsay. Basically he visits all these restaurants where he see's all type's of disgusting things like meat stored in a hot room and weeks old, frozen food defrosted the served and bugs crawling into the food so that is why I created Restaurant Inspector
What it does
Restaurant inspector lets you view the health reports of various restaurants. It lets you search and view the overall health score of each restaurant. It features a page for each restaurant that features things like food storage, maintenance, preparation, sanitation and so much more. It also has a small gallery of each restaurant so you can get a picture of what the restaurant you might be eating at is like.
How we built it
I built it using React, React-Router for the links, CSS3, HTML5, JavaScript and JSON. The website is built upon React which handles the frontend UI, the CSS3 is used to style the UX and create cool effects like hover and animation. The HTML5 is the markup language which it is also built upon, the JavaScript is used for handling advanced effects like scroll animations and logic. Finally the JSON is where the pages with the health checklist and cards are created for each restaurant. In the future this is what you will update to allow the health inspectors to create reports!
Challenges we ran into
Some challenges I ran into were effects, I had to use Animate on Scroll (AOS) to create clean scroll animations. I had trouble with the grid gallery on the restaurant but I overcame it and learned a lot about it. I had to get a refresher on mapping over JSON to create cards, and React-Router params to load each restaurants page!
Accomplishments that we're proud of
I am very proud of the overall product I have accomplished. In just 24 hours, the UX/design of the website is pretty darn good. I first designed it quickly in Figma then built it. The use of JSON files to map to create cards and react-router params to load pages was a bit foreign so I am really happy with how it came out. The effects like the scroll animations using AOS and hover effects were really nice. The complicated layout that I had to use grid and other tools like flexbox was quite challenging but really happy that I overcame it.
What we learned
I learned a lot during the Sonoma hackathon. This includes: The astounding UX I did extremely quickly in Figma so I could build the entire website. My use mapping over a JSON file to create cards and all the information for the health checklist and gallery on the restaurant page was a real learning experience. My grid experience has grown because it was a completely foreign subject and I am glad I learned it.
What's next for Restaurant Inspector
Restaurant inspector has a lot to still improve on! I feel the UX/design was a bit rushed and could be made into something incredible. I need to create a screening process to get health specialists and then grant them admin access to create reports in an advanced dashboard. I feel the restaurant pages could have so much more on them like a bigger checklist with added items and even like featured certificates from each restaurant. Right now it is the entire franchise but it would be cool to feature each singular restaurant in a franchise.
Log in or sign up for Devpost to join the conversation.