| Name | Description |
|---|---|
| React | A declarative, efficient, and flexible JavaScript library for building user interfaces |
| Typescript | TypeScript is a superset of JavaScript that compiles to clean JavaScript output |
| Apollo Server | GraphQL server for Express, Connect, Hapi, Koa and more |
| Apollo Client | A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server |
| Ant Design | A UI Design Language and React UI library |
| UmiJS | Pluggable enterprise-level react application framework |
| Lodash | A modern JavaScript utility library delivering modularity, performance, & extras |
After defining my tech stack, I started with UI/UX. I spent 1 men/day finding my use cases using sites like Dribble, Behance, etc. After that, I spent the remaining days in order to prototype my final UX using Adobe XD. Prototype is available here.
For this project I skip wireframing step due to limited time.
After prototype a stable version, I started development phase.
Server implementation was already developed and I made small changes in order to support other filter criteria. Changes affects graphql schema and model implementation.
Client implementation was built from scratch. First of all I setted up project using UmiJS (create-umi-app). The result was a production-ready project that allow me to start (in 30 minutes) my development without worrying about boring project configuration (webpack loaders, dev scripts, etc). During development I include some automated unit-tests for each components (or page) in order to improve reliability of code. Due to limited time I skip some improvements / implementations (you can see these in improvements section)
In order to view a live demo I made deploy on a virtual machine powered by AWS EC2 (Ubuntu). I manage process of NodeJS server using pm2 then I use ngnix in order to forward request to right service.
If you want to start locally pokedex you can run script yarn install then yarn run server and yarn run client.
- Boost project collaboration introducing CI/CD workflow
- Use cached data, configuring cache with ApolloClient
- Introduce an error boundary
- Make application layout responsive
- Managing loading state
- Generate project doc (using typedoc)