Skip to content

This project consists of creating a single page application with HTML, CSS and Javascript that allows to register and list the score of different players in different games, using the Leaderboard API to access and preserve the data.

License

Notifications You must be signed in to change notification settings

NitBravoA92/leaderboard-api

Repository files navigation


Leaderboard App

📗 Table of Contents

Leaderboard App

Leaderboard App: This project consists of creating a single page application with HTML, CSS and Javascript that allows to register and list the score of different players in different games, using the Leaderboard API to access and preserve the data.

🛠 Built With

Tech Stack

Client

Key Features

  • Minimalist Design
  • Responsive design
  • Use of semantic HTML
  • source code packaged with Webpack
  • Dynamic content with Javascript

(back to top)

🚀 Live Demo

To see the application working live, you can click on the following link that contains the demo version:

(back to top)

💻 Getting Started

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

Setup

Clone this repository to your desired folder:

  cd my-folder-name
  git clone [email protected]:NitBravoA92/leaderboard-api.git

Prerequisites

In order to install, modify and run this project, it is necessary to have the following applications installed:

It is also important to have at least basic knowledge about webpack tool, HTML, CSS and Javascript languages so you will be able to understand and work with the html and css code of the project.

Install

Install this project by running the next command into your project folder:

  npm install

All the packages and libraries necessary for the project to work will be installed in a folder called /node_module

Usage

Run the following command to start the application on a development server:

  npm start

You only need to run this command once. If you keep making changes to the files, the installed webpack server will reload the page so you can see the changes immediately.

Open the HTML, CSS or Javascript files and modify the internal code, then run the following command to check if your code has any syntax, indentation or spacing errors:

HTML Linter

  npx hint .

CSS Linter

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

Javascript Linter

  npx eslint .

This will show you a log with details about errors (if any) and changes that would be necessary to solve those errors and improve the code.

Note: Please only modify the HTML, CSS and Javascript files. Do not modify the configuration files of the project.

When all the code changes are ready, run the following command to have webpack generate the bundle files in your ./dist folder. Those files are optimized for use in production.

  npm run build

👥 Authors

👤 Nitcelis Bravo

(back to top)

🔭 Future Features

  • Create two sections with HTML to submit and display players' score
  • Make Leaderboard API call and get for list of scores
  • Make Leaderboard API call to add a new score
  • Add the final CSS styles to give it a more attractive design

(back to top)

🤝 Contributing

Contributions, issues, suggestions and feature requests are welcome! Feel free to check the issues page.

To do Contributions, please fork this repository, create a new branch and then create a Pull Request from your branch. You can find detailed description of this process in: A Step by Step Guide to Making Your First GitHub Contribution by Brandon Morelli

(back to top)

⭐️ Show your support

If you liked this project, give me a "Star" (clicking the star button at the beginning of this page), share this repo with your developer community or make your contributions.

(back to top)

🙏 Acknowledgments

I would like to thank my Microverse teammates for their support. They have supported me a lot in carrying out this project, giving me suggestions, good advice and solving my code doubts.

📝 License

This project is MIT licensed.

(back to top)

About

This project consists of creating a single page application with HTML, CSS and Javascript that allows to register and list the score of different players in different games, using the Leaderboard API to access and preserve the data.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published