Skip to content

Latest commit

 

History

History
260 lines (170 loc) · 7.44 KB

README.md

File metadata and controls

260 lines (170 loc) · 7.44 KB
Raw

📗 Table of Contents

📖 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

🔑 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:
      • 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

👤 ANTHONY OBI

(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)