Porag’s-Awesome-Leaderboard
Porag's-Awesome-Leaderboard
The Awesome-Leaderboard web project displays scores submitted by different players. It also allows you to submit your score. All data is preserved to the external Leaderboard API service.
</div>
# 📗 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)
# 📖 Porag's Awesome Leaderboard
This project **Awesome Leaderboard** is a project that demonstrates the use of **HTML & CSS and Javascript Moduler development**.
With External **API consumption**, it also demonstrates the proper use of **Async and Await** to send and receive **data**.
Built using **WEBPACK** following **GitFlow** it is very simple yet powerful project served by **WEBPACK DEV SERVER** . Along with dynamic modification of the DOM with Events including all the coding best practices.
## 🛠 Built With
### Tech Stack
Client
Server
- Local webpack dev server
- Optionally can be Deployed Using GitHub Pages
Database
### Key Features
- **Use of medium-fidelity wireframe attached below to create a UI.**
- **Developed UI:**
- **Use of callbacks and promises.**
- **Use of async and await.**
- **Use proper ES6 syntax and ES6 modules to write modular JavaScript.**
(back to top)
## 🚀 Live Demo
> Please follow the link for a live demo.
- [Porag's Awesome Leaderboard](https://porag-m06.github.io/Porag-s-Awesome-Leaderboard/dist/)
(back to top)
## 💻 Getting Started
To get a local copy up and running, follow these steps.
### Prerequisites
In order to run this project you need:
- Git.
- An IDE (e.g. VS Code)
- Browser to run.
### Setup
Clone this repository to your desired folder:
- Using Git Bash or any integrated terminal of you choice.
- Open with code editor (e.g. VS Code).
- Open the index.html file using any local server (e.g. live server extension in VS Code)
### Usage
To run the project, execute the following command:
- Open the index.html file on a local server on your browser.
### To add dependencies and run linter tests
Follow the following:
**************
Initial Step:
**************
- mkdir .github/workflows
- copy the **linters.yml** file to the directory created above.
- touch .gitignore if not created already and add **node_modules/** to it.
- initialize npm to create package.json file by running the command:
> $ npm i -y
(here i for install & -y for saying yes to all)
*************
For Webpack:
*************
- To install **Webpack and Webpack CLI**:
> $ npm install webpack webpack-cli --save-dev
- To optaionally install a JS library as an example (e.g. **Lodash**)
> $ npm install --save lodash (optional)
- To install the **HtmlWebpackPlugin** plugin.
> $ npm install --save-dev html-webpack-plugin
- To install **style-loader and css-loader**
> $ npm install --save-dev style-loader css-loader
- To install the **webpack-dev-server** as a dev dependency (to use live reloading)
> $ npm install --save-dev webpack-dev-server
- List of the commands to run the build (with all the alternatives).
To build and run with the webpack dev server:
> $ npm start
(Will be served at: http://localhost:8080/)
- To build only :
> $ npm run build
(and then may be served using a local server e. g. Live Server in VS Code)
- (Optional Alternatives)
> $ npm run webpack or, $ npm run webpack --mode production
> $ npx webpack
> $ npx webpack --mode production
> $ npx webpack --config webpack.config.js
************************
For Webhint (optional):
************************
- Run
> npm install --save-dev hint@7.x
- To fix validation errors run:
> npx hint .
**************
For Stylelint
**************
- Run
> npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
- Copy **.stylelintrc.json** to the root directory of your project.
- Run
> npx stylelint "**/*.{css,scss}"
on the root of your directory of your project.
- Fix linter errors.
*******
ESLint
*******
- Run
> npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
- Copy **.eslintrc.json** to the root directory of your project.
- Run
> npx eslint .
on the root of your directory of your project.
- Fix linter errors.
### Deployment
You can deploy this project using:
- GitHub Pages for the main branch. A deployed version can be found here:
https://...
(back to top)
## 👥 Author
> Developed by:
### Author
- GitHub: [@porag-m06](https://github.com/porag-m06)
- Twitter: [@twitterhandle](https://twitter.com/twitterhandle)
- LinkedIn: [LinkedIn](https://www.linkedin.com/in/muhammad-porag-nsu-cse/)
(back to top)
## 🔭 Future Features
- **Improve Aesthetics & Design**
(back to top)
## 🤝 Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/porag-m06/Porag-s-Awesome-Leaderboard/issues).
(back to top)
## ⭐️ Show your support
As a tech enthusiast, your support is always appreciated. If you like this project please do let me know with your support in any way you see fit.
(back to top)
## 🙏 Acknowledgments
I would like to thank [Microverse](https://github.com/microverseinc) for this project & project guidelines.
(back to top)
## ❓ FAQ
- **Can I fork this project?**
- Yes, feel free to fork and knock yourself out :) .
- **Can I share this project with others?**
- Yes, you can share this project for any educational purposes.
(back to top)
## 📝 License
This project is [MIT](/Porag-s-Awesome-Leaderboard/LICENSE) licensed.
(back to top)