jugosack / leaderboard

The leaderboard website is is a web-based project that was built using webpack. It displays scores submitted by different players. It also allows you to submit your score.

leaderboard

LEADERBOARD

My Microverse leaderboard project (Module two)

📗 Table of Contents

• [📖 🎯 leaderboard
  • 🛠 Built With
    • Tech Stack
  • 🚀 Live Demo
  • 👁 Presentation
  • Deploy my website with github pages":
  • - Loom video link:
  • 💻 Getting Started
    • Prerequisites
    • Install
  • Requirements
    • 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.

🛠 Built With

Technology

• HTML
• CSS
• Bootstrap 5
• Javascript
• Webpack
• Linters (Lighthouse, Webhint, Stylelint, Eslint)
• Git/GitHub work-flow

(back to top)

Tech Stack

Client

• JavaScript

• Html

• CSS

• Bootstrap 5

Server

• N/A

Database

• LocalStorage

🚀 Live Demo

• Leaderboard

(back to top)

👁 Presentation

Deploy my website with github pages"

- Loom video link

💻 Getting Started

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

Prerequisites

• IDE to edit and run the code (We use Visual Studio Code 🔥).
• Git to versionning your work.

Install

• first install package.json and node_modules run: npm init -y

• npm install --save-dev hint

• npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x

• npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x

Requirements

• Linters configuration.

Clone the repository to get start with project, then make sure to install dependencies in the linters file located in the linter file

(back to top)

Run tests

Check for the tests when you generate a pull request and fix the errors if any. For stylelint error run: sudo npx stylelint "*/.{css,scss}" --fix and it will the fix style issues automatically.

• to test and check the html file/s is error-free run: npx hint .

• to fix errors run: npx hint . -f

• to test and check the css file/s is error-free run: npx stylelint "**/*.{css,scss}"

• to fix errors run: npx stylelint "**/*.{css,scss}" --fix

• to test and check the js file/s is error-free run: npx eslint .

• to fix errors run: npx eslint . --fix

Deployment

👥 Authors

👤 Jugoslav Achkoski

• GitHub: jugosack
• Twitter: Jugoslav Achkoski
• LinkedIn: Jugoslav Achkoski

🔭 Future Features

• Project 2: send and receive data from API.

• Project 3: final touches.

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

(back to top)

🙏 Acknowledgments

• Microverse Team.

I would like to thank Microverse for the information provided to build this project.

(back to top)

❓ FAQ (OPTIONAL)

• Can I use the project for any purpose?

  • Yes, you can use this files for anything you need.

• Is the information saved in any database?

  • No, all data is saved in Local Storage.

📝 License

This project is MIT licensed.

(back to top)