luigirazum / mv-pokeapp

This is a Single Page WebApp (API based) that show information about your favorite Pokemon, you can Like, Comment and even Reserve it for your next tournament.

"Watching your code come to life as a fully functional and useful application is one of the best feelings in the world." @luigirazum

Developer Quotes

Glad to see you here.

I'm a passionate coder and a clean code enthusiast who is always looking to improve. I like to learn new things from others as much as helping others solve their problems.

A bit about me

• Currently studying at Microverse to become a Full-Stack Software Developer.
• You can reach me at [email protected].
• All of my projects are listed in my or you can browse through the
• Do you have an issue with one of your projects? Let's put our minds together.
• Ask me about anything (I'll google it anyway).
• Looking forward to new oportunities.
• Make it count and give a star to any of my projects (it's free).
• If you see something wrong, suggestions and feedback are welcome.
• Fun fact: My peers say I'm fun to work with.
  
  

Get in touch

What do I use to code?

Languages & Frameworks

My Development Environment includes

GitHub Statistics

See my activity

Joke of the day

You're already here, let's have some fun.

Show me

Thank you! for visiting my profile .
_{If you would like me to try something new, please, and this repository.
Also you can show by any other of my .}

mv-pokeapp's Issues

Percentage margins

👍 Well done on the project!

I couldn't find any major issues. You have:

✔️ Followed JavaScript best practices
✔️ There were no linter errors
✔️ The code is clear and easy to understand.

However, I would like to suggest following some CSS best practices:

⚠️ Avoid using percentage margins and negative margins throughout your code as it can make it difficult to create a responsive layout.
⚠️ Also, reconsider usage percentage border radius in some parts of your code. You don't want to use it unless you want radius to be responsive to the size of the element. This behavior is something you might not want in elements such as buttons, where you want a fixed radius instead.

Let me know if you have any questions. Happy coding! 💻

[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.

[4pt] - Create feature: add new comment - Student B

Implement the "add new comment" form on the Comments pop up according to the wireframe:

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

[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.

This task does not include the counter of the reservations.

[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.

This task does not include the counter of the comments.

[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.

Peer to Peer: Code review

Highlights ✔️

• Good overall design
• Page loads data from the API correctly
• Descriptive PR and commit messages
• Followed GitFlow

Suggested Changes ♻️

There were no significant errors, but the design has the potential for small detail changes to make it awesome:

• The image in the description popup is a little to the left, kindly try to align it to the center
• The details in the reservation popup are a little bit too close for the overall design, kindly try to adjust the padding and margin to make it stand out

Hope these suggestions help you. Keep up the good work team have a great day! 😄

[3pt] - Add tests for items counter - Student A

Make sure that function for the items counter is covered with unit tests using Jest. Make sure that you have tests for all edge cases.

[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)

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).

[0.5pt] Add footer - group task

Create footer according to the wireframe:

Normalize general styles

• Fix styling issues for the different cards used in the project.
• Normalize styling for the popup windows (description/reserve).
• Add styles for the navbar and footer.
• Add some transitions and/or animations.

[0.5pt] Add header - group task

Create page header according to the wireframe:

[0.5pt] Set up the project with Webpack and Jest- group task

• Set up Gitflow
• Set up webpack
• Set up a JavaScript testing library (Jest)

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

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

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.

[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.

[3pt] - Add tests for reservations counter - Student C

Make sure that the function for the reservations counter is covered with unit tests using Jest.

Make sure that you have tests for all edge cases.

[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)

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).

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

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

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

[1pt] Choose assets - group task

Choose images, text, icons, fonts.

[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 Homepage.

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.

[3pt] - Add comments counter - Student B

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

Make sure that the correct number is displayed on the Comments 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.

Set Up Your Kanban Board

Hi ✌🏽 reviewer for this activity my colleagues and I, we made the configuration of the Kanban Board, all suggestions are welcome, have a great day

We are three in the Team

@cilfonegabriel
@luigirazum
@PierreBarba

link to the repository

https://github.com/luigirazum/mv-pokeapp

workflow

• create the repository
• We follow the steps to copy the project table
• We follow the steps to download the cards with the project activities
• we assign the activities to each participant
• we review details.

[3pt] - Create feature: add new like - Student A

When the user clicks on the Like button of an item (on Homepage), the interaction is recorded in the Involvement API and the screen is updated.

[3pt] - Add tests for comments counter - Student B

Make sure that the function for the comments counter is covered with unit tests using Jest.

Make sure that you have tests for all edge cases.