Microverse Javascript Capstone Project

Overview

Microverse Javascript Capstone Project

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

Includes the following features...

  • Get Poke at current time.
  • Like and Comment.
  • Reload to see new Pokes

Built Using

  • Javascript
  • Webpack
  • API (Fetch)
  • Jest (Unit Testing)
  • Github Project (KanBan Board)
  • HTML
  • CSS

Usage

Run Dev Server (Port 3000)

  npm run dev

Build for production

npm run build

Demo App

live demo here.

Authors

👤 Odaltoneric

👤 GideonDadi

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

  • Hat tip to code reviewers and to everyone who reviewed the project and made suggestions.

📝 License

This project is MIT licensed.

Comments
  • Poke Web App

    Poke Web App

    Capstone Project

    Build on these interfaces:

    • The home page.
    • The comments popup.

    Home page

    When the page loads, the webapp retrieves data from:

    • The PokeApi and shows the list of items on screen.
    • The Involvement API to show the item likes.
    • 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.
    • 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 PokeAPI 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.

    Counters

    We have counters in all the interfaces that show:

    • The number of items (home).
    • The number of comments (comments popup).

    Technical Set Up

    Built Using:

    • Gitflow.
    • webpack.
    • JavaScript testing library (Jest).
    opened by ndayishimiyeeric 0
  • Like functionalities

    Like functionalities

    This Branch has the following features:

    • Display Likes for individual Poke card.
    • Like a Pokemon.
    • All Linking functionalities Implemented using the Involvement Api.
    opened by ndayishimiyeeric 0
  • [4pt]  - Display Reservations pop up with selected item's details - Student C

    [4pt] - Display Reservations pop up with selected item's details - Student C

    Create a reservations popup only with the top section (displaying details of the selected item)

    Screenshot 2021-06-27 at 22 10 45

    When the popup loads, the webapp retrieves data from the selected API and shows details about the selected item.

    Add event to button prepared by your teammate that will open your popup. You need to communicate with your team member to make sure that you do not block each other (most likely the easiest solution is to merge the list of items feature to the dev branch before you try to add that event).

    opened by ndayishimiyeeric 0
  • [3pt]  - Display reservations for a given item on the Reservations pop-up - Student C

    [3pt] - Display reservations for a given item on the Reservations pop-up - Student C

    When the popup loads, the webapp retrieves data from the Involvement API to show the item's reservations.

    Screenshot 2021-06-27 at 22 21 48

    This task does not include the counter of the reservations.

    opened by ndayishimiyeeric 0
  • [4pt]  - Create feature: add new reservation - Student C

    [4pt] - Create feature: add new reservation - Student C

    Implement the "add new reservation" form on the Reservations pop up according to the wireframe:

    Screenshot 2021-06-27 at 22 35 30

    When the user clicks on the "Reserve" button, the data is recorded in the Involvement API and the screen is updated

    opened by ndayishimiyeeric 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.

    opened by ndayishimiyeeric 0
  • Project Description

    Project Description

    Link to our project

    https://github.com/ndayishimiyeeric/Capstone-KanbanBoard/projects/1

    Group members

    We are working on this project in a group of two [ @ndayishimiyeeric and @gids-dadi ]

    opened by ndayishimiyeeric 2
  • [0.5pt] Find external API - group task

    [0.5pt] Find external API - group task

    Find an API to base the development of the webapp around it. The API should allow you to

    • Get a list of items with a unique item id (or generate the unique id).
    • For a given item, get detailed information about it. choose an APIs that doesn't need authentication. if you select an API that requires authentication, you should implement it on your own. Also, if you select an API that provides image resources your webapp will be more visual.
    opened by ndayishimiyeeric 0
  • [4pt]  - Display list of items on the Homepage - Student A

    [4pt] - Display list of items on the Homepage - Student A

    Create the main part of the homepage that keeps the layout from the wireframe:

    Screenshot 2021-06-27 at 21 50 23

    When the page loads, the webapp retrieves data from the selected API and shows the list of items on screen with the basic data (e.g. title + image).

    Prepare also "Comments" and "Reservations" buttons. They should be doing nothing - just being displayed.

    This task does not include displaying the number of likes for each item.

    This task does not include the counter of the items.

    opened by ndayishimiyeeric 0
  • [4pt]  -Display Comments pop up with selected item's details - Student B

    [4pt] -Display Comments pop up with selected item's details - Student B

    Create a comments popup only with the top section (displaying details of the selected item)

    Screenshot 2021-06-27 at 22 10 45

    When the popup loads, the webapp retrieves data from the selected API and shows details about the selected item.

    Add event to button prepared by your teammate that will open your popup. You need to communicate with your team member to make sure that you do not block each other (most likely the easiest solution is to merge the list of items feature to the dev branch before you try to add that event).

    opened by ndayishimiyeeric 0
Owner
Ndayishimiye (Odalton) Eric
Software Developer, AI enthusiast. || Stack: JavaScript, React, Redux. || Student and Mentor at @microverseinc Looking for my next job!
Ndayishimiye (Odalton) Eric
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
A simple api to get data of microverse's staff members, made for microverse students so they cann implement them in their projects

Microverse Staff Api Api for some microverse staff members Built With Express NodeJs MongoDB (Mongoose) JavaScript Base URL https://microverse-staff.h

Ali Jendoubi 7 Sep 29, 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
This app is the capstone project we built at the end of our JavaScript module

This app is the capstone project we built at the end of our JavaScript module. It's a nostalgic interpretation of a pokedex, and we hope you enjoy it as much as we did putting it together. Go and catch 'em all!

Fabiano Frank 2 Oct 19, 2022
Kyrillos Hany 14 Aug 10, 2022
This is a TV shows list website. It is a capstone project that was completed as part of Module 2 - JavaScript.

Kanban Board Capstone Project This is a TV Shows web site source from TVmaze API. In the website, a user can click on heart icon and get it recorded i

Mayengbam Ranjit Luwang 7 Aug 11, 2022
Get the best meals - JavaScript capstone project

Get the best meals - JavaScript capstone project Project in which you can give likes, comment on and reserve your best meals. Build using Test Driven

divine charlotte 19 Jan 3, 2023
Ajayi Ridwan 7 Oct 21, 2022
Microverse Module 02 Project: This is education project that allow user to add desire books to the list and also delete books. It makes use of local storage to preserve the data on the web browser.Built with HTML, CSS, JavaScript

Project Demo Live Demo AWESOME BOOK PROJECT Project allow user to add desire books to the list and also delete books. It makes use of local storage to

Ajayi Ridwan 8 Dec 3, 2022
CVTC Capstone Project - The Fish Net

The Fish Net Created By: Bruce Brown, Dave Oberlander, Mason Johnson, Timothy Harper About This is the repository for The Fish Net. It is a website to

David Oberlander 1 Nov 11, 2022
Project developed as Capstone of Q4 Backend module of the Fullstack Developer Course of Kenzie Academy Brasil by the group @ezms, @Nafly09, @RafaelSchug, @victorlscherer, @Vinicius2m, @ManoelaCunha

✨ Quokka Services ✨ ?? Serviço rápido e sem preocupação! ?? O objetivo da nossa aplicação é diminuir a dificuldade que moradores de condomínios encont

Manoela Fernanda Girello Cunha 4 May 4, 2022
App repository for our capstone project 😎 (Get that home).

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Cesar Martinez Vargas 4 Jul 12, 2022
Microverse Module 02 Project: This is an educational project to make a TodoList web application, where the users can add new todo, remove todo, edit todo, mark todo as completed, and remove all completed todo. Built with Webpack

todo-list This project is about building a list of To Do tasks. Where you can save your daily activities and help in daily evaluation. Live demo you v

divine charlotte 25 Jan 3, 2023
Microverse project for practicing javascript coding skills

To Do list Microverse project for practicing javascript coding skills.. Additional description about the project and its features Built With HTML CSS

Bereket Adego Retta 2 Jan 30, 2022
A microverse project that allows users to update tasks from a list using javascript modules

ToDo-list App This is a microverse project that allows users to update tasks from a list using javascript modules Our goal here is to Build a book app

faith Usor 5 Oct 19, 2022
A simple leaderboard project made while a student in Microverse using API to get scores for a game, JavaScript, HTML and basic CSS

A simple leaderboard project made while a student in Microverse using API to get scores for a game, JavaScript, HTML and basic CSS

Thiago Ponce 6 Nov 28, 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
This is the Microverse Leaderboard project that uses gitflow and features html, CSS, Javascript, ES 6 modules and Webpack

Leaderboard project This is the Microverse Leaderboard project using Gitflow, html + css + modular javascript, ES6 syntax, and Webpack. Built With Htm

Suleiman Olaide 10 Sep 9, 2022
It is an app that allows you to create lists of books and authors made in the course of Microverse. This project was develop using JavaScript, HTML and CSS.

AWESOME BOOKS This is an Awesome book store project that add store and diplay books on the UI. Built With HTML,CSS, JavaScript Frameworks Github, Lint

JUSTINE IMASIKU 5 Jul 28, 2022