Links

Project Hub

Tools

Node.js, Express, React, Redux, Redux-Sagas, Postgres

Context

pk-web

Links: Live Demo | Source Code

The front-end project. Using our own API, we created a responsive Pokédex as a way to demonstrate what is capable using just our API as the sole data source. In trying to use the most modern technology available at the time, this project was built using React 16, Redux 3, React-Router 4, webpack 3, and Redux-Saga.

pk-api

Links: Live Demo | Source Code

The back-end project. Using data from veekun, we created and hosted our own Postgres database. This data is made accessible through our custom API layer that we wrote using Node and Express.

pk-scripts

Links: Source Code

A collection of quick scripts that we used to help speed up the development process. For example, one script that you'll find in here is one that we used to rename our animated gif sprites to match our naming convention.

pk-assets

Links: Repository

All of the assets that we use in pk-web. This repo exists to reduce load on our humble little VPS.

Outcome

Inspiration

With our first Pokédex project behind us, my friend Pia and I decided that we wanted take all of our learnings and apply wthem to create an even better Pokédex experience. For this iteration, we fully revamped and refined our stack. This meant a brand new API, a revised database, and a much more performant frontend.

Enter pk-project.

Highlights

Highlights from developing this project include:

• Improving performance using more advanced concepts such as lazy-loading
• Automating deployments to Linode using a custom CI/CD pipeline on CicleCI
• Extensive use of Redux Sagas
• Creating a flexible API to read data from our Postgres database