hilalarsa / pokemon

Pokemon Dashboard

Home / List Page

Show pokemon list

• Pagination / Infinite scroll
• Fetch from API
• Show total owned on each pokemon
• Save on localstorage
• Pokemon detail page on click
• Router redirect

Detail page

• Show : picture, moves, type, additional info
• Button : catch pokemon (random 50% probability)
• Give nickname to pokemon
• Save Pokemon data to localstorage
• Add validation on nickname so its unique

My Pokemon list page

• Show data from localstorage
• Show list of pokemon, owned only
• Show this as list, with all owned pokemon with nickname showed
• Remove/release pokemon from owned if they're useless (lol)

Additional details

• Use Graphql with Apollo
• Check lighthouse report
• Deploy on static server

Design plan

• Use mobile first UI/UX
• Collor pallete :
  • Orange Peel FF9F1C
  • Rose Madder E71D36
  • Tiffany Blue 2EC4B6
  • Baby Powder FDFFFC
  • Rich Black 011627
  • United Nations Blue 5386E4

Stack

• React NextJS, Custom Hook, React Context
• Graphql Apollo Client
• CSS in JS Emotion
• Automated test (Integration test & Unit test) with JEST and React testing library
• Webpack
• AMP, PWA, SPA, SSR

Sprint plan

Day 1

All page layouting with dummy data

Day 2

• All page layouting with real data
• Apollo integration
• Fetch API from gql
• Start on storage logic

Day 3

All page layouting with real data

Add basic css for components

Local storage logic on :

• Catching pokemon
• Retrieve Pokemon on my list
• Release pokemon

Work on my pokemon list

Day 4

• Design improvement
• Fix css and logics
• Start on writing test cases
• Initial Deploy

Day 5

• Improve UI
• Add animation

Day 6

• Improve UI
• Clean code
• Add animation

Day 7

• Clean code
• Double check deployment and submit

TODO :

• Write tests
• Simplify Styling
• Reduce re-render
• Improve Lighthouse scoring
• Improve color pallette
• Add infinite loader