Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benawi/microverse-js-capstone
"A dynamic webiste" is about building group web application based on an external API. We will select an API that provides data about a topic that we like and then build the webapp around it.
https://github.com/benawi/microverse-js-capstone
api-rest dev-server javascript webpack
Last synced: about 5 hours ago
JSON representation
"A dynamic webiste" is about building group web application based on an external API. We will select an API that provides data about a topic that we like and then build the webapp around it.
- Host: GitHub
- URL: https://github.com/benawi/microverse-js-capstone
- Owner: Benawi
- Created: 2023-05-29T08:36:44.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-12-18T18:02:07.000Z (about 1 year ago)
- Last Synced: 2024-04-23T19:22:14.749Z (9 months ago)
- Topics: api-rest, dev-server, javascript, webpack
- Language: JavaScript
- Homepage:
- Size: 1.11 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📗 Table of Contents
- [📖 About the Project](#about-project)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [Live Demo](#live-demo)
- [Walkthrough](#Walkthrough)
- [💻 Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#triangular_flag_on_post-deployment)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [📝 License](#license)
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.
## 🔑 Key Features
### Javascript Capstone Project: [Requirements](https://github.com/microverseinc/curriculum-javascript/blob/main/group-capstone/js_capstone.md)
### Features Added:
- [x] Interfaces:
- The home page.
- The comments popup.
- [x] 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](https://rapidapi.com/hub) and shows the list of items on the screen used.
- The [Involvement API](https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/6b6MwShRJVij7XaDVDix/likes/) to show the item likes used.
- The Page makes only 2 requests:
- One to the base [API](https://rapidapi.com/hub).
- And one to the [Involvement API](https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/6b6MwShRJVij7XaDVDix/likes/).
- When the user clicks on the Like button of an item, the interaction is recorded in the [Involvement API](https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/6b6MwShRJVij7XaDVDix/likes/) and the screen is updated.
- When the user clicks on the "Comments" button, the Comments popup appears from this [API Storega](https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/6b6MwShRJVij7XaDVDix/comments).
- Home page header and navigation similar to the given [mockup](https://github.com/microverseinc/curriculum-javascript/blob/main/group-capstone/images/Home.png).
- Home page footer similar to the given [mockup](https://github.com/microverseinc/curriculum-javascript/blob/main/group-capstone/images/Home.png).
- [x] 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.
- [x] Counters We have counters in all the interfaces that show:
- The number of items (home).
- The number of comments (comments popup).
## 🚀 Live Demo
[Live Demo Link ](https://benawi.github.io/Microverse-JS-Capstone/dist/)
[Live vedio](https://drive.google.com/file/d/1JdyRRXO2_W1Fq5bu_4MYirS2-VoofdFz/view?usp=sharing)
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](https://github.com/microverseinc/linters-config/tree/master/html-css-js)
- 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.
### 👤 Habtamu Alemayehu
- GitHub: [Benawi](https://github.com/Benawi)
### 👤 ANTHONY OBI
- GitHub: [Megagig](https://github.com/Megagig)
- User Based Authentication for commet and like
Contributions, issues, and feature requests are welcome!
Give us ⭐️ If you like this project!
- We would like to thank Microverse program for providing us this great chance.
This project is [MIT](./MIT.md) licensed.