Hop & Play

Pillar Category

Entertainment

Inspiration

Our inspiration for Hop & Play came from moments when you and your friends are bored and can’t decide what to do.

What it does

We aim to create a fun and interactive website that suggests activities based on age group, group size, and activity type, featuring a playful hopping bunny mascot.

How we built it

This was our first website, built using React and Vite, and although we learned React basics in a workshop, this was the first time we applied it fully while teaching ourselves additional skills through YouTube tutorials. Each page is a separate React component with its own .css and .jsx file, and navigation is handled using React Router DOM. On the Activities Page, we use useState to store user selections and filter a dataset of different activities, and selected randomly. The Events Page shows a random event from a preset array to keep the code beginner-friendly, and the About Page includes animated bunnies that spawn floating hearts using CSS keyframe animations.

Challenges we ran into

Challenges included debugging activity filtering when no results matched, fixing routing issues, creating smooth, natural animations, and linking the files to work with the buttons. Another challenge that we faced was setting up a GitHub Repository because it was our first time using it. Also, one of our members had difficulty with Cursor as it stopped working properly.

Accomplishments that we're proud of

We're proud of creating our very first website and being able to learn new skills and languages.

What we learned

We learned how to make our very first website, applied what we learned in the React Workshop to our own project, learning JavaScript, CSS, and HTML through countless YouTube vids along the way, learned how to use GitHub, and made it functional after trial and error

What's next for Hop & Play

The next thing for Hop & Play is to expand the database for events as well as try to add a location-based feature to help people find events happening in their area, rather than just Long Beach.

Built With

Submitted to

Marina Hacks 5.0

Created by

I worked on the Activities page and learned how to create dropdown functions (asking for age, # of people, and type of activity) and creating a pool of options for the website to choose from when displaying the output catered to the user's choices. I encountered a mental block while trying to code for the "generate" button and learned how to overcome it by watching youtube tutorials. During the process of building this website, I helped out my teammates by testing the functions they coded on the website.

Vera Gan
I worked on both the backend and the frontend of the events page. This was my first time using React, javascript, CSS, and HTML. I tried to apply what I learned in the React workshop I attended before this, and I used the internet to find ways on how to use the code while teaching myself along the way.

beller3y3s Reyes
I mainly worked front-end and helping with the event page and have it link with the suggest events. It was my first Hackathon and I applied what I learned from the React workshop and through countless YouTube vides. I contributed most to home/events page, but also helped on other parts with the rest of the team to fix any issues.

Tiana Tran
I mainly worked on creating mockups and front-end which was my first time applying what I learned in the React workshop to an actual project so it was kind of confusing at first (took like an hour to set up but eventually got the hang of it!) Contributed most to home/events page, but also touched on the other parts with the rest of the team to fix issues we were having.

kayla lu

Updates

Tiana Tran started this project — Oct 26, 2025 01:04 PM EDT

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.