Slug Club

Home page
Final Project "Add an Event" page
Events page
Website UI on Figma

Inspiration

-Our team knows that UCSC offers several enriching clubs. However, it can be difficult to find a club that's suited to a student's schedule and interests. Currently, there is no centralized forum for clubs to post about their meetings–for students, it is difficult to manage Instagram stories or Discord messages that may easily vanish. To help students learn more about what clubs are best for them, we decided to make an online forum where clubs can post their meeting information for the students to access.

What it does

-Our website has an add post functionality where club officers can post meeting locations, times, events, and event descriptions for students to view in an easily readable tile format. The posts are displayed on the homepage, where students can scroll and view the club meetings. Posts can also be deleted in case club members face any conflicts and meetings have to be cancelled.

How we built it

-Two of our members followed a tutorial on Geeksforgeeks online so our team could understand how the backend worked. Our other two team members created a UI on figma and used Lovable AI generative software to get some code. Our team members had to make lots of fixed to the AI generated code to get it to work.

Challenges we ran into

-We had difficulty connecting the backend and frontend because we hadn’t set up MongoDB properly at first. We got help from a mentor and had to download Docker properly for the databases on all of our member's laptops for our website to work properly.

Accomplishments that we're proud of

-For some of us, this was our first time working on a web app and using the MERN stack, so we’re proud of the progress we made during the short time frame we had. We also were able to utilize an AI tool called Lovable to translate our Figma prototype into actual HTML/CSS/JS, which greatly expedited our design process.

What we learned

-We learned how to use Docker to containerize a MongoDB image, debug connection failures by inspecting the Network tab, use the MERN stack to develop a web app, implement a Figma design into actual code, and most importantly, how to work with a team on GitHub– specifically how to clone, pull, push, and handle merge conflicts.

What's next for Slug Club Hub

-We would like to fix some bugs in our website, such as the effects of the delete button only being shown after hitting refresh and only being able to show up to 8 events at a time. -We would like to create a search page with a search query and a filter system so users can have an easier time finding the right type of club for them. -We want to allow admin to add images to our “Add an Event page” to make our website look better.