DEV Community

Cover image for Recipe Cards Collection - Powered by MongoDB, Responsively Designed
Roxioxx Studios
Roxioxx Studios

Posted on

Recipe Cards Collection - Powered by MongoDB, Responsively Designed

Overview of My Submission

I'm a busy person who likes to save money by cooking at home. The thing I hate the most is when I want to start cooking, but I can't remember the link and I need to spend time searching. I used to print out recipes, but my mom threw them out. I saved things to the tabs on my phone, but my phone reset and I lost those links, too. Basically, with MongoDB and some HTML, CSS, and JS, I managed to create a mobile recipe card system.

I used MongoDB Atlas as my database and Realms as my way to connect to that database easily. Professionally, I'm a UX/UI Designer. I don't know how to use fancy developer tools and this was my first time making something with a backend connection. I spent since the beginning of this hackathon just learning MongoDB and how to use it with a static website.

Submission Category:

Choose Your Own Adventure

Link to Code

Live Demo:
Github Repo:

Additional Resources / Info

Acceptance Criteria

  • Had to be responsive. If I'm on my phone, the text has to be large enough for me to read without needing to zoom. However, I need to share this with my sister in college, and she wants to read it on her laptop.
  • Needs to have links to the source material.
  • Ingredients are the most important thing and have to be listed in a certain order.

Final Notes

I am so happy to have participated in my first hackathon. I learned so much. I never knew just how difficult it is to deploy a page with dynamic content (like, HOLY COW). I've gained more respect for my developer colleagues. For the future, I know I want to use MongoDB more and keep growing. I hope you like this super simple project.

[Reminder]: # (Submissions are due on January 13th, 2022 @ 11:59 PM PT/2 AM ET on January 14th, 2022/6 AM UTC on January 14th, 2022).

Top comments (0)