MVHS ClubConnect

• 

  login Sucessful

• 

  Analytics Section – Gives a quick snapshot of total clubs, events, upcoming events, and pending homework to help students stay organized

• 

  contact

• 

  Secure Login Page with Black & Gold Theme – Students can sign in to access their club dashboard."

• 

  Homework Page

• 

  "User Registration Page – Easily create a new account with first name, last name, email, and password."

• 

  Clubs Page – Explore all school clubs and easily add, edit, or delete club details.

• 

  create new school event by entering details like event name, date, time, and description, making it easy to keep the school community inform

• 

  "Home Page – Displays recently added clubs and upcoming school events, helping students quickly discover new opportunities and stay updated.

Inspiration

Many students at Monta Vista High School struggle to find clubs that fit their interests because information is scattered across emails, flyers, and posters. This often leads to missed opportunities, especially for new students.

I wanted to create a single, organized platform where students can easily discover, join, and manage clubs. My goal was to make the process intuitive, fast, and visually appealing, so that every student—whether a freshman or senior—can quickly find clubs that match their interests.

Seeing the challenges firsthand inspired me to combine frontend development, dynamic data handling, and responsive design to solve a real problem in my school community.

What it does

MVHS ClubConnect is a web application that helps Monta Vista High School students discover, join, and manage clubs easily. The app centralizes all club information into one platform, making it fast, organized, and student-friendly.

Key features include:

Signup & Login: Students can create accounts and securely log in.

Club Directory: Browse all clubs with details such as name, category, meeting times, location, and officers.

Add/Edit/Delete Clubs: Users can manage clubs dynamically through a simple form.

Search & Filter: Quickly find clubs by name, category, or meeting time.

Sort Clubs: Alphabetically or by meeting time to organize the list efficiently.

Responsive Design: Works seamlessly on both desktop and mobile devices

How we built it

We built MVHS ClubConnect using HTML, CSS, and JavaScript, focusing on creating a fast, dynamic, and user-friendly web app without a backend.

Key implementation details include:

Frontend Design:

Used a black & gold theme consistent across login, signup, and dashboard.

Designed a responsive layout that works seamlessly on both desktop and mobile devices.

Data Handling:

Stored user accounts and club information in localStorage, making data persistent across sessions.

Each user has their own club list, ensuring privacy and separation of data.

Dynamic Dashboard:

Students can add, edit, and delete clubs easily.

Implemented search, filter, and sort functionality in vanilla JavaScript.

Real-time updates ensure changes appear immediately without reloading the page.

Notifications & Feedback:

Integrated SweetAlert to give students immediate feedback when signing up, logging in, or managing clubs.

Challenges we ran into

Managing dynamic data for each user using only localStorage.

Implementing real-time search, filter, and sort in*JavaScript*.

Keeping the UI consistent across login/signup and dashboard.

Ensuring the app is responsive on both desktop and mobile.

Providing clear form validation and user feedback.

Accomplishments that we're proud of

->Built a fully functional, dynamic club management system entirely on the frontend.

->Created a consistent black & gold theme across login, signup, and dashboard.

-.>Implemented real-time** search, filter, and sort** features for clubs.

->Made the app responsive on both desktop and mobile devices.

->Enabled persistent user-specific data using localStorage without a backend.

What we learned

->How to manage dynamic data per user using localStorage.

->Advanced DOM manipulation for interactive lists and forms.

->Techniques for responsive design and consistent theming.

->How to implement search, filter, and sort efficiently in JavaScript.

->Importance of user-friendly validation and feedback with tools like SweetAlert.

What's next for MVHS ClubConnect

->Add user profiles so students can see which clubs they have joined.

->Implement club popularity tracking to highlight trending clubs.

->Add event reminders and notifications for upcoming club meetings.

->Improve search and filter with more advanced options (e.g., by officer or location).

->Potentially add backend integration for cross-device syncing and cloud storage.

->Enhance UI/UX with animations and better mobile-friendly interactions

Built With

• aos
• css
• google-font
• html
• javascript
• localstorage
• responsive
• sweetalert
• web