Photo by samsommer on Unsplash
Why Recipe Keeper?
I love to cook and bake bread. One of the problems I face every time I want to make something new is finding recipes. Usually low quality, with a brick of text, ads, and a lot of garbage, only to make a simple recipe.
Hashnode's Hackaton made me able to materialize this dream.
I wanted people to share and gather recipes in a similar layout and comfort. That way, they don't suffer finding the ingredients or instructions.
Technology Stack
Creating this app wasn't easy, a month of hard work. There's a ton of possibilities to expand the idea further. The technology I choose helped with an easy, fast development.
Next.js + TypeScript
My first framework to learn was React. Next.js takes React to the literal **next level.** Super quick to set up, an astonishing and easy folder routing, and a massive community.
TypeScript worked flawlessly. It helped with a lot of the type errors you encounter in normal JavaScript development. There's no real reason to stick to Vanilla JavaScript when TypeScript makes development so easy and fast.
TailwindCSS
Tailwind is a pleasure to use. One of the best *(if not the best)* CSS frameworks out there. The productivity of building applications and reusable pieces with Tailwind is massive. No external files, CSS-in-JS with utility classes are everything you need.
The development process went with no problems, and thanks to their new JIT mode allows us to create even more flexible interfaces.
Supabase
The backend structure works on Supabase, a solution for the backend as a service. Their SDK is fantastic. They use a PostgreSQL database that allows one to build almost anything. Fast response time and unlimited API calls.
Auth0
As a requirement for the Hackaton, Auth0 secures our users and their information. It's fast to set up and allows multiple services like Google or Github for authentication.
Working with Auth0 was a no-brainer. I have to say they perfectly manage users. Combine with Next.js API routes, you only need to set up one file, and your Authentication system is complete, hands down fantastic service.
Hosted and Deployed on Vercel
Vercel has been my only deployment platform in 2021. Just the best platform with the best community.
Challenges and Features
As my first big project, it was a little problematic when I started. Abstracting everything was difficult, and I had to refactor the whole codebase after one week.
The most challenging part was, without a doubt, uploading and editing recipes. New concepts I had never touched before, but I learned a lot from this experience. I can confidently say that this is my best project to date.
Gluing together every piece of the application was smooth. There weren't a lot of problems. I focused on the design and user experience. It is easy and understandable what you could or couldn't do.
I like to think I take the extra mile and create a minimal brand for the app. A landing page, logos, and some illustrations put the essence of the app to shine. Everything is concise and shines together.
Thanks to those who tested the app before this post. Thanks to their feedback, I worked into those extra details to make the app better.
Full List Of Features
- Create, edit and delete recipes
- Discover other's recipes
- Search by name, and filter by categories of recipes
- Bookmark recipes so you can access them later
- Create shopping lists for your recipes
Live version
Check the live version following the link:
Development
If you are curious about the code, please refer to the Github repo.
As an open-source project, if you want to add something, feel free to do it. I gladly take any feedback on the codebase.
Thank you!
Thank you for making it this far. This hackathon was an adventure for me. I decided to focus all August on the design and coding of the app, and I can say it was worth it.
I learned a lot, and know that this is a job I can see myself doing every day.