Leader Board App

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Prerequisites
  • Setup
  • Install
  • Usage
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• ❓ FAQ (OPTIONAL)
• 📝 License

📖 Leader Board App

Leader Board App In this activity, I set up a JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules. I developed a first working version of the app following a wireframe but without styling.

🛠 Built With

Tech Stack

Client

• HTML
• CSS
• Javascrip

Server

• Web Pack

Key Features

• Use ES6 modules to write modular JavaScript
• Use webpack to bundle JavaScript

(back to top)

🚀 Live Demo

• Live Demo Link

(back to top)

💻 Getting Started

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

Prerequisites

In order to run this project you need:

• Git.
• An IDE (e.g. VS Code)
• Browser to run.

Setup

Clone this repository to your desired folder:

• Using Git Bash or any integrated terminal of you choice.
• Open with code editor (e.g. VS Code).
• Make sure all dependencies( eg: webpack, webpack dev server, css-loader, sass-loader, bootstrap)

Usage

To run the project locally, execute the following command:

• Run the following command;
  • npm install
  • npm run server (You should see a success result)
  • Now access the app on port 8080 by entering the following in your browser:
  • http://localhost:8080

Run tests

To run tests, run the following command:

---

Initial Step:

---

• mkdir .github/workflows
• copy the linters.yml file to the directory created above.
• touch .gitignore if not created already and add node_modules/ to it.
• initialize npm to create package.json file by running the command:

  npm i -y

(here i for install & -y for saying yes to all)

---

For Webhint (optional):

---

• Run

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

• To fix validation errors run:

  npx hint .

---

For Stylelint

---

• Run

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

• Copy .stylelintrc.json to the root directory of your project.

• Run

  npx stylelint "*/.{css,scss}" on the root of your directory of your project.

• Fix linter errors.

---

ESLint

---

• Run

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

• Copy .eslintrc.json to the root directory of your project.

• Run

  npx eslint .
  on the root of your directory of your project.

• Fix linter errors.

Deployment

You can deploy this project using:

• GitHub Pages from a specific branch (e.g. main).
• You can also used any cloud service like gcloud or Azure.
• A deployed version can be found here: [https://... (Coming Soon)

(back to top)

👥 Authors

👤 Obote

• GitHub: @Obote
• Twitter: @Obote_denis
• LinkedIn: Obote-denis

(back to top)

🔭 Future Features

• Use callbacks and promises
• Use APIs

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project please give me a star to show support

(back to top)

🙏 Acknowledgments

I would like to thank like to thank code reviewer and morning team which help me during this project.

(back to top)

(back to top)

📝 License

This project is MIT licensed.

(back to top)