Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/geekelo/leaderboard
The "Leaderboard Project" is a web application designed to showcase and track the scores or rankings of users in a particular activity or game. It provides a visually appealing and interactive leaderboard where users can view and compare their performance with others.
https://github.com/geekelo/leaderboard
css rest-api webpack
Last synced: about 1 month ago
JSON representation
The "Leaderboard Project" is a web application designed to showcase and track the scores or rankings of users in a particular activity or game. It provides a visually appealing and interactive leaderboard where users can view and compare their performance with others.
- Host: GitHub
- URL: https://github.com/geekelo/leaderboard
- Owner: geekelo
- License: mit
- Created: 2023-06-28T11:03:21.000Z (over 1 year ago)
- Default Branch: development
- Last Pushed: 2023-12-23T18:28:46.000Z (11 months ago)
- Last Synced: 2024-10-06T03:48:08.714Z (about 1 month ago)
- Topics: css, rest-api, webpack
- Language: JavaScript
- Homepage:
- Size: 645 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
LEADERBOARD WEBAPP
# 📗 Table of Contents
- [📗 Table of Contents](#-table-of-contents)
- [📖 LeaderBoard WebApp ](#-leaderboard-webapp-)
- [🛠 Built With ](#-built-with-)
- [Tech Stack ](#tech-stack-)
- [Key Features ](#key-features-)
- [🚀 Live Demo ](#-live-demo-)
- [💻 Getting Started ](#-getting-started-)
- [Setup ](#setup-)
- [Prerequisites ](#prerequisites-)
- [Install ](#install-)
- [Usage ](#usage-)
- [Run Tests ](#run-tests-)
- [Deployment ](#deployment-)
- [👥 Authors ](#-authors-)
- [🤝 Contributing ](#-contributing-)
- [Future Features ](#future-features-)
- [⭐️ Show your support ](#️-show-your-support-)
- [🙏 Acknowledgments ](#-acknowledgments-)
- [📝 License ](#-license-)
**The LeaderBoard WebApp** The Leaderboard System is a web application that provides a platform for tracking and displaying user scores or rankings in various activities or competitions. It allows users to submit their scores and view the leaderboard to see how they compare to others.
Head to the LIVE DEMO SECTION for Live links and presentations
ES6
HTML
CSS
JavaScript
- **User Registration:** Users can create accounts or log in using their existing credentials to participate in the leaderboard system.
- **Score Submission:** Users can submit their scores for different activities or challenges through a user-friendly interface. The system securely stores and associates the submitted scores with the respective user accounts.
- **Leaderboard Display:** The application generates a leaderboard that ranks users based on their scores. It provides an intuitive and visually appealing display that allows users to easily view the top performers and their scores.
> View the live demo of this project by clicking the text below.
- [See Live Demo](https://geekelo.github.io/leaderboard/dist/)
To get a local copy up and running, follow these steps.
> Clone the repository
```
git clone https://github.com/geekelo/leaderboard.git
```
> And you are ready to begin your project
### Setup
This project contains
An HTML FILE (free to edit) - file that contains html codes to give structure to the main webpage
A CSS FILE (free to edit) - file that contains css codes to style the webpage
A GIT IGNORE FILE (free to edit) - to hide personal or private files
HTML/CSS LINTER FILES (should not edit) - Do not make changes
A JAVASCRIPT FILE (free to edit) - that handles functionalities and dynamic HTML
### Prerequisites
> You should have Node and Git Installed
> You should have basic knowledge on HTML / CSS / JavaScript
> You should have a code editor
> Download install [VSCODE](https://code.visualstudio.com/) and [Git](https://git-scm.com/)
> To install linters, execute the following commands:
```
Initialize npm | ``` npminit -y ```
HTML | ``` npm install --save-dev [email protected] ```
CSS | ```npm install --save-dev [email protected] [email protected] [email protected] [email protected] ```
```
### Usage
To run the linters, execute the following command and fix linter errors:
```
HTML | ``` npx hint . ```
CSS | ```npx stylelint "**/*.{css,scss}" ```
If you get a flood of errors keep in mind that linters guide you in writing a clean code!
```
### Run Tests
You can run this program on your browser
You can deploy this project using the following procedure:
- Pick the right hosting provider.
- Choose the tool and method to upload your website.
- Upload files to your website.
- Move the website files to the main root folder.
- Import your database.
- Check if your website works worldwide.
👤 **Eloghene Otiede**
- GitHub: [@geekelo](https://github.com/geekelo)
- Twitter: [@Geekelo_xyz](https://twitter.com/Geekelo_xyz)
- LinkedIn: [LinkedIn](https://linkedin.com/in/eloghene-otiede)
You can offer Contributions, submit an [issue](../../issues/), and make a feature request.
- **Filtering and Sorting:** Users can customize the leaderboard by applying filters or sorting options to view specific categories, date ranges, or other relevant criteria. This feature enhances the user experience by providing flexibility in exploring the leaderboard.
- **Real-time Updates:** The leaderboard dynamically updates as new scores are submitted, ensuring that users always have access to the latest rankings and results.
- **User Profiles:** Users can create and personalize their profiles by adding avatars, usernames, and other optional information. This adds a social element to the leaderboard system, enabling users to connect with each other and compare their achievements.
- **Security and Authentication:** The application implements secure authentication mechanisms to protect user data and ensure that only authorized users can access and submit scores. It adheres to industry-standard security practices to maintain the integrity and confidentiality of user information.
- **Admin Dashboard:** An administrative dashboard provides privileged access to authorized administrators, allowing them to manage user accounts, review and moderate scores, and perform other administrative tasks to maintain the integrity and fairness of the leaderboard system.
> Please give a ⭐️ to support this project
> I would like to thank Microverse for inspiring this project
> Fonts: [Google Fonts](https://fonts.google.com/)
This project is [MIT](./LICENSE) licensed.