Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abdussattar-70/leaderboard
It's a demo project for learning the usage of API and Git workflow it is a SPA that displays a list of players' names and scores from Leaderboard API and allows you to add name and score info to the list. All data is stored in the API.
https://github.com/abdussattar-70/leaderboard
api css3 github-actions gitworkflow html5 javascript webpack
Last synced: 19 days ago
JSON representation
It's a demo project for learning the usage of API and Git workflow it is a SPA that displays a list of players' names and scores from Leaderboard API and allows you to add name and score info to the list. All data is stored in the API.
- Host: GitHub
- URL: https://github.com/abdussattar-70/leaderboard
- Owner: AbdusSattar-70
- License: mit
- Created: 2023-03-12T18:25:17.000Z (over 1 year ago)
- Default Branch: dev
- Last Pushed: 2023-04-19T17:28:01.000Z (over 1 year ago)
- Last Synced: 2024-10-02T14:41:33.653Z (about 1 month ago)
- Topics: api, css3, github-actions, gitworkflow, html5, javascript, webpack
- Language: CSS
- Homepage: https://glittering-lily-6961e8.netlify.app/
- Size: 239 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Leaderboard
# 📗 Table of Contents
- [📖 About the Project](#about-project)
- [🛠 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](#triangular_flag_on_post-deployment)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [📝 License](#license)
This project is a Single Page Application (SPA) that interacts with a Leaderboard API to display a list of players' names and scores. Users can add new players' scores to the list, which is then stored in the API.
The project uses Webpack for bundling and optimizing code. Webpack allows you to combine all your JavaScript modules into a single file, reducing the number of HTTP requests required to load a web page. This results in a faster and more responsive web page for users.
The project is designed to provide a hands-on learning experience for those interested in learning about APIs, Git workflow, and Webpack. Through this project, users will learn how to fetch data from a remote server, manipulate the DOM to display the data, and send data back to the server to be stored. They will also learn how to use Git for version control, including creating and managing branches, committing changes, and merging them back into the main branch.
Overall, this project is a great way to gain practical experience in web development and gain valuable knowledge that can be applied to other projects in the future.
Client
This project only works client side right now.
- HTML
- CSS
- JS
- Webpack
- API
- **Allows add players**
- **Allows add score**
- **shows recent score by name**
- [Live Demo Link](https://glittering-lily-6961e8.netlify.app/)
To get a local copy up and running, follow these steps.
In order to run this project you need:
# It would be best if you had some familiarity with `HTML`, `CSS`, and `JS`.
- A Computer (MAC or PC)
- code editor (VSCode,Atom etc...)
- A browser (Chrome,Mozilla,Safari etc...)
- Version Control System (Git and Github)
Clone this repository to your desired folder:
``` bash
git clone https://github.com/AbdusSattar-70/Leaderboard.git
cd Leaderboard
```
Install this project with:
``` bash
npm install
```
## Usage
You can use it to store game data in a remote location and see when you want for fun!
To run tests, run the following command:
- To check Styelint error:-
``` bash
npx stylelint "\*_/_.{css,scss}"
```
- To check Eslint error:-
```bash
npx exlint .
```
- To check webhint error:-
```bash
npx hint .
```
You can deploy this project using:
```bash
npm run build
```
## 👤 Abdus Sattar
- GitHub: [AbdusSattar-70](https://github.com/AbdusSattar-70)
- Twitter: [Abdus Sattar](https://twitter.com/Abdus_Sattar70)
- LinkedIn: [Abdus Sattar](https://www.linkedin.com/in/abdus-sattar-a41a26215/)
- Implement the ability to delete data from the Leaderboard API.
- Implement PUT and PATCH requests to update existing data in the API.
- Improve the visual design of the application to create a more aesthetically pleasing and user-friendly experience.
- This could include the use of advanced CSS techniques, animations, and custom graphics to make the application look more luxurious and modern.
Everybody is welcome to suggest, changes,Contributions, issues, and feature request in this repo.
In order to do it, fork this repository, create a new branch and open a Pull Request from your branch.
Feel free to check the [issues page](../../issues/).
If you like this project, Please give me ⭐️ and you can use it following [MIT](./LICENSE) license.
Thanks ❤️ to all of my coding partners, team members, and specifically Microverse code reviewers to help me to figure issues out.
I would like to thank and appreciate who contributes this project.
This project is under [MIT](./LICENSE) licensed.