This app is the capstone project we built at the end of our JavaScript module

Related tags

Learning resource api pokemon
Overview

Pokedex Capstone Project

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!

Screenshot

screenshot

Built With

  • HTML
  • CSS
  • JavaScript
  • Webpack
  • Jest

Live Demo

Live Demo Link

Live Video Link

Getting Started

To get a local copy up and running follow the instructions.

Setup

  1. Open the terminal and clone the project using git clone [email protected]:fabianofrank/pokemon-api.git

Install

  1. cd into the project folder and run npm install
  2. Run the command npm start

Usage

  • Click on the heart to Like your favorite pokemon.
  • Click on the comment button to see more information about the pokemon and share your experiences.
  • Click on the adopt button to schedule an adoption appointment.
  • Gotta catch 'em all!

Run tests

  1. Run the command npm test

Authors

👤 Oliver Coimbra

👤 Fabiano Frank

👤 Dante Alvarez

🤝 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

📝 License

This project is MIT licensed.

Comments
  • [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 fabianofrank 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 fabianofrank 0
  • [4pt] - Display number of likes for each item on the Homepage - Student A

    [4pt] - Display number of likes for each item on the Homepage - Student A

    When the page loads, the webapp the Involvement API to show the item likes and combines them with the data from the base API.

    Remember that your page should make only 2 requests:

    • one to the base API
    • and one to the Involvement API.

    This task does not include displaying the likes button (heart icon on the wireframe) for each item.

    opened by fabianofrank 0
  • [3pt] - Add all items counter on the Homepage - Student A

    [3pt] - Add all items counter on the Homepage - Student A

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

    Make sure that the correct number is displayed on the Homepgae.

    opened by fabianofrank 0
  • Morning session: Peer-to-peer code review

    Morning session: Peer-to-peer code review

    🥇 Great Job so far 💯 ✅ To highlight ✔️ Great work set up the repository on GitHub using Gitflow. ✔️ Set up webpack. ✔️ Set up a JavaScript testing library (Jest). ✔️ Good job creating the basic code on the home page.

    opened by oliverSCZ 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 fabianofrank 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 fabianofrank 0
  • [3pt] - Display comments for a given item on the Comments pop-up - Student B

    [3pt] - Display comments for a given item on the Comments pop-up - Student B

    When the popup loads, the webapp retrieves data from the Involvement API to show the item comments.

    Screenshot 2021-06-27 at 22 21 00

    This task does not include the counter of the comments.

    opened by fabianofrank 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 fabianofrank 0
Owner
Fabiano Frank
Junior Web Developer || JavaScript || Ruby on Rails || React
Fabiano Frank
GitHub https://fabianofrank.github.io/pokemon-api/dist/
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
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

JS-capstone Table of contents Overview The challenge Screenshot Links Project Setup commands My process Built with What I learned Continued developmen

Mahdi Rezaei 6 Oct 22, 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
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
Generate link preview using our app, API or our NPM package.

get-link-preview ?? View the link preview using our App. Use the API to generate link preview in your app or use the NPM package to use the custom hoo

Siddhi Gate 25 Dec 21, 2022
BMI Calculator can give us the bmi result of our bmi on the basis of our corresponding height and weight.

BMI means body mass index. Body Mass Index (BMI) is a person's weight in kilograms divided by the square of height in meters.

Bipronath Saha 1 Jan 20, 2022
MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

MUI Core MUI Core contains foundational React UI component libraries for shipping new features faster. Material UI is a comprehensive library of compo

MUI 83.6k Dec 30, 2022
This project, is about restructuring our Awesome books app code and make it more organized using modules and ES6 sintax. Built with HTML, CSS, JavaScript.

Awesome Books with ES6 This project, is about restructuring our Awesome books app code and make it more organized using modules and ES6 sintax. Built

Dino Ronald Quispe Arias 7 Jul 21, 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
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
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
An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

Snyk Labs 57 Dec 28, 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
Organizations - of the students, by the students, for the students! This project offers a ‘Website for students to find all the basic information about Developer Communities in their College in one place’. Currently, the app is limited to Lovely Professional University, Punjab. The project scope is to offer our functionalities to other universities and communities over time.

LPU Student Organizations Organizations - of the students, by the students, for the students! Problem Statement: With a plethora of Developer Communit

Google Developer Student Club - LPU 7 Oct 23, 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
[Book] 2019 edition of our front-end development handbook

Front-End Developer Handbook 2019 Written by Cody Lindley Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end enginee

Frontend Masters 4.1k Dec 28, 2022
Open the whole new fancy chapter, in which end-user can interact lively with our quests!

Fancy Chapter - Here comes the fancy adventure! Fancy Chapter is the User Interface (UI) of TheNewsQuest app, in which user can freely interact tons o

null 4 Aug 5, 2022
Shopping Cart - Project of HTML, CSS, and JavaScript developed by me (Raphael Martins) at the end of the Unit 9 Module 1 of the Web Development course at Trybe

Project of HTML, CSS, and JavaScript developed by me (Raphael Martins) at the end of the Unit 9 Module 1 of the Web Development course at Trybe. I was approved with 100% of the mandatory and optional requirements met.

Raphael Martins 13 Nov 27, 2022
Microverse Module 02 Project: This is educational project is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. Built with HTML, Sass, JavaScript and Webpack.

Project Demo Live Demo Description To-do list is a tool that helps to organize your day. It simply lists the things that you need to do and allows you

Ajayi Ridwan 7 Oct 21, 2022