Girl Dinner

Inspiration

You may be familiar with the concept of a "girl dinner," which is the concept of grabbing a quick snack for a meal. Oftentimes these snacks lack nutrition and are very basic meals. Our website aims to encourage women who are struggling to put together a full meal to learn new recipes based off of what is already in their fridge and pantry, so they can whip up something quick.

What it does

The user types in ingredients to filter available recipes by what they have. Our recipe database is pulled from the MealDB API. The user can click on a recipe to expand it and see the full list of ingredients and instructions.

How we built it

We built this by using Node.js, React Router, and using the MealDB API database. We used this database to pull recipes from it into our website. We used typescript files to store all the recipes, and .tsx files for creating the cards and filters for the ingredients. We also have a .tsx file for the Recipe page, where it goes further into the instructions for each recipe. We hosted this site locally, built on the Create React App. We used npm start to actually start up our website, and hosted it on local port 3000. Each recipe has an ID, which is connected to the card and recipe page. Overall, we used a lot of new tools and used the help of AI generative software to learn more about web development and API databases.

Challenges we ran into

We originally started by designing our website in Figma, thinking we could directly use it to build a functional site. However, we quickly learned that while Figma is great for design, it doesn’t translate directly into working frontend code, especially when trying to connect backend logic and APIs. We also realized that we needed to use Node.js to properly run and launch the website. Ultimately, the code generated from Figma served more as a visual template rather than something we could directly plug into our project, which required us to rebuild the design in Visual Studio Code with the help of Copilot.

Accomplishments that we're proud of

We are a team of ECE majors that have very minimal experience with web development, and we are proud that we were able to develop a working website!

What we learned

That CSS is what makes HTML pretty... We didn't know what CSS, JS, and HTML really were until working on this.

What's next for Girl Dinner

Adding custom recipes option, adding a tool that highlights what ingredients are still needed to buy, creating a mobile app, and hosting the website so our friends and peers can enjoy girl dinner!

Built With

• api
• css
• html
• mealdb
• node.js
• react
• tsx
• typescript