JavaScript-capstone-project

The JavaScript capstone project is about building our own web application based on an external API. The webapp have 3 user interfaces:

• A home page showing a list of items that you can "like."

• A popup window with more data about an item that you can use to comment on it or reserve it for a period of time.

• In this project we pratice giving code reviews to our teammates.

• We built an API that provides data about food and then build the web app around it. Custom Api

• To avoid possible CORS conflicts when retrieving from an API we created a server bridge that deployed on heroku helps us to workaround conflicts with the localhost and CORS policies. CORS workaround Deployed version

• We use Jest to test the counters of comments, items, reservations and likes.

• The following Design System was created to serve as guideline: Figma design system

Project View

=======

Built With

• JavaScript
• Webpack
• HTML/SCSS
• Node.JS
• Jest
• Figma
• Php/SQL
• Postman

=======

Project requirements

• You should build these interfaces:
  • The home page.
  • The comments popup.
  • The reservations popup (only for the groups of 3 students).
• You should follow the layout of the wireframes provided. You should personalize the rest of the design including colors, typographies, spacings, etc.
• 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.
  • Remember that your page should make 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.
  • When the user clicks on the "Reservations" button, the Reservations popup appears (only for the groups of 3 students).
  • 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.
• Reservations popup (only for the groups of 3 students)
  • 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 reservations.
  • When the user clicks on the "Reserve" button, the data is recorded in the Involvement API and the screen is updated.

Counters We have counters in all the interfaces that show:

• The number of items (home).
• The number of comments (comments popup).
• The number of reservations (reservations popup) - only for the groups of 3 students.

Presentation Video

• Video

Getting Started

If you want a copy of this file go to the github repository and download it from there

• JavaScript-capstone-project

Live

Live

Setup

git clone  git@github.com:Mhdez221993/JavaScript-capstone-project.git
cd JavaScript-capstone-project

Install

npm install
npm run build

Usage

npm run start

Verify linters

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

• Autofix linters errors

npx eslint . --fix
npx stylelint "**/*.{css,scss}" --fix

To run jest test

npm run test
npm run jest

If you are non a technical person you can download the zip file.

• To do that you have to go to the green button that says 'Code' and then press on it.
• Choose the option 'Download Zip' and wait until it download.
• Then you need to decompress it.
• You will need to have Zip compress file software installed in your computer. If you don't have it you can download it from here JavaScript-capstone-project`
• Do double click on the Capstone-1.zip and choose a folder where to place all teh decompressed files.
• Once you are done decompressing, you can open the created folder.
• In it you can double click on the index.html file and choose a browser to open it (For example google Chrome Browser).
• Now you should be able to see the project.
• Remember to use the mouse to navigate through the website. Also you can use the keys 'arrow up' and 'arrow down' of your keyboard to scroll up and down.

Prerequisites

• Node.JS

=======

Author

👤 Abraham Rodriguez

• GitHub: @metsanpeitto
• Twitter: @metsanpeitto
• LinkedIn: Abraham Rodriguez
• Portfolio: Waldenberg

👤 Moises Hernandez Coronado

• GitHub: @Mhdez221993
• Twitter: @MoisesH42060050
• LinkedIn: Moises Hernandez Coronado

👤 Aganze Mataba Henri

• GitHub: @hiromataba
• Twitter: @Matabahiro
• LinkedIn: Hiro Mataba

=======

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

=======

Show your support

Give a ⭐️ if you like this project!

=======

Acknowledgments

• Microverse for giving me this chance
• To my Stand Up Team and coding partners who kept my morale up!
• The amazing code reviewers for making me improve every day 👍

=======