pokemon-wiki is a mini wiki that allows users to search for concise data about the pokemon they want. Design is heavily inspired by Bulbapedia XD.

Live page accessible at https://jovanwongzixi.github.io/pokemon-wiki/

Utilised github action workflow with build-test-deploy CI/CD to automate deployment to github-pages

• VueJS
• HTML/CSS
• Vitest
• Axios

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

See Vite Configuration Reference.

git clone https://github.com/jovanwongzixi/pokemon-wiki.git
cd pokemon-wiki

npm install

npm run dev

npm run build

npm run test:unit

npm run coverage

Being a small scale wiki, the goal should be to provide concise information in a simple aesthetic for user to process easily and quickly. Hence, I only chose to display information that are more important.

Different colour background used in PokemonCard for easy recognition of Pokemon primary type

Although this wiki was designed primarily for desktop viewing, I used @media(min-width: ) in CSS to adjust the layout for body and PokemonCard component. PokemonCard is only rendered as a grid with 2 columns when the screen width is wide enough

Application was designed to be based on components, with PokemonCard being the 'parent' component that contain multiple 'child' components(Pokemon attributes). I attempted to follow the Open-Closed Principle used in Object Oriented Programming, where PokemonCard component should be open for extension(integrating more sub-components easily) but closed for modification(logic for existing sub-components can remain the same).

Initially, I used a BasicComponent for all sub-components that did not require special design and similar rendering format so future components can be added without having to code a new component from scratch. However, that meant that more preprocessing of information retrieved from API has to be done in PokemonCard, which made the code look even more cluttered. Changes to information in existing sub-components will have to be made in PokemonCard which seemed unintuitive to me.