UCSC has various charity/donation initiatives which aim to give back to the community and the university itself and we were inspired by all the different opportunities to contribute.

What it does

Our web app, Slug Charity, is threefold. Slug Charity consolidates many of the UCSC giving back initiatives into one place. Our web app includes a mini YouTube clone which returns videos that are geared towards using tech to create as well as give back to charity initiatives. We also have a chat app in which users can discuss charity/giving back related topics.

How I built it

We used React and Bootstrap elements to render our web app. We utilized the React card component. We used Cloudinary to host our images on a web server and Heroku to deploy the web app. We also utilized Chatkit to render the chat portion of our app.

Challenges I ran into

We had a hard time figuring out what we wanted to build. We were inspired by the Tech Cares category and finally reached a decision as to what we will make - a SlugCharity web app which raises awareness of opportunities to give back with UCSC as well as the community. However, we didn't end up deciding upon this until the day before the hackathon which is why it could definitely be more polished. We also had trouble pushing and merging as Git was slightly confusing at times. Due to this, we consolidated the project in one person's repo. Many of us were also new to React so there was definitely a learning curve there. Also, just a disclaimer, while following a tutorial along with writing my own code, we accidentally forgot to modify the component folder names in "src" which is why the web address for the tabs might have /"name that doesn't match the corresponding tab". This is definitely something to watch out for next time! If we had more time, we would've also embellished the UI; it's a bit plain/simple but we thought it was easy to navigate.

Accomplishments that I'm proud of

We are proud of our colorful UI aesthetic as they match the UCSC colors. We are also proud of creating the YouTube player which returns videos specifically related to tech+charity. We used open source code for this but made our own changes. We are also proud of implementing the React card components as it makes for cleaner UI/UX. We also generated our own YouTube API key from the Google Developers Console and successfully implemented that in our project.

What I learned

We learned that UCSC has many charity initiatives that go beyond just Giving Day. For instance, the UCSC Sustainability Department has its own projects ranging from helping out with the Rachel Carson Garden to the Thimann Water Fountains. We also learned how to code in React and deploy our app on Heroku.

What's next for SlugCharity

We want SlugCharity to be available for all UCSC students to use. Of course, the UCSC website itself is great but we want students to find all the charity/donation opportunities within one place. There are so many projects students are not aware of and this web app aims to increase awareness of that! We also want to integrate some sort of backend database functionality as well as implement badges and/or a kind of reward system that motivates students to explore our web app further. Another element we hope to add is SEO analytics; we plan to use a GCP product like Big Data Analytics to keep track of visitors and engagement. Finally, we hope to release this app to all UCSC students once polished!

Built With

Share this project: