This project is the capstone for module two of Microverse Bootcamp and has been done as a team and covered the following topics: - Connections to external APIs - Testing program functionalities using Jest - Displaying some products in to the UI - Added like and Comment features to the App

Related tags

Learning resource javascript rest-api store async-await front-end-development microverse
Overview

JS-capstone

Table of contents

Overview

This project is the capstone for module two of Microverse Bootcamp and has been done as a team and covered the following topics:

  • Connections to external APIs
  • Testing program functionalities using Jest
  • Displaying some products in to the UI
  • Added like and Comment features to the App
  • Added popup window with more data about an item that you can use to comment the products and also see a list of comments
  • Displaying the number of likes and comments for each product
JS-capstone.mp4

Screenshot

Desktop version Mobile Version Mobile Version
Solution Screenshot Solution Screenshot Solution Screenshot

Live Demo

MahdiSohaily.github.io/JS-capstone/

Prerequisites

For this project you must have node.js installed.

Setup Project

In order to run this project locally in your machine follow the following steps:

git clone https://github.com/MahdiSohaily/JS-capstone.git
cd Todo-app
npm install
npm run dev
npm run start

My process

Built With

  • HTML5
  • CSS3
  • Purge CSS
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • Webpack 5
  • JavaScript
  • Axios
  • Jest for testing

Author

👤 Mahdi Rezaei

👤 Alejandra Keber Maggi

🤝 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!

Comments
  • Create main

    Create main

    JS Capstone Project: Create the main page

    In this branch, I have made the following changes:

    • Added Axios plugin to send AJAX requests.
    • Added components files to create HTML elements dynamically.
    • Added Product card component to display products.
    • Added the pagination component to display data in a paginated format.
    • Added Like module class to do the like operation and get items like count operation.
    opened by MahdiSohaily 1
  • Navbar footer

    Navbar footer

    JS Capstone Project: header and footer section in this branch, we have made the following changes:

    • Added Header HTML structure.
    • Added Footer HTML structure.
    • Added website logo.
    • Added header and footer style.
    • Added JS function to display the nav differently on mobile devices.
    opened by MahdiSohaily 1
  • Set up Kanban board

    Set up Kanban board

    Hello code reviewer 👋

    We created this issue in order to have a review for our Kanban board: tasks, estimation time, and the assignee for each task. We are a group of two:

    • Mahdi Rezaei- Student A
    • Alejandra Keber - Student B

    The link to our project is the following: https://github.com/MahdiSohaily/JS-capston/projects/2

    Thank you and have a great day! 👍

    opened by AlejandraKeber 1
  • JS Capstone Project

    JS Capstone Project

    JS Capstone project: working with API and Testing

    This project is the capstone for module two of Microverse Bootcamp and has been done as a team and covered the following topics:

    • Connections to external APIs
    • Testing program functionalities using Jest
    • Displaying some products in the UI
    • Added like and Comment features to the App
    opened by MahdiSohaily 0
  • Testing

    Testing

    JS Capstone project: add tests

    • in this branch, we have added functions for testing some functionalities of our project.
    • Close #19
    • Close #18
    • Close #13
    • Close #12
    • Close #10
    opened by MahdiSohaily 0
  • Debugging

    Debugging

    Hi Mahdi, In this pull request, we are giving the final touches so that the app looks great and everything works correctly. Please check the code and let me know if anything Thank you very much!

    opened by AlejandraKeber 0
  • Popup window

    Popup window

    Hi Mahdi, In this PR I have done:

    • Create a function to display the popup detail
    • Create a function to show the popup and bring the information from de API
    • Create a file to get the comments from API and a function to display them
    • Add style to popup section
    • Close #7 task
    opened by AlejandraKeber 0
  • Create Main Page

    Create Main Page

    JS Capstone Project: Create Main Page.

    in this branch, I have made the following changes:

    • Added Main page HTML structure.
    • Added Main Page Styles.
    • Added Scripts to get products from external API and display it on the main page.
    • Added Script to display the number of total products.
    • Close #6
    • Close #9
    • Close #15
    opened by MahdiSohaily 0
  • Update header and Footer HTML Structure

    Update header and Footer HTML Structure

    JS Capstone Project: Header & Footer section

    in this branch, we have made the following changes:

    • Added the Header section.
    • Added the footer section.
    • Closes #1
    • Close #2
    • Close #3
    • Close #4
    • Closes #5
    opened by MahdiSohaily 0
  • Create popup

    Create popup

    JS Capstone project: show the number of comments for every product

    In this branch, I have made the following changes:

    • Added Comments.js class to work with comments.
    • Added Comments counter function to get the number of comments.
    • Closes #16
    opened by MahdiSohaily 0
  • [3pt] - Add reservations counter - Student C

    [3pt] - Add reservations counter - Student C

    Even if the API gives you the number of reservations you will create a specific function to calculate it.

    Make sure that the correct number is displayed on the Reservations pop up.

    Respect the following rules:

    • Each counter should be implemented as a separate module.
    • A counter function should look for specific DOM elements (e.g. for the comments counter it should look for comments) and make the counting based on what is actually displayed on the page.
    • A counter function should cover all the edge cases you can think about.
    opened by AlejandraKeber 0
Owner
Mahdi Rezaei
I'm a full-stack developer specializing in TypeScript, React, Redux, and Node.js. I enjoy coding and building apps that make life easy.
Mahdi Rezaei
GitHub https://MahdiSohaily.github.io/JS-capstone/
This web application was build the microverse program, it's about implementing functionalities using JavaScript

This web application was build the microverse program, it's about implementing functionalities using JavaScript

Mehdi Abdelaziz Rahal 11 Aug 18, 2022
A simple To-do app project made using JavaScript ES6 and Webpack - Microverse. You can add, remove, check tasks, and remove all the tasks that were done at the same time. Feel free to see the live version, if you like it please give it a star!

To Do List a to do list javascript app buit using webpack and es6. Built With HTML CSS JavaScript Wepack Live Demo (if available) Live Demo Link Getti

Aron 8 Dec 17, 2022
Microverse's capstone 2 - Javascript and APIs.

Capstone Two - Yummy Recipes - API manipulation & JavaScript project Recipe webpage that has many meal categories and a lot of options for each one of

Andres Agudelo Guzman 4 May 18, 2022
JavaScript API based capstone project using TVmaze API for displaying and interacting with items from the data base.

Yuriy Chamkoriyski & Bonke Gcobo Javascript capstone project API-based webapp from Module 2 at Microverse Wireframe requirements The Home Page low fid

Yuriy Chamkoriyski 5 May 30, 2022
Zero Two Bot,A fully Modular Whatsapp Bot to do everything possible in WhatsApp by Team Zero Two

?? ???????? ?????? ???? ?? A Moduler WhatsApp Bot designed for both PM and Groups - To take your boring WhatsApp usage into a whole different level. T

Sam Pandey 69 Dec 25, 2022
Hi, this is the meditation app made with React Native (for the frontend) and Nest.js (for the backend). It is a simple app that allows you to meditate for a certain amount of time. It is a work in progress, so there are some bugs and some features that are not implemented yet. The app is still in development, so please be patient. You are welcome to contribute to the project.

Meditation App Hi, this is the meditation app made with React Native (for the frontend) and Nest.js (for the backend). It is a simple app that allows

Jay 45 Jan 4, 2023
Solo programming project for week one of module 2 of the Microverse Program

To-do List Solo programming project for week one of module 2 of the Microverse Program. "To-do List" is a simple website that displays a list of books

Ivan Silva 9 May 6, 2022
This is the group project for the fourth week of the third module in the Microverse program.

Space Travelers' Hub This is the Space Travelers' Hub app initialized in the fourth week of the third module in the Microverse program. It was done us

Lucas Costa Rodrigues 8 Sep 4, 2022
Team Empire offers an innovative and intuitive game based on puzzles solved by two players working in a team.

Team Empire offers an innovative and intuitive game based on puzzles solved by two players working in a team. The user can create an account to monitor their results and achievements. The whole idea of the product is to make the player think and develop his logical thinking.

Vocational school for computer programming and innovation 14 Aug 8, 2022
The Taste food web app is our JavaScript capstone project, Taste food is a web application based on an external food API, showing data about Italian foods and we used Used involvement API to record the different user interactions (likes, comments).

taste-food The Taste food web app is our JavaScript capstone project, Taste food is a web application based on an external food API TheMealDB, showing

Kyrillos Hany 14 Aug 10, 2022
This is an Awesome Books web page where users can add or remove books from the site. It also displays a list of the books added to the collection. This was a continuous project, where in each milestone, new feature(s) was/were added to it.

Awesome Books This is an Awesome Books web page where a user can add or remove books from the site. It also displays a list of the books that are adde

Esther Udondian 6 Aug 1, 2022
To-do list" is an app that helps to organize your day. the user simply lists the things that needs to done and the app allows the to mark them as complete when they are done. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Todo-list project This is a Microverse project that entails a to-do-list. Built With HTML CSS Javascript Webpack VS code Live Demo (if available) Live

Youta Lactio Christabelle 10 Aug 3, 2022
The to-do list project is an app that allows users to successfully organize their day by inputting prioritized tasks. The project also allows users to carry out the CRUD operations for (add, edit and delete). Two special features of the app are that it saves tasks in the local storage of the user's browser, so when the user reloads or revisits the app, the user can view a list of tasks formerly inputted, and it allows users to prioritize their tasks by dragging up and down the list section.

TO-DO-LIST This is a To Do List Project that dynamically displays tasks to be done with interactions for removing and adding task when completed or no

Francis Ugorji 9 Nov 1, 2021
🍺 A public REST API for retrieving information about Systembolaget's products, and which products that are available in which store

?? systembolaget-api A public REST API for retrieving information about Systembolaget's products, and which products that are available in which store

Daniel Cronqvist 9 Nov 22, 2022
A product system made with NestJS. It's a service where you list products, create products or even delete them.

Products-API A product system made with NestJS. It's a service where you list products, create products or even delete them. What I used in this proje

Luiz Sanches 4 May 18, 2022
🌈 GitHub following, followers, only-following, only-follower tracker 🌈

github-following-tracker GitHub following, followers, only-following, only-follower tracker ?? Just enter your GitHub name and track your followings!

Youngkwon Kim 10 Jun 15, 2022
🥾 A simple way to do testing AWS Services and Jest or Serverless and Jest

jest-localstack-preset Install Install via yarn or npm $ yarn add https://github.com/thadeu/jest-localstack-preset.git or $ npm i https://github.com/t

thadeu 5 Oct 1, 2022
Microverse Javascript Capstone Project

Microverse Javascript Capstone Project This is my second Capstone Project At Microverse. This is a Web App for displaying your Favorate Poke and it de

Ndayishimiye (Odalton) Eric 4 Jul 8, 2022
This project is about the awesome books we did during Microverse to build a website for adding and removing the books.Done using HTML and ES6 JAVASCRIPT and modules

Awesome-books-with-ES6 Description the project. this project is about the awesome books we did during Microverse to build a website for adding and rem

Ilham Bouaik 5 May 28, 2022