Zuwairanajma/Leaderboard-Project

Leaderboard-Project

Leaderboard Project

# 📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Usage
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements

📖 "To-do List with webpack Project!"

Leaderboard is a simple project built to consume the leaderboard API. A user can add their name and their score which then will be displayed on the list ot the existing scores. This app is also built with module files based on various functionalities, the stacks used to build the project are HTML, CSS and JS.

🛠 Built With

Tech Stack

HTML

CSS

JS

WebpackDevServer

HTMLWebpackPlugin

Client

• HTML
• CSS
• JS
• WebpackDevServer
• HTMLWebpackPlugin

Key Features

• Navbar (menu-bar)
• localStorage functionality
• Add book functionality
• Remove book functionality
• Footer section
• contact information

(back to top)

🚀 Live Demo

You can view this project using this URL "https://zuwairanajma.github.io/Leaderboard-Project/dist/"

(back to top)

💻 Getting Started

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

Setup

Clone this repository to your desired folder:

Fork this repo git clone git@github.com/Zuwairanajma/Leaderboard-Project.git

Prerequisites

In order to run this project you need:

• GitHub account;
• Install Git on your OS.

Install

Installations required to run this project:

• Webhint installation. Run the following command:

npm install --save-dev hint@7.x

• Stylelint installation. Run the following command:

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

• Eslint installation. Run the following command:

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

• Webpack installation. Run the following command:

npm install --save-dev style-loader css-loader html-webpack-plugin webpack-dev-server

Usage

Run tests

To run tests, run the following commands:

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

Build

To build the project, run the following command:

npm run build

Webpack Development Server

To run the webpack development server, execute the following command:

npm start

(back to top)

Deployment

You can deploy this project using github pages or other hosting sites like netlify.com

(back to top)

👥 Authors

👤 Author1

👤 Zuwaira Sadiq

• GitHub: @Zuwairanajma
• Twitter: @SadiqJuwairiyya
• LinkedIn: Zuwaira Sadiq

(back to top)

🔭 Future Features

• Functionalities
• Improved UI design
• Enhance Designs for all screen sizes and other media queries such as "print

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

(back to top)

⭐️ Show your support

If you like this project, support and encourage me by staring it and leaving a comment.

(back to top)

🙏 Acknowledgments

I would like to appreciate and acknowledge the esteem Microverse program for providing me with necessary template files and detailed instructions.

(back to top)

📝 License

This project is MIT licensed.

(back to top)