PoKedeX

Abstract

• The PoKedeX App is a Progressive Web Application that gives a user the ability to search through Generation 1 Pokemon and quickly find information on them.
• When offline, the user will have complete access to the application features as well as any Pokemon information that has been successfully queried prior to going offline.
• This will be a very useful app for someone who is in a real life Poke-battle and needs to find quick information about Pokemon, even without internet service!

Deployment Link

• PoKedeX: As a user, when I visit the app, I should be able to search for Pokemon by name.
• PoKedeX: As a user, when I visit the app on a computer or tablet, I should be able to see a display of all Pokemon.
• How To: As a user, when I visit the app, I have a "How To" button, and if I click it, I can access a page that explains how to use the app.
• PokemonDetails: As a user, I should be able to access a page that contains a Pokemon's details by searching for their name or ID (1-151).
• PokemonDetails & Help: As a user, I should be able to return to the PoKedeX from any other page.

This project was a group project for Turing School of Software & Design during module 3. The project rubric is linked here.

A Little Bit About the Developers

Hi! My name is Joana!👩🏻‍💻🌴 I am a current Front End Engineering student at Turing School of Software Design. I am a career changer! I've spent the last decade working to manage two small business, and grabbing the opportunity to move to another country. Now, I'm spending my days learning code. As a woman I can contribute to build a more balanced society, where people can be seen as equals in the software marketing and where I can build apps more inclusive and make a difference using this huge platform of the internet!

Hi, I'm Hayley! 🐰🌻🐱 I enjoy combining my experience with software development, art, the cannabis industry, community organization, & start-ups. During the last decade, I managed teams who launched successful new businesses, including multiple dispensaries and an analytical testing laboratory network. While outside of the office, I used the skills garnered from cannabis industry experience to co-found two organizations: a grassroots political enterprise & a worker's rights advocation association. I recognized a lack of representation and resources in these roles, which motivated me to help my community by getting an education in front-end development. My propensity for empathy and accessibility have led me to place considerable focus on a variety of user experiences and representation.

Info about Matt 🎸 : I'm a software developer with a passion for accessibility and designing tools that are delightful to use. I have a strong interest in learning and implementing new technologies. My backround in Mechatronics and Engineering as a Field Service Technician for an industrial manufacturer allowed me to expand on my passion for learning and allowed for implementation on the fly. I also gained the experience to travel globally, and I enjoy learning about different cultures and perspectives and then finding ways to integrate this knowledge into my own life in order to become a more well rounded person.

Outside of Software Development, I have a passion for music and music technology, hiking mountains, finding and cruising skateparks, and hanging out with my loved ones and dog! 🛹 🦮

Learning Goals and Objectives

• Successfully create a progressive web application (PWA)
• Installable (A2HS ready), use of Service Workers, a Web App Manifest, Use of an API, offline useage
• Implement web animations (GSAP Library)
• Learn more about React components & asynchronous JS - use of Hooks
• Practice refactoring
• Create a multi-page UX using Router
• Successful TDD and end to end testing with Cypress

Technologies Used

• React/JavaScript
• React Router
• Service Workers
• Cache
• Green Sock Animation Library (GSAP)
• HTML
• CSS
• Lighthouse (Accessibility dev-tool)
• Cypress
• NPM
• Fetch API
• ESLint
• Miro Wireframe (link)
• PokeApi

Screenshots

Mobile

Desktop

Error & Loader

Reflections

Wins

• Built a Progressive Web Application that is installable and fully functions offline
• Learned and Applied JS Animations using the GSAP Library
• Finding common grounds when building the application amongst a team!
• Making the application accessible all platforms
• Learning and Implemetings new technologies on the fly
• Refactoring the app to use Hooks

Challenges

• Balancing fun/life with project/work/study time 👩🏻‍💻 💅🏻 💆🏻‍ 🐈 🎸
• Learning and using two new tecnologies at the same time (GSAP and PWA)
• Collaborating as a group to learn new technology and then implement it

Future Designs/Extensions

• The user will be able to login/logout with username and password.
• The user will be able to save their favorite cards within their account.
• The user will be able to play a game in the app.
• More robust and smoother transitions between pages and elements