/leaderboard

Leaderboard-style website integrating APIs, using OOP, ES6 and Webpack

Primary LanguageJavaScript

Leaderboard

Leaderboard-style website

screenshot

This project is a leaderboard-style website built using ES6 and Webpack as part of Microverse projects.

It displays scores submitted by users and preserves data via an API.

The design is inspired from the video game Mortal Kombat.

Things done so far:

1. Create basic page structure

  • Use custom-built Webpack boilerplate
  • Implement app structure using classes
  • Implement event listeners
  • Split JS files into modules
  • Configure repository to deploy from Webpack output directory

2. Send and receive data from API

  • Implement API endpoint to save and load scores
  • Use async/await for API operations

Built With

  • Major languages: HTML, SCSS, JS
  • Technologies used: Webpack

Live Demo

Live Demo Link

Getting Started

To get a local copy up and running, follow the steps below in your terminal.

Prerequisites

  • Node.js
  • npm

For more information, view the section Installation in this guide about Node.js and npm.

Setup

Clone the project:

git clone https://github.com/AkashaRojee/leaderboard.git

Install

There are currently no production dependencies.

Install the development dependencies:

npm install

Usage

The assets are in the src directory.

The output is in the docs directory.

Deployment

Note: The default output directory of Webpack (dist) has been renamed to docs to facilitate publishing from GitHub Pages.

To build the website:

npm run build

To serve the website directly:

npm run start

Author

👤 Akasha Rojee

🤝 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.