Buttercup Corner

Inspiration

We first came up with the idea to have a website that enabled users to build their own avatars from certain body parts. This then transitioned into a food-themed avatar idea after we began brainstorming and decided to choose different cute food items as the base.

What it does

Our website allows the user to select a body, eye style, and mouth style. All of these selections will be outputted to the bottom of the screen, where the user can view their new food friend!

How we built it

To start, we created a GitHub repo implementing React. To better understand how we could incorporate React into our project, we attended the Peraton React workshop where we learned more about all the ways that React can benefit our project. We then began coding in TypeScript, using CSS components for design, creating the homepage and other pages in our single-page website design.

Challenges we ran into

At the very beginning of the project, many of our team members did not have React installed or set up. This took a long time for us to resolve since it was the first time many of us had worked with React. Another challenge was keeping our code up to date between our members. We occasionally ran into merge conflicts where two members had edited the same file. The biggest challenge we faced was understanding the syntax and learning the general structure of typescript and CSS.

Accomplishments that we're proud of

We are very proud of our design implementation and concept, since it felt very cohesive throughout all the website pages. We are also very proud of our ability to learn and implement the basics of TypeScript, and have it output in a complex way onto our website.

What we learned

One thing very important we learned about design is the importance of pre-planning a project before jumping into the code. We found that our extensive pre-planning, which took place Friday night, enabled us to visualize and better structure and even edit our greater concepts.

What's next for Buttercup Corner

Another avenue to take our project we had brainstormed during planning involved enabling the users to fill out a questionnare, which would then translate into their own unique avatar. The questionnare would be designed to be somewhat comical, with three different output options based on the user's preferences (cook, burn, or roast).