Javascript-Capstone

Javascript-Capstone is a project for learning Gitflows, GitHub workflows, and usage of API and SPA It has two main parts Homepage and Comments modal. Thanks ❤️ to my coding partner Kevin Toro for contributing to creating such an amazing-looking UI In this project, we have used JS, HTML, CSS, webpack, and API for making a demo restaurant. It will a

MIT License

Stars
5

Table of Contents

Javascript-Capstone

Javascript-Capstone is a project for learning Gitflows, GitHub workflows, and usage of API and SPA

Built With

Tech Stack

Key Features

Home page:

  • When the page loads, the webapp retrieves data from:
  • The selected API and shows the list of items on screen.
  • The Involvement API to show the item likes.
  • The page should make only 2 requests:
  • One to the base API.
  • 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.
  • 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 and 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.

Live Demo and Project presentation video

Getting Started

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

Prerequisites

  • In order to run this project you need:

It would be best if you had some familiarity with HTML, CSS, and JS.

  • A Computer (MAC or PC)
  • code editor (VSCode,Atom etc...)
  • A browser (Chrome,Mozilla,Safari etc...)
  • Version Control System (Git and Github)

Setup

Clone this repository to your desired folder:

       git clone https://github.com/AbdusSattar-70/Javascript-Capstone.git
       cd Javascript-Capstone

Install

Install this project with:

     npm install

Run tests and check errors

To run tests and check errors, run the following command:

  • To Test:-
   npm test
  • To check Styelint error:-
   npx stylelint "\*_/_.{css,scss}"
  • To check Eslint error:-
  npx exlint .
  • To check webhint error:-
  npx hint .

Deployment

You can deploy this project using:

   npm run build

Authors

Abdus Sattar

Kevin Toro

Future Features

  • Web Responsiveness for all users
  • Add web accessibility
  • Add gradient background that will change randomly

Contributing

Everybody is welcome to suggest, changes,Contributions, issues, and feature request in this project.

In order to do it, fork this repository, create a new branch and open a Pull Request from your branch.

Feel free to check the issues page.

Show your support

If you like this project, Please give me and you can use it following MIT license.

Acknowledgments

Thanks to my coding partner @torobucci for contributing to creating the project.

I would like to thank and appreciate who contributes this project.

License

This project is under MIT licensed.