Our team noticed that there wasn't a concise place where you could find information about the different clubs held at our school. The only way you would really hear about clubs was if you read the list on the school website, heard about them through announcements or heard about them from your peers and teachers. Even then, you wouldn't really know a whole lot about that particular club, you had to go seek out that information. We decided to make a system that would allow students to easily access club information. Going a step further, we decided to add a featured section where we would display upcoming events for different clubs. That way, students are exposed to events that might attract their attention and lead them to join that particular club.

What it does

This website provides a very easy way of viewing all the clubs available at and their information, so you don’t have to miss any. It also allows you to look for specific clubs via name or tags.

How we built it

The club finder system operates with HTML, CSS, and javascript. Though we had to focus our time on the more complicated and time-consuming part of the project, the search engine. The engine runs on JavaScript, CSS, and HTML. It uses CSS and HTML to display a table that updates based on JavaScript code. The JavaScript code takes in user input and compares it to the clubs’ names and categories. The clubs’ names and categories are stored in an array of a custom class called “Club”. This class has 4 properties which include name, type, imageUrl, and clubPageUrl. Prior to comparing, the strings are converted to all lowercase characters. This allows for less specified searching as “Robotics” will appear even though “robotics' ' is inputted. The strings are compared using the Java script’s substring function. After filtering the clubs based on the user’s input, a function called RefreshSearch() is called. This function is an algorithm that generates the HTML code of a table that includes all of the items in the filtered list. This function then continues to apply this HTML code to the search.html page. The clubs will also always appear in alphabetical order. This was made using the Java Script sorting function.

Challenges we ran into

Managing our time was a huge aspect that we had to deal with, as the workload varied drastically between members of our team. Douglas, our primary coder, had a massive workload that the rest of the team couldn’t reduce or aid in any way, as too many people working on code would be extremely messy and the majority of the team didn’t have as much expertise in coding as Douglas did. This led to the first day of the hackathon being extremely busy for Douglas while the rest of the team aided him as much as they could, which wasn’t a whole lot.

As we all know, life is busy and complicated, not everything we planned out would go smoothly. With our hackathon experience, we had to deal with team members having interruptions in their day as they had other events, matters, and just their personal life to deal with. Not everyone could be online and working on the hackathon, so we had to manage with an incomplete team for the majority of the time.

While we didn’t have trouble with communication between team members, there was a challenge with programming communication and communication regarding the final video. Both our primary coders worked on making our website, yet they had different methods of programming. This made it exceedingly difficult for both of them to work together, as they had trouble reading and fixing each other’s code. Our team decided to have one editor for the final video, which caused some complications. Since we had one editor, they had full creative control over the video, which differed slightly from what the rest of the group wanted. This caused some setbacks with the final video, as we had to stop and communicate our ideas to come to an agreement that the whole group supported.

Accomplishments that we're proud of

Despite the many challenges we faced during the hackathon, we were able to compete and create a final project that we’re proud of. Since this was our first Hackathon, we had no idea what to expect, so we gave our all. Everyone worked diligently and collectively to bring our idea into reality. One aspect of our project that we’re really proud of is the search engine feature that we were able to create as it took most of our time.

What we learned

We learned important skills that can be applied both in school and outside of school. We became more proficient with our time management together as a team. We also learned how websites operate, thus learning HTML, CSS, and javascript. Though we think the most important thing we learned is that it is not possible to make everything we wanted to with the time provided.

What's next for Club Finder System

We hope to refine our project more by adding a way to request the creation of a club. This would likely be just a small elevator pitch for a club and then you will be able to go into further detail later with a teacher. The search engine could also be improved with the help of filters. These filters would be of cost, date and time, and location.

Built With

Share this project: