Present Pop

A drop of surprise 🙃

Comment

Inspiration

Since it's the holiday season, we wanted to create a website that lets people open presents.

What it does

Visitors can open presents by clicking the giftbox icon. The site will then randomly redirect them to a present (some of which plays festive music or leads the viewer to other fun links).

How We built it

The website was built using React.js and CSS. The icons were made using Paint Tool SAI.

Challenges We ran into

Although both of us have learned web development languages, we have never personally created a website from the ground up, so we had to work through designing the site and implementing it.

Accomplishments that We're proud of

We spent a lot of time on making the animations look clean, getting the dark and light mode working, and displaying our instructions pop up properly. The music and snow animations were also fun to tackle; both worked out in the end and are a pretty cool part of our site.

What We learned

We learned how to create React websites, route using React router, play music on a button click, toggle dark and light modes, implement a modal in React, animate icons, buttons, and components, position items in CSS, use transitions, and use git efficiently.

What's next for Present Pop

Looking ahead, we want to allow users to sign in, save presents that they like, and view their list of presents. We also plan on adding more presents and letting users share presents with their friends.

Built With

  • css
  • git
  • github
  • google-fonts
  • howler
  • paint-tool-sai
  • painttoolsai
  • react
  • react-dom
  • react-modal
  • react-redux
  • react-router
  • react-transition-group
  • reactdom
  • reactmodal
  • reactredux
  • reacttransitiongroup
  • redux
  • vercel
Share this project:

Updates