Leaderboard

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 (https://www.notion.so/microverse/Leaderboard-API-service-24c0c3c116974ac49488d4eb0267ade3).

Leaderboard

📗 Table of Contents

• Leaderboard
• 📗 Table of Contents
• 📖 Leaderboard
  • How to build the “Leaderboard” website?
    • Project 1: basic page structure.
    • Project 2: send and receive data from API.
    • Project 3: final touches.
  • 🛠 Built With
    • Tech Stack
    • Tools i have used for this project
    • Key Features
  • 🚀 Live Demo
  • 💻 Getting Started
    • Prerequisites
    • Setup
    • Install
    • Usage
    • Run tests
    • Deployment
  • 👥 Authors
  • 🔭 Future Features
  • 🤝 Contributing
  • ⭐️ Show your support
  • 🙏 Acknowledgments
  • 📝 License

📖 Leaderboard

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.

How to build the “Leaderboard” website?

• Project 1: basic page structure.
• Project 2: send and receive data from API.
• Project 3: final touches.

Project 1: basic page structure.

In this activity will set up a JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules. I should develop a first working version of the app following a wireframe, but without styling - just focus on functionality. In following activities, I will consume the Leaderboard API using JavaScript async and await and add some styling.

• Set-up linters on local environments.
• Used correct flow GitFlow.
• Documentation the project in a professional way on README file.
• Create an npm project with webpack.

• Write plain HTML markup with minimum styling (just to make the layout), because you will implement styles in the following steps. Use this wireframe as a guide:

  [

• Don’t make API calls (I’ll do it in a following step).
• Use ES6 modules, with import and export.

Project 2: send and receive data from API.

In this activity I will continue working on the Leaderboard list app, sending and receiving data from/to the Leaderboard API.

• Read the Leaderboard API documentation (https://www.notion.so/microverse/Leaderboard-API-service-24c0c3c116974ac49488d4eb0267ade3) to learn how to use this API.
• Create a new game with the name of your choice by using the API.
• Make sure that you saved the ID of your game that will be returned by API.
• Implement the “Refresh” button that will get all scores for a game created by you from the API (receiving data from the API and parsing the JSON).
• Implement the form “Submit” button that will save a score for a game created by you (sending data to the API).
• Use arrow functions instead of the function keyword.
• Use async and await JavaScript features to consume the API.
• No styling is required.

Project 3: final touches.

In this activity you will finalize the Leaderboard list app, adding the styles needed to make it look great.

• At this point you should have a fully working app that uses only basic styles to make the layout work, according to this wireframe:

  [

• Now I should improve the look and feel of the application, adding the styles of my choice.

  🛠 Built With

Tech Stack

Client Side / Front-End

• HTML
• CSS
• Javascript

Server Side / Back-End

• JSON
• ES6
• Webpack
• Leaderboard API

Package, Library, Framework

• webpack
• webpack cli
• html-webpack-plugin
• style-loader
• css-loader
• webpack-dev-server

Tools i have used for this project

Code Convention, Code Analysis

• ESLint
• Webhint
• Stylelint
• Lighthouse
• node_modules checker

Version Control, CI/CD, Hosting Service

• GitFlow
• Github Pages
• Github Actions
• Git

IDE, Desktop Apps, Other Tools

• Visual Studio Code
• Github Desktop

Key Features

• Send and receive data from API.
• Play with async & await.
• Connect to the Leaderboard API.
• Add as much styling as possible.
• Implement the actions behind the “Refresh” Button.
• Implement the actions behind the “Submit” Button.

(back to top)

🚀 Live Demo

• Click the following url for … Live Demo …

(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 version 2.38.x
• node.js version > 12.x
• IDE (visual studio code, etc)
• browser (chrome, firefox, edge, safari)

Setup

Clone this repository to your desired folder:

  cd my-folder
  git git@github.com:fickryiman/Leaderboard.git

Install

Install this project with:

  cd my-project
  npm install

Usage

To run the project, execute the following command:

  npm run build (production environment)
  npm start (development environment)

Run tests

To run tests, run the following command: Run Github Actions Test

  npm test

  npx stylelint "**/*.{css,scss}"
  npx eslint .

  auto fix linter with --fix
  npx stylelint "**/*.{css,scss}" --fix
  npx eslint . --fix

Deployment

You can deploy this project using: GitHub Pages Example:

https://fickryiman.github.io/Leaderboard/

(back to top)

👥 Authors

👤 Fickry Bil Iman

• GitHub: @fickryiman
• Facebook: @fickry.bil.iman
• LinkedIn: fickry-bil-iman

(back to top)

🔭 Future Features

• add login to user with social media auth or google auth
• create mobile version

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the https://github.com/fickryiman/Leaderboard/issues.

(back to top)

⭐️ Show your support

If you like this project please follow me on my GitHub: @fickryiman or connect on my LinkedIn: @fickry-bil-iman.

(back to top)

🙏 Acknowledgments

First thing first, I would like to say Alhamdulillah, Thanks to my Families, Microverse and Micronaut’s, Reviewer’s, Thank you for all of the experiences, lesson and everythings.

(back to top)

📝 License

This project is MIT licensed.

(back to top)

This site is open source. Improve this page.