📗 Table of Contents

• 📖 About the Project

  • 🛠 Built With
    • Tech Stack
    • Key Features
    • Live Demo
    • Walkthrough

• 💻 Getting Started

  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
  • Deployment

• 👥 Authors

• 🔭 Future Features

• 🤝 Contributing

• ⭐️ Show your support

• 🙏 Acknowledgements

• 📝 License

📖 JS Capstone Project

JS Capstone Project - Microverse! project is a repository consisting of the following files:

• HTML file
• CSS file
• JS files
• HTML, CSS, and JS linters file
• callbacks and promises used.
• Implementation of External API
• Learn how to use proper ES6 syntax. Use ES6 modules to write modular JavaScript.
• Use webpack to bundle JavaScript.

🛠 Built With

Tech Stack

• HTML
• CSS
• JS

🔑 Key Features

Javascript Capstone Project: Requirements

Features Added:

• Interfaces:
  • The home page.
  • The comments popup.
• The layout of the wireframes provided is followed and the layouts are personalized for the rest of the design including colors, typographies, spacings, etc.
  • Home page
    • When the page loads, the web app retrieves data from API and shows the list of items on the screen used.
    • The Involvement API to show the item likes used.
    • The Page makes only 2 requests:
      • One to the base API.
      • And one to the Involvement API.
    • When the user clicks on the Like button of an item, the interaction is recorded in the Involvement API and the screen is updated.
    • When the user clicks on the "Comments" button, the Comments popup appears from this API Storega.
    • Home page header and navigation similar to the given mockup.
    • Home page footer similar to the given mockup.
• Comments popup
  • When the popup loads, the webapp retrieves data from:
  • The selected API shows details about the selected item.
  • The Involvement API to show the item comments.
  • When the user clicks on the "Comment" button, the data is recorded in the Involvement API, and the screen is updated.
  • When the popup loads, the webapp retrieves data from The selected API and shows details about the selected item.
• Counters We have counters in all the interfaces that show:
  • The number of items (home).
  • The number of comments (comments popup).

(back to top)

🚀 Live Demo

Live Demo Link

(back to top)

👁 Walkthrough

Live vedio

(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 git clone [email protected]:Microverse-JS-Capstone.git

Prerequisites

In order to run this project you need:

• GitHub account;
• git installed on your OS.

Install

Linters

• Installations required to run this project:

Install the node module

• Run the following command:

npm install

Install the webpack-cli.

• Run the following command:

npm install webpack webpack-cli --save-dev

Install the plugin and adjust the webpack.config.js file

• Run the following command:

npm install --save-dev html-webpack-plugin

In order to import a CSS file add the style-loader and css-loader to your module configuration

• Run the following command:

npm install --save-dev style-loader css-loader

webpack-dev-server

• Run the following command:

npm install --save-dev webpack-dev-server

Webhint installation.

• Run the following command:

npm install --save-dev [email protected]

Stylelint installation.

• Run the following command:

npm install --save-dev [email protected] [email protected] [email protected] [email protected]

ESLint

• Run

npm install --save-dev [email protected] [email protected] [email protected] [email protected]

Usage

You can use this project by cloning it to your folder and changing index.html and styles.css files.

Run tests

To run tests, run the following commands:

To track linter errors locally follow these steps:

Download all the dependencies run:

npm install

Track HTML linter errors run:

npx hint.

Track CSS linter errors run:

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

Track JavaScript linter errors run:

npx eslint .

Deployment

You can redeploy this project by adding new lines of code to source files.

(back to top)

👥 Authors

👤 Habtamu Alemayehu

• GitHub: Benawi

👤 ANTHONY OBI

• GitHub: Megagig

(back to top)

🔭 Future Features

• User Based Authentication for commet and like

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

(back to top)

⭐️ Show your support

Give us ⭐️ If you like this project!

(back to top)

🙏 Acknowledgments

• We would like to thank Microverse program for providing us this great chance.

(back to top)

📝 License

This project is MIT licensed.

(back to top)