-
-
The avatar building page. Here the user can build an avatar and customize the title of the book using their name.
-
When the user clicks on the cheese and "gets the cheese touch" the experience begins and the theme song starts playing.
-
Roasts from the chatbot with the avatar that the user designed in the corner
-
A log in/sign up page.
Inspiration
I grew up loving the Diary of a Wimpy Kid series, fascinated by its humor and relatable storytelling. One aspect that I always enjoyed about the series was that main character Greg Heffley is always getting "roasted". He always finds himself in awkward or unpleasant situations which were most of the time his fault! Therefore I created a bot that can make fun of the users awkward or unpleasant situations. On a deeper level, it allows users to have a safe space to journal where they can laugh and joke about their experiences and embrace imperfections!
What it does
The Wimpy Kid Roaster Journal lets users create personalized avatars and write diary entries. A chatbot then humorously “roasts” the user’s diary input, making the experience funny and engaging.
How we built it
I used React, CSS, and Adobe Illustrator for most of the assets.
Challenges we ran into
One of the challenges I encountered was designing the avatar building experience. I had to design each element (hair and body) in adobe illustrator and save them as svgs. One other challenge I encountered was integrating the avatar into JournalPage.
Accomplishments that we're proud of
I am proud to have successfully implemented a playful, animated intro page that immediately sets a fun and nostalgic tone for users that features a large influence of my childhood!
What we learned
Throughout this project, I learned how to effectively combine React hooks with native audio playback APIs to create dynamic sound experiences. I discovered techniques for removing default browser button styles and replacing them with custom images without sacrificing usability. I gained experience managing CSS transitions and tooltips to create engaging UI effects. The project showed the importance of maintaining accessibility when modifying native controls. Most importantly, I learned how to create playful and inviting user interfaces using just React and CSS!
What's next for Wimpy Kid Roaster Journal
I want to expand avatar customization options, possibly with drag-and-drop functionality and various style choices. Implementing diary entry saving and retrieval using local storage or a backend system is another priority to improve user experience. I also aim to enhance the page flip animation to make the diary feel even more authentic.
Log in or sign up for Devpost to join the conversation.