animEats

Homepage of AnimEats website
Page where users can search and find other food recipes
Original Design of Website on Figma
Original Page per Character Design on Figma
Netlify
Domain.com
Tab Icon

Inspiration

Our inspiration was the best combination, anime and food! We wanted to create a website where it would unite anime and food lovers to cook recipes that their favorite characters enjoy eating!

What it does

This website allows users to choose their anime character, directing users to the anime character's favorite food recipe. If you already know your favorite anime character's food, you can use our search food feature where you can search any food item and/or ingredients and find various recipes to your liking!

How we built it

Tools/Frameworks Used:

VSCode
Repl.it
React.js
Figma
Netlify
Domain.com
Github
Recipe Search API from Edamam.com

Challenges we ran into

Frontend:

Problem: The 'npm start' command was not working on VSCode. Solution: We tried using React.js on Repl.it instead, and it worked.
Problem: The border and padding for images was off. Solution: We rearranged the layout of the website.
Problem: How to code the layout of the website from our Figma design. Solution: We researched how HTML/CSS works in React.js by using W3Schools and watching YouTube tutorials.

Backend:

Problem: We didn't know how to redirect Javascript webpages to HTML webpages. Attempted Solution: We tried creating a function that would redirect it.
Problem: We had issues connecting the Domain.com to our netlify. Attempted Solution: We have to wait 24 hours for the DNS to acknowledge the name.

Accomplishments that we're proud of

For frontend team, we're proud of our logo creation and the UI/UX design layout of the website. For backend team, we're proud of our working API feature to search for food recipes. We are also extremely proud of our tab icon.

What we learned

We learned how to use Figma, React.js, how to download extra React.js packages, how to synchronize changes in VSCode from Github, how to commit changes from Repl.it to Github, and how HTML/CSS and Javascript work together.

What's next for animEats

We would like it to connect our food finder function in order to limit resulting recipes to cater to our chosen anime characters. We would like our Domain.com name to cooperate with our React.js website for a more efficient result. We would also like to add more characters and adjust the UI/UX of the website, given more time.

Built With

domain.com
figma
github
netlify
react.js
replit
vsc

Submitted to

AthenaHacks 2023

Created by

I worked on the front-end with Allison. We used Figma to design our layout of the website. We used Repl.it to code out our website. It was our first time using React.js and we encountered many challenges along the way, but we overcame those challenges in the end. It was a lot of fun!

Tiffany Truong
Hi! I helped code the backend with Mohraiel and implemented the food recipe search feature that helps users find recipes of a food item or ingredient of their choice. I used the Recipe Search API from Edamam.com to access the food recipes and pictures. We encountered challenges on setting up the environment properly but I had a lot of fun working with my team!

Erika Ledesma
I worked on the front-end with Tiffany. We used Figma to design the layout of our website and used Repl.it to code the UI/UX. It was the first time I used Figma and React.js to create a project. We encountered challenges along the way, but we were able to overcome those challenges. I enjoyed my first hackathon with my friends!

Allison Ly
I worked on the back-end with Erika. My main role was to redirect the sites, customize the tab icon, cursor, and creating the domain site. I never used domain.com,netlify and react before so it was definitely a shock and a little overwhelming to get used to all of these at once but it was figured out eventually! installing packages to my terminal to allow react to work accordingly was also another challenge but I overcame those challenges with the help of my partners, mentors, and stack overflow haha!

Mohraiel Matta