The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.

In this project, I will build a simple leaderboard dynamic page. The app will be styled according to the specifications listed later in this lesson. This simple web page will be built using webpack and served by a webpack dev server.

• HTML
• Basic CSS
• JavaScript and ES6 syntax & modules
• Use callbacks and promises.
• Webpack
• Linters (Lighthouse, Webhint, Stylelint, Eslint)
• Git/GitHub work-flow

Live Demo Link

You will be building the leaderboard website during the whole week. Here is the list of projects that will guide you through the steps described above. You will find details about each of the milestone requirements in the upcoming program activities.

• Project 1: basic page structure.
  • IMPORTANT NOTE This is the first time you will use Gitflow. Keep that in mind!
  • Create an npm project with webpack. (If you need a refresher, check the previous project or webpack exercise).
  • Write plain HTML markup with minimum styling (just to make the layout), because you will implement styles in the following steps. Use the above wireframe as a guide.
• Project 2: send and receive data from API.
  • Read the Leaderboard API documentation to learn how to use this API.
  • Create a new game with the name of your choice by using the API.
  • Implement the "Refresh" button (receiving data from the API and parsing the JSON).
  • Implement the form "Submit" button (sending data to the API).
  • Use async and await JavaScript features to consume the API.
  • No styling is required.
• Project 3: final touches.

To get a local copy up and running follow these simple example steps.

• Open terminal
• Clone this project by the command:

git clone [email protected]:khitermedachraf/Leaderboard.git

• Then go to the main folder using the next command:

cd Leaderboard.git

• Finally, run diplay the index.html file in your local browser, or also, you can use Live Server in Visual Studio Code.

To get a local copy up and running follow these simple example steps.

• A web browser like Google Chrome
• IDE to edit and run the code (We use Visual Studio Code 🔥).
• Git to versionning your work.

You can check if Git is installed by running the following command in the terminal.

git --version

Likewise for Node.js and npm for package installation.

node --version && npm --version

npm install --save-dev [email protected]

npm install --save-dev [email protected] [email protected] [email protected] [email protected]

npm install --save-dev [email protected] [email protected] [email protected] [email protected]

• For the node modules and Packages.json dependencies use:

npm install

• Build the app using Webpack

npm run build

• Run the app using Webpack

npm start

• Watch the app changes using Webpack

npm run watch

• For anyone who wants to Use webpack to bundle JavaScript.
• For anyone who wants to practice html5, css3 and or vanilla JavaScript
• For anyone who wants to ES6 Concepts, modules, callbacks, promices and API Services.
• For anyone who wants to create his own Web devlopment course site.

• run: npx hint .
• run: npx stylelint "**/*.{css,scss}"
• run: npx eslint .

This app is deployed in the GitHub Pages for easy viewing upon merged on the main branch. Please find the link in the Live Demo section.

👤 Achraf KHITER

• GitHub:
• LinkedIn:
• Gmail:
• Twitter:
• Instagram:
• Facebook:

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Give a ⭐️ if you like this project!

• Hat tip to anyone whose code was used
• Inspiration
• Microverse program
• My standup team
• Coding partners

This project is MIT licensed.