From 5b2e7f450103aefc4d934a99d32eaa7c02fe9780 Mon Sep 17 00:00:00 2001 From: Emma Fredriksen Date: Wed, 16 Sep 2026 14:01:10 +0200 Subject: [PATCH 1/2] docs: update README with overview, AI and getting started sections --- README.md | 84 ++++++++++++++----------------------------------------- 1 file changed, 21 insertions(+), 63 deletions(-) diff --git a/README.md b/README.md index 922b465..b4d51b8 100644 --- a/README.md +++ b/README.md @@ -1,79 +1,37 @@ -# React + TypeScript + Vite +# T12 - Project - 1 -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +## Overview -Currently, two official plugins are available: +This project collects and displays data from an external REST API for the popular TV show _Rick and Morty_. Users can search for and filter characters using the search bar or filter menu. More detailed information about each character can be viewed by clicking the `Details` button. Each character card also has a star button that allows users to add characters to their favorites. -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs) -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) +The API documentation can be found here: -## URL to the VM machine running the code: -- http://it2810-12.idi.ntnu.no/project1/ +``` +https://rickandmortyapi.com/documentation +``` -## React Compiler +## Virtual machine -The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information. +The webpage can be accessed through a virtual machine at: -Note: This will impact Vite dev & build performances. -You can also try [the experimental native React Compiler support in plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md#rust-react-compiler) by using `compiler: true` in the plugin options instead of using the Babel plugin. +- http://it2810-12.idi.ntnu.no/project1/ -## Expanding the ESLint configuration +## Get started -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: +Before running the project, make sure you have `Node.js` installed on your machine. Install the project dependencies with: -```js -export default defineConfig([ - globalIgnores(["dist"]), - { - files: ["**/*.{ts,tsx}"], - extends: [ - // Other configs... +``` +npm install +``` - // Remove tseslint.configs.recommended and replace with this - tseslint.configs.recommendedTypeChecked, - // Alternatively, use this for stricter rules - tseslint.configs.strictTypeChecked, - // Optionally, add this for stylistic rules - tseslint.configs.stylisticTypeChecked, +Start the development server with: - // Other configs... - ], - languageOptions: { - parserOptions: { - project: ["./tsconfig.node.json", "./tsconfig.app.json"], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]); +``` +npm run dev ``` -You can also install [eslint-plugin-react-x](https://npmx.dev/package/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://npmx.dev/package/eslint-plugin-react-dom) for React-specific lint rules: +The webpage will then be available at the local URL provided in the terminal (localhost:3000) -```js -// eslint.config.js -import reactX from "eslint-plugin-react-x"; -import reactDom from "eslint-plugin-react-dom"; +## Use of AI -export default defineConfig([ - globalIgnores(["dist"]), - { - files: ["**/*.{ts,tsx}"], - extends: [ - // Other configs... - // Enable lint rules for React - reactX.configs["recommended-typescript"], - // Enable lint rules for React DOM - reactDom.configs.recommended, - ], - languageOptions: { - parserOptions: { - project: ["./tsconfig.node.json", "./tsconfig.app.json"], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]); -``` +During development, our use of AI has been limited. Any code written with the assistance of AI is marked with a comment above the relevant code snippet. We chose this approach based on our understanding of AI and our previous experience. AI can be a great accelerator when programming, but using it effectively requires a good understanding of the fundamental principles behind the technology being used. Without this understanding it is hard to evaluate the code produced by AI and make informed decisions. Since we currently do not have this understanding we decided it was better to use AI as a coach rather than a developer. From 5d194b6cad8ed441951319849daa1fa1dd7d7f1d Mon Sep 17 00:00:00 2001 From: Emma Fredriksen Date: Fri, 18 Sep 2026 08:45:59 +0200 Subject: [PATCH 2/2] docs: write paragraph abouch technical choices and make tweaks --- README.md | 69 ++++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 55 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index b4d51b8..7fc2ab3 100644 --- a/README.md +++ b/README.md @@ -1,37 +1,78 @@ -# T12 - Project - 1 +# T12 - Project - 1 - Rick and Morty character explorer -## Overview +## Virtual machine -This project collects and displays data from an external REST API for the popular TV show _Rick and Morty_. Users can search for and filter characters using the search bar or filter menu. More detailed information about each character can be viewed by clicking the `Details` button. Each character card also has a star button that allows users to add characters to their favorites. +The webpage can be accessed through a virtual machine at: -The API documentation can be found here: +- http://it2810-12.idi.ntnu.no/project1/ -``` -https://rickandmortyapi.com/documentation -``` +## Overview -## Virtual machine +This project collects and displays data from an external REST API for the popular TV show _Rick and Morty_. Users can search for and filter characters using the search bar or filter menu. More detailed information about each character can be viewed by clicking the `Details` button. Each character card also has a star button that allows users to add characters to their favorites. -The webpage can be accessed through a virtual machine at: +The API documentation can be found here: -- http://it2810-12.idi.ntnu.no/project1/ +- https://rickandmortyapi.com/documentation ## Get started Before running the project, make sure you have `Node.js` installed on your machine. Install the project dependencies with: -``` +```bash npm install ``` Start the development server with: -``` +```bash npm run dev ``` -The webpage will then be available at the local URL provided in the terminal (localhost:3000) +The webpage will then be available at the local URL provided in the terminal (localhost:5173) + +## Tests + +The project has a test coverage of 88,73%. To measure and review the current test coverage, run the following command in the terminal: + +```bash +npm test -- --coverage +``` + +Each component has its own test file covering its most important functionality. `CharactersPage.tsx` also has a separate test file that covers the main functionality of the page. `HeroPage.tsx` consists only of static HTML elements and does not contain any functionality that requires testing. The test files are located in the same folders as their corresponding components or pages and follow the same naming convention. To run project tests run the following command in the terminal: + +```bash +npm test +``` + +## Developed by + +- Emma Fredriksen +- Mina Ellingsen +- Karen Skauge +- Gurveer Singh + +## Technologies + +The project was developed using the following technologies and tools: + +- React +- Vite +- TypeScript +- TanStack Query +- HTML and plain CSS +- Vitest +- Prettier + +## Technical choices + +The webpage is divided into smaller React components to seperate responsibilities and make the code easier to understand, maintain and test. React state is used for data that changes during user interaction, such as the selected character, search query, and filters, while props are used to pass data and functionality between components. Character and episode data is fetched from the Rick and Morty REST API using TanStack Query. TanStack Query was chosen to handle asynchronous API requests and caching, reducing the need to manually manage loading and fetched data in React state. API data is fetched when needed and is not persisted in Web Storage. + +Web Storage is used for user-specific choices. Filter selections are stored in `sessionStorage`, allowing them to survive page reloads during the same browser session. Favorites are stored in `localStorage` so that they remain available after the browser has been closed and reopened. This also allowed us to gain experience with the different persistence behavior of the two storage APIs. + +The user interface is built with our own React components and plain CSS, without third-party UI component libraries. CSS, Flexbox, and media queries are used to adapt the layout to different screen sizes and orientations. ## Use of AI -During development, our use of AI has been limited. Any code written with the assistance of AI is marked with a comment above the relevant code snippet. We chose this approach based on our understanding of AI and our previous experience. AI can be a great accelerator when programming, but using it effectively requires a good understanding of the fundamental principles behind the technology being used. Without this understanding it is hard to evaluate the code produced by AI and make informed decisions. Since we currently do not have this understanding we decided it was better to use AI as a coach rather than a developer. +During development, our use of AI has been limited. Any code written with the assistance of AI is marked with a comment above the relevant code snippet. We chose this approach based on our understanding of AI and our previous experience. AI can be a great accelerator when programming, but using it effectively requires a good understanding of the fundamental principles behind the technology being used. Without this understanding it is hard to evaluate the code produced by AI and make informed decisions. Since we are still developing our understanding of React, TypeScript and the other technologies used in this project, we decided it was better to use AI as a coach rather than a developer. This approach affected our development speed, and we spent more time exploring documentation and other learning resources. However, it also gave us a better understanding of the project as a whole and helped us avoid introducing unnecessary code that we did not fully understand or know how to maintain. +
+We also found that establishing a shared standard for documenting AI-assisted code made it easier to be transparent about the use of AI and to review each other's work. Knowing which parts were developed with AI assistance made it easier to discuss the reasoning behind the code and evaluate whether we understood and agreed with the proposed solutions. At the same time, we recognize that we could probably have achieved a higher development speed by using AI more actively, and AI might also have helped us identify more efficient solutions in some areas. However, for this project, we felt that the benefits of prioritizing learning, transparency, and understanding outweighed the potential increase in productivity. We therefore intend to continue using this approach while gradually increasing our use of AI as our own knowledge and ability to evaluate its output improve.