SlugLove

Inspiration

We wanted to combat loneliness some people experience during Valentine's day by creating this interactive website that allows UCSC students to meet new people and to find their Valentine this holiday.

What it does

This dynamic website contains 4 sections such as a live chat room to connect with other people, a virtual Valentine's day gram maker to send to your secret crush, a sticker inventory that stores stickers you collect from sending grams, and a LoveStop website that allows users to walk around campus to collect rare stickers which is used to add onto the grams. Additionally, this website contains a write a review feature, contact feature, and a light or dark mode theme.

How we built it

The dynamic UI of the website was built from the Gatsby Cara template on Github. We modified the template by adding various shapes and changing the functions of each section. We used HTML, CSS, JavaScript, React, and TypeScript to create the design and flow of the website. The custom domain of our website was made using Netlify where every git commit triggered a deploy and update for the website. The moving shapes in the background of the main page was made with HTML, CSS, Scalable Vector Graphics (SVG), and parallax effects.The ombre and gradient backgrounds of the website were made from HTML and CSS. The live chat room was made using HTML, CSS, JavaScript, and React. Additionally, Firebase was used to create the custom domain of the live chat room. Construct3 was used to create the Valentine's day gram maker from creating event sheets and implementing a drag and drop Sandbox style game.

Challenges we ran into

One of the biggest challenges we ran into was being able to complete our project with only 2/3 teammates contributing to the team within this short timeframe of 2 days. Although we had less teammates than most groups, we were able to reach our goals at the end of the hackathon through good time management, asking mentors for help, and communicating our ideas effectively with each other.

Accomplishments that we're proud of

We are proud of creating this unique website that can help lighten someone's mood and combat the feeling of loneliness. Some technical skills we are proud of are being able to learn new languages such as HTML, CSS, React, TypeScript, SVGs, etc. within this short period of time. Additionally, we are proud to attend our first hackathon and also to take advantage of this event to exercise our coding and debugging skills.

What we learned

We learned how to effectively communicate our ideas and collaborate with each other after attending this hackathon. Additionally we learned professional development skills such as networking and brainstorming ideas.

What's next for SlugLove

SlugLove will release the new feature called LoveStops. This feature uses AR that places LoveStops at different locations on campus for students to explore and collect stickers from various places that can be sent on the virtual grams.

Built With

• construct3
• css
• html
• javascript
• node.js
• parallax
• react
• typescript
• ui