From f82e59c2f7800018a41f42af3d87c757679fde8a Mon Sep 17 00:00:00 2001 From: Ayse Zeynep Aydin Date: Fri, 18 Sep 2026 15:38:55 +0200 Subject: [PATCH] documentation: Edited README.md Edited README.md in accordance to the latest work before submission. Included testing and AI Usage --- README.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index bf73232..fd5bb11 100644 --- a/README.md +++ b/README.md @@ -10,29 +10,31 @@ Project Pokémon Team Generator, also known as PTG, is a simple website that use ## Functional requirements Below is an explanation about how this project meets the functional requirements of the assignment. - PTG displays all pokémon in a grid allowing the user to navigate through one by one. -- The game, generation, and type dropdown filters found at the top of the grid instantly filters the pokémon cards based on the selection, displaying a filtered grid for the user to view. User's applied filters will still be in effect after the site is reloaded. +- The game and type dropdown filters found at the top of the grid instantly filters the pokémon cards based on the selection, displaying a filtered grid for the user to view. User's applied filters will still be in effect after the site is reloaded. - The star icon on each card allows the user to save the pokémon as favorite. This choice will be "remembered" even if the browser is closed. -- Website is designed with different screen sizes in mind. -- We are not done yet. +- Website is designed with different screen sizes in mind using @media queries. +- When designing the website, appearance was taken into cosideration. We have decided to stick with the red and yellow theme of pokémon. Keeping the interactive components at the top gives the website an easier access to functionality without having to navigate all over the place. ## Technical requirements Below is an explanation about how this project meets the technical requirements of the assignment. The project implements a structured usage of html tags within its components. With the functions from Typescript and in combination of React and CSS, the solution has a responsive design with relatively good functoinality. Local storage and internal storage are being used respectively to save filter data and favorite pokémon data. -[Poké API](https://pokeapi.co/about) is being used through TanStack Query. +[Poké API](https://pokeapi.co/about) is being used through TanStack Query. Various @media queries in combinatoin with screen sizes used in the project makes the website behave accordingly in different end devices. Usage of flex display also contributed to the website's responsiveness along side the @media queries. ## Development and testing -Here should come development and testing details. +Below is our observations and experiences during development and test phase of the project. First development stage consisted of downloading necessary software and creating issues to get the project up and going with the basic functionality. Next stage was to create more issues according to the needs and implement them. [Here](https://git.ntnu.no/orgs/IT2810-H26/projects/18/views/1) is a link to the project workflow. -Working with branching in git helped the team have a better control over what should and should not go to the development environment. +Working with branching in git helped the team have a better control over what should and should not go to the development environment. Each branch functioned as a test environment and got pushed into development after memebers were done reviewing one another's branch. Simple changes like fixing a few spellings in this readme or the about page went witout branching. -Throughout the development process [ESLint](https://eslint.org/) was a silent fourth member that secretly assissted with code development by pointing out issues in the scripts. +Throughout the development process [ESLint](https://eslint.org/) was a silent fourth member that secretly assissted with code development by pointing out issues in the scripts. [Prettier](https://prettier.io/) came into the project towards the end and contributed by syntax checking. Once applied, longer scripts were easier to read. + +Last phase of the development was testing. This was done both automatically, through vitest test functions with mocked data that checked expectancies, and manually, through external interest groups within family and friends. For UI testing, snapshots were used alongside manual testing through different operating systems and browsers within the team members. For manual mobile testing Inspect funtion of the browser was a great help. To run the project locally, install dependencies with `pnpm install` inside the `PTG` folder, then start the dev server with `pnpm dev`. Tests are written with [Vitest](https://vitest.dev) and React Testing Library, and can be run with `pnpm test` (or `pnpm test:watch` to re-run on file changes). ## AI usage About AI usage within the project development, whether we have used or not. -Claude Sonnet 5 was used in assistance of resolving some merge conflicts during the latest stages of development, and also to help develop the Vitest test suite. +Claude Sonnet 5 was used in assistance of resolving some merge conflicts during the latest stages of development, and also to help develop the Vitest test suite. Otherwise we have chosen to keep the great joy and happiness of accomplishment and the fruits of discovering on our own to ourselves. 😊