My first self-guided coding project: Recipe Search Web App
Tags: react, webdev, project
Published: 2021-06-28 01:41:21

Finally, it's summer time! Now we can go back home to enjoy the fresh homecooked meals or try out popular dishes in any big city's top-rated restaurants. I don't know about you, but for me, at some point, I do miss Clurg's food. I heard lots of rumors, complaints about college food (esp from international students) before coming to the U.S., so I'm beyond grateful for my dining experience at Sewanee, for all the staff at Clurg who pulled their best efforts to diversify menu items. 

Now that I'm off the Domain, get to buy my own ingredients and cook my own food, I wonder if I can replicate any Clurg's food without having to recheck Chef Rick's email every time. Hence, I came up with an idea of building a website where we can search/filter for the food we miss at Clurg and get the recipe for that item. You can navigate the website at: https://sewanee-recipes.netlify.app/ 

## USING THE WEBSITE 

**Note: This is not a responsive web application so I encourage you to view it on Chrome laptop browser for best image quality.**

As you click into the recipes page, you can see several food displayed with each own category as the station it belongs to at Clurg (for example: Beef Pot Pie - Homeline, Fudge Pie - Dessert) and the link to the recipe I found online. 

![beef pot pie](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oapf81uhfmfyeqaeqyea.png) ![fudge pie](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6bmus5idco2tmdvko85.png)

If you want to search for specific food, type in the food's name on the search bar in lowercase. Sometimes you won't be able to find the food, either because I forgot to include it on the list (come on, it's like hundreds of them from Chef Rick's emails) or naming differences. In that case, you can use the filter if you remember which McClurg's station that food belongs to (e.g. Tofu scramble at Vegan line, Taco Pizza at Pizza Line) 

![rice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rm3xoqgbzbwuonnsr9cb.png)
![pizza](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qr60esrtxokamjiz0rr5.png)
 
This web app will definitely have some issues, could be with the contents or technical-related. I'd love to have your feedback on user experience sent at: [Feedback form](https://forms.gle/mcq5v8auNVYL1zs77) 

In the future, I envision implementing more interactive features for students and staff, such as giving reviews on certain food, log in to save your favourite recipes, Sewanee Dining Group posting event announcements, etc. While I'm brushing up on my technical skills to do so, you can play around with searching for recipes to try cooking this summer. Hope you have a blasting time jazzing up your culinary skills.

### NOW COMES THE TECHNICAL PARTS

[GitHub repo](https://github.com/ngan-cassie/recipe-app)
I developed this web app using React.js framework for front-end and Google Firestore database for back-end (storing recipe database). To automate the process of scraping food info from Google Spreadsheet and pushing to Firestore database, I used built-in Apps Script editor. Similar to any project, I certainly googled a lot and sought help from an incredibly supportive, talented friend (I truly appreciate you in case you're reading this!). Through this project, I was able to get a better grip on some React concepts (e.g. lifecycle component, redux - failed to implement unfortunately but will try again once the app has more traffic :D) as well as working with databases. 

As I mentioned, I will continue working on this project in the future with additional advanced features, potentially can be used for Sewanee Dining Program. I'm excited to equip myself with more technical knowledge in full stack development to actualize this plan. I know I sound super entrepreneurial right now and the path to get there is not without obstacles, but I believe I can power through with the right resources. If you're also interested in contributing to this project (doesn't have to be coding), feel free to reach me at nguyenh0@sewanee.edu ! 

That's all I got to say. Thanks for reading and have a good one!