Recipe Cards Collection - Powered by MongoDB, Responsively Designed

Roxioxx Studios — Sun, 09 Jan 2022 05:24:13 +0000

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: https://roxioxx.github.io/mongoDB_hackathon/
Github Repo: https://github.com/roxioxx/mongoDB_hackathon

roxioxx / mongoDB_hackathon

Keep the recipe cards on your phone, on the desktop, wherever.

Recipe Cards Collection

If I've learned anything is that you can make the content to a static page live and dynamic. You just have to be smart about it. Over the next few weeks, I'll be updating the database to have more and more recipes.

Apps Used

HTML, CSS, JS, MongoDB Atlas, Mongo Realms

Resources

Following this documentation: https://docs.mongodb.com/realm/web/quickstart/

And the rest of it on: https://docs.mongodb.com/realm/web/mongodb/

Connection Testing Proof of Concept

It works fine on CodePen now: https://codepen.io/roxioxx/pen/wvrxZxO

I have never done this before and if I need to do it again, I should look it up.

View on GitHub

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).

DEV Community: Roxioxx Studios