HackStack

Project Info

Slug Club

Devpost

This project did not submit a demo video on Devpost.

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 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

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.

Analysis

Compare with all teams

View

Metric

Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.

Technology

Found in codeClaimed only
  • CSSIn code
  • ExpressIn code
  • HTMLIn code
  • JavaScriptIn code
  • MongoDBIn code
  • ReactIn code
  • Tailwind CSSIn code
  • TypeScriptIn code
  • DockerClaimed
  • Node.jsClaimed

8 of 10 appear in the indexed code. 2 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.

AI coding agents

No AI coding agent signals were found in this repository.

Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.

Codebase size

Source size

31 KB

Source files

30

Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.

0 stars