Matchify 🏆 - Your Ultimate Event Platform
Welcome to Matchify, a modern, responsive, and feature-rich landing page for a sport events platform. This project provides a sleek user interface for organizers and participants to connect, create, and compete.
✨ Website Link & Screenshot
➡️ Website Link (Click Here) 🚀
🌟 Features
Landing Page
📱 Fully Responsive Design: Looks stunning on all devices, from mobile phones to desktops.
🖱️ Interactive UI: Smooth scrolling, sticky navigation, and modal windows for login/signup.
🎨 Modern Aesthetics: Clean layout with a professional color scheme, Google Fonts, and custom styling.
🧩 Modular Sections: Well-organized sections including a hero, services, mission, team, contact form, and embedded YouTube tutorial.
✅ Client-Side Validation: Real-time feedback for email and password fields in signup/login forms.
Organizer Dashboard
🔐 Secure User Hub: A dedicated dashboard for logged-in organizers, displaying a personalized welcome message.
🏢 Organization Management: Easily view and update your organization's core details.
🗓️ Tournament Registration: A simple interface to post, customize, and publish new tournaments.
📊 Tournament Management: A comprehensive manager to oversee all ongoing and past tournaments.
Player Dashboard
👤 Player Hub: A personalized dashboard for players to manage their competitive journey.
🖼️ Profile Management: View your personal player profile.
🔍 Explore Events: A dedicated page to discover and browse tournaments posted by various organizers.
⚙️ Account Settings: Includes a modal to securely change your account password.
🔑 Secure Logout: Simple and secure one-click logout functionality for both user types.
Admin Dashboard
👑 Centralized Control: A top-level dashboard for site administrators.
👥 User Management Console: A comprehensive console to view and manage all users on the platform.
🤸 Player Console: A dedicated view to manage all participant/player accounts.
🏟️ Organizer Console: A dedicated view to manage all organizer accounts.
🔑 Secure Logout: Simple and secure one-click logout functionality across all dashboards.
🛠️ Tech Stack & Dependencies
This project is built with standard web technologies and relies on CDNs for its dependencies, making it lightweight and easy to set up.
| Technology | Icon | Purpose |
|---|---|---|
| HTML5 | 🌐 |
Core structure and content. |
| CSS3 | 🎨 |
Custom styling and animations. |
| Bootstrap v5.3.3 | 🅱️ |
Responsive layout, components, and grid system. |
| Bootstrap Icons v1.11.3 | ⭐ |
Professional icons used throughout the site. |
| jQuery v3.7.1 | 💲 |
DOM manipulation and initial validation logic. |
| AngularJS v1.8.3 | 🅰️ |
Powers the password change functionality in the player settings. |
| JavaScript (ES6) | 📜 |
Handles user sessions (localStorage) and logout functionality. |
| Google Fonts | ✒️ |
Used for the 'Poppins' typography. |
📂 Project Structure
The project has a very simple and intuitive file structure.
Matchify-Project
├── 📄 index.html
├── 📄 dash-admin.html
├── 📄 dash-organiser.html
├── 📄 dash-player.html
├── 📄 adminusers-console.html
├── 📄 adminparticipants-console.html
├── 📄 adminorganisers-console.html
├── 📄 org-details.html
├── 📄 post-tournament.html
├── 📄 tournament-manager.html
├── 📄 profile-page.html
├── 📄 tournament-finder.html
├── 📄 README.md
└── 📁 /pics/
🚀 Getting Started
No complex setup required! Since all dependencies are loaded via CDN, you can run this project locally with just a browser.
-
Clone the repository (or download the files):
git clone https://your-repository-url/matchify-project.git
-
Navigate to the project directory:
cd matchify-project -
Open
index.htmlin your favorite browser: Simply double-click theindex.htmlfile, or right-click and choose "Open with..." your browser.
That's it! The website should be up and running. 🎉
🔧 Customization Guide
It's easy to customize the content to fit your own project.
👤 Developer Info: To change the developer names, roles, or images, navigate to the Meet The Team section (id="developers") in index.html and edit the content within the .card elements.
🗺️ Map Location: To change the map, go to Google Maps, find your desired location, click "Share" -> "Embed a map", copy the src attribute from the iframe, and paste it into the <iframe> in the Get In Touch section (id="contact").
🎬 YouTube Tutorial: To change the tutorial video, go to your YouTube video, click "Share" -> "Embed", copy the src link, and paste it into the <iframe> in the How It Works section (id="tutorial").
✍️ Author & Guidance
🧑💻 Made by: Kavish Garg (Developer)
🧑🏫 Under the guidance of: Rajesh Bansal (Mentor)
Created with ❤️ in Bathinda, Punjab, India.
📜 License
This project is licensed under the MIT License. See the LICENSE file for more details.