Built for fun and game activities! you can submit scores of players, create a new game, and refresh to see who is on top of the leaderboard

  • By Clinton Mbonu
  • Last update: Jun 30, 2022
  • Comments: 10

LeaderBoard

The leaderboard website displays scores submitted by different players. It also allows you to submit your score.

Mini Presentation

LeaderBoard

Additional description about the project and its features.

Built With

  • Major languages (HTML, CSS, JavaScript)

  • Frameworks

     - Bootstrap css framework

  • Technologies used

    - Webpack(Code Bundlng)
- Git(version control)
- ESLint(JavaScript linting)
- WebHint(linting tool)
- Stylelint(style linting)
- Jest(project testing)

Live Demo

Live Demo Link

Getting Started

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

Prerequisites

  • A text editor(preferably Visual Studio Code)

Install

Usage

Clone this repository

$ https://github.com/clintonjosephs/LeaderBoard.git
$ cd LEADERBOARD

Run project

$ npm install
$ npm test
$ npm build
$ npm run start # this will make webpack watching for your changes in code

Open page in browser

$ open dist/index.html

Interaction with the Leaderboard API

  • Each new game is created with the POST method using 
        { 
        "name": "My cool new game" 
    }

This request returns a result that holds the unique ID for that game:

  {
    "result": "Game with ID: Zl4d7IVkemOTTVg2fUdz added."
  }

This gameID is saved in the localStorage automatically

The two allowed actions are posting and getting of the scores

  • The POST request creates a new Leaderboard score for the given game sending user and score as parameters like this:

    Endpoint

    https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/:id/scores/

    body parameters

    { 
    "user": "John Doe",
    "score": 42
}

    and it returns

    {
    "result": "Leaderboard score created correctly."
}

  • The GET request returns data in JSON format like this:

    Endpoint

    https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/:id/scores/

    It returns

    {
  "result": [
      {
          "user": "John Doe",
          "score": 42
      },
      {
          "user": "Peter Parker",
          "score": 35
      },
      {
          "user": "Wonder Woman",
          "score": 50
      }
  ]
}

Authors

👤 Clinton Mbonu

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.

Github

https://github.com/clintonjosephs/LeaderBoard

Comments(10)

  • 1

    Add form validation

    Hi @clintonjosephs,

    I visited your page and generally speaking, your work looks good in every aspect :clap: However, I believe it will be :cool: to additionally implement client-side form validation to your project. I will keep your data consistent, and also serve as an additional barrier against malicious users. Please use this Link, it's a reminder on how to implement the aforementioned feature.

    Happy coding :rocket:

  • 2

    Improve loading indicator to follow the overall design

    The project is implemented very neatly. All components follow the same design except the loading indicator.

    image

    Would be nice if you can design this also in such way it follow the overall design of the project.

  • 3

    Mention MIT license rather All Rights Reserved

    I just noticed you added a copyright notice below the page and mentioned "All Rights Reserved". Since the project is under MIT license and is a Free/Libre and Open Source software, I suggest to mention this. Of course your are the copyright holder but your are giving certain freedom to the user as per MIT license.

    It is also more cool :wink:

  • 4

    Morning Session

    Great work with your project! Your code looks clean, it's very readable and it's working perfectly!

    Here are some suggestions that could make your code even better!:

    • In your comments, there are some typos that could be easily fixed.
    • Since you're already adding such amazing extra features, we think it would be great to make the leaderboard automatically refresh once a score it's been added.
    • Consider hiding the vertical scrollbar from the leaderboard when its size is not really big enough to expand the viewport.
    • Whenever a user tries to refresh the leaderboard when this is empty, it would be great to display a message different from the default one (since it's not really retrieving any content).

    Congratulations on your project! Keep it going. ❤️

  • 5

    LeaderBoard project

    Had fun developing the leader board project using git-flow.

    • Practiced JEST
    • Used Bootstrap CSS framework
    • Practiced giving code review
    • Added some cool features of my own.
  • 6

    Leaderboard final styling

    Hello 😄 ,

    Today, I was able to achieve the final styling of the leaderboard project, updated my readme file with a gif presentation of the project, and did a few code refactoring.

    Thank you for reviewing my code.

  • 7

    LeaderBoard - Hit api

    Hello 😄 ,

    Today I achieved task two on the leader board project, which was to consume and read data from the API provided. Kindly see below a succinct work-through of what I achieved:

    • Loading overlay to get uploaded scores on the first run for existing users
    • New users can create a new game with the name of choice by using the API.
    • Implemented the "Refresh" button (receiving data from the API and parsing the JSON).
    • Implemented the form "Submit" button (sending data to the API).
    • Used async and await JavaScript features to consume the API.
    • Implemented some styling
    • Used ES6 standards and arrow functions
    • Ensured no linter errors

    Thank you in advance for reviewing my project.

  • 8

    LeaderBoard - Part 1

    ##LeaderBoard

    Hello 😊 , I hope this PR for the leaderboard website meets you well, this website displays scores submitted by different players and also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.

    Please find below a few things that were achieved in the skeleton branch

    • ✅ Added Linters
    • ✅ Configured Webpack
    • ✅ Configured JEST
    • ✅ Setup MVC approach for the pages
    • ✅ Created HTML design and distributed to different views (.js) files for dynamic loading
    • ✅ Styled design a bit
    • ✅ Added image using Webpack
    • ✅ Setup and Updated readme file

    Thank you for making out time to review this PR 😄

  • 9

    Leader Board - Project Setup

    ##LeaderBoard

    Hello 😊 , I hope this PR for the leaderboard website meets you well, this website displays scores submitted by different players and also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.

    Please find below a few things that were achieved in the skeleton branch

    • ✅ Added Linters
    • ✅ Configured Webpack
    • ✅ Configured JEST
    • ✅ Setup MVC approach for the pages
    • ✅ Created HTML design and distributed to different views (.js) files for dynamic loading
    • ✅ Styled design a bit
    • ✅ Added image using Webpack
    • ✅ Setup and Updated readme file

    Thank you for making out time to review this PR 😄

  • 10

    Peer to Peer: Module 2 Block 5 Day 4

    Hey Clinton 👋

    I have seen your project 👀 You have done a great job 👏

    Following best practices of HTML/CSS ✔️ Following best practices of JavaScript ✔️ Following KISS, DRY, YAGNI completely. ✔️

    Review Changes ♻️

    • You should make your design of leaderboard items like the below image. https://res.cloudinary.com/movespring/image/upload/v1618265767/blog/leaderboard_desktop_2b2f45c10d.jpg

    [OPTIONAL] - You can make a leaderboard for multiple games. Means it should take multiple games shown on Leaderboard.

Popular Tag

Related