# Requirements

This document describes all requirements that you *must* complete as part of finishing your project. You are strongly encouraged to implement your own ideas to showcase the range of your technical abilities - now is the time to push yourself! Don't forget to implement the requirements below, first, though.

## Product Requirements

Users must be able to:

* [ ] Easily understand the purpose of the app and who it's for
* [ ] Experience a consistent design throughout the app
* [ ] Sign up and log in
* [ ] Navigate between and use 3 (or more) distinct screens/pages
* [ ] View dynamic data/content (e.g. from an external API)
* [ ] Input, modify and submit persistent data (e.g. that saves across sessions)
* [ ] Receive feedback on their actions (e.g. loading, button clicks, input validation)
* [ ] Recover gracefully in the case of issues (e.g. missing data, api errors, invalid forms)
* [ ] Use the application on both desktop and mobile

## Technical Requirements

* [ ] User mangement
  * [ ] Basic access control (e.g. logged in and logged out users have appropriate access)
  * [ ] Session management (e.g. to maintain user state during their use of the app)
* [ ] Data
  * [ ] Use 1 (or more) external APIs to support your apps dynamic features
  * [ ] Store appropriate data persistently (e.g. via an API and/or local storage)
* [ ] Security and error handling
  * [ ] Input sanitisation - Ensure all user input is cleaned to prevent security vulnerabilities
  * [ ] Form validation - Validate user input to make sure they fit appropriate criteria (e.g. strong passwords)
  * [ ] Error handling - Sufficient handling of issues and errors to avoid the app breaking
* [ ] Architecture
  * [ ] Component-based architecture
  * [ ] Handle routing of multiple pages with React Router
* [ ] UX and Design
  * [ ] Responsive design (e.g. a layout that adapts to different screen sizes graciously)
  * [ ] Consistent styling approach (e.g. component-specific styles, CSS modules)
  * [ ] Basic accessibility (e.g. semantic HTML, alt-text, keyboard navigation on forms)

## Organisational Requirements

* [ ] Work as a team of 4-5 trainees to complete the project together
* [ ] Assign clear roles and/or areas of ownership between each team member
* [ ] Use Trello to organise your project tasks and visualise your progress
* [ ] Define all of your tasks clearly using Trello cards
* [ ] Organise your team using weekly sprints
* [ ] Run weekly planning sessions to decide on the next tasks and priority order for the sprint
* [ ] Submit small pull request(s) for each task, ready to be reviewed by other team members before merging

## Deliverables

To submit your finished project, you will need:

* [ ] A deployed and working app accessible via the browser with a public URL
* [ ] Code versioned using git along with meaningful commit messages
* [ ] Code pushed to a public GitHub repo on your profile
* [ ] A README in the root of your repo including:
  * [ ] A project description
  * [ ] How to run it locally
  * [ ] A link to your deployed app
  * [ ] Key technical summary & decisions
  * [ ] Known limitations & future improvements

## Optional Ideas

These are not required, and you must complete all other requirements and deliverables first to pass this project. Then you are welcome to implement these ideas or use them for inspiration to improve your project and develop your skills further.

* [ ] Use Firebase as an auth provider
* [ ] Add dark mode / theme switching
* [ ] Implement offline support with service workers or local caching
* [ ] Add end-to-end tests (e.g. with Cypress or Playwright)
* [ ] Set up a CI pipeline (e.g. GitHub Actions) to run your tests and linting on each PR
* [ ] Add animations and transitions for a polished user experience
* [ ] Implement internationalisation (i18n) to support multiple languages
* [ ] Achieve a Lighthouse accessibility score of 90+


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://program.hackyourfuture.dk/course-content/frontend/final-project/requirements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.