Skip to content

andrewvallejo/pokedex

Repository files navigation

Pokedex

This is a reskin of a previous project to make it my own.


Details on the previous project
## Frontend Tech Challenge

image

The project is broken into five parts, each with a feature and a wireframe.

The goal of this assessment is to replicate the frontend application below as close as possible. You are allowed to use any frontend framework (React.js, Vue.js, etc.) or use plain Javascript, HTML, and CSS.

I have chosen to use React as my framework and utilize other technologies like Redux and Tailwind CSS.

The project board is where I organized all of my issues and objectives for my application. The User Stories drop-down is a high-level overview of what was required for the assignment.

  • As a user, when I navigate to website in the application, I should see a list of GitHub issues for that repo, a portal with a list of robots, two search bars for name and tags, and a way to expand the robot's information

  • I should be able to scroll inside of the portal to see all robots

    • I should be able to see a picture, a name, email, company, skills, and average of each robot
  • I should be able to filter by name

  • I should be able to filter by tags

  • I should be able to filter by both names and tags

  • I should be able to add tags to any robot

  • I should be able to click on the plus sign to see more info

    • It should turn into a minus sign when active
    • I should be able to see all eight tests & test scores for each robot when expanded
  • I should be able to click on the minus sign for less info

    • It should turn into a minus sign when active

    image

    Visit PhaseBook


Installation

First, clone the repo and update the dependency with your package manager preference (yarn, pnpm, etc.)

git clone
npm install

Usage

You can either visit the pokedex application or run the command

npm start

Preview

Pokedex demo

Features

  • See a list of all of your pokemon
  • Every pokemon in the application will have their picture featured!
  • See details on every Pokemon, which includes: type, height, moveset, and more!
  • Add tags onto any pokemon better categorize them into teams
  • Search by tags and by name

Roadmap

  • Add a cache to prevent refetches and renders
  • Update pokedex to look more like the original
  • Give the right side of the pokedex more functionality
  • Add open/close animation for the Pokedex
  • Add option to pick pokemon generations

Technologies

React Badge Redux Badge JavaScript Badge Tailwind CSS Badge Cypress Badge React Router Badge Post CSS Badge Netlify Badge


Created by Andrew Vallejo

Follow me on Github or on Linkedin!