Recipe Lookup

Inspiration

I always struggle to find a good and healthy meals for myself because either the existing platform is lacking in some way, some doesn't have nutrition information, some doesn't have detailed instruction, so I decided to build one myself!

What it does

Users can search for recipes and sort it by calories, rating, etc. It also allows users to share the recipe to their friends, or save it to browser's local storage. Users can also add recipes to the planner to calculate total calories, fat, etc.

How I built it

I use Next.js, a React framework to build the website, but with limited amount of time, I decided to use an available UI library, I choose NextUI because it looks modern and minimal, and lastly Tailwind CSS, which makes developing website so much convenient.

Challenges I ran into

One of the most challenging thing is time management, because of school and bedtime, I only have 1-2 hours per day to code, which makes this project really hard to complete. Luckily, I was able to convince my parents to stay up past midnight the day before the dateline, if not, I wouldn't be able to finish this project in time. Another challenge is working with data, I find it really hard to find a perfect dataset, but eventually I managed to find one on Kaggle (Click here to view), even though, there are a lot of incomplete data which I need to revalidate. I'm aware that revalidating 5,000 recipes are not easy, which leads me to coding an extra program to do that task, which saved me a ton of time.

Accomplishments that I'm proud of

To be honest, I'm really proud of local storage, which is a new thing for me, I was planning to use MongoDB as a database, but that would also means that I have to code a authentication system, which I do not have enough time to do so, so I'm pretty proud of myself for doing that.

What we learned

As I mentioned earlier, I learned about using local storage and working with a lot of data, I also learnt that time management and project planning is very important, I should start doing that in other projects as well!

What's next for Recipe Lookup

And yes, the auth system and database obiviously, I don't expect users to use the same device or browser every single time when they use the website, so cloud storage(database) is a way to solve that. Also a UI addition, I feels like there are something missing, but there isn't enough time for me to add those little details, but I'll surely do so later!

Built With

• cloudflare
• json
• kaggle
• next.js
• tailwindcss
• typescript
• vercel