---
description:
globs:
alwaysApply: true
---
# Regiflow

## Project Overview

- This website will be used for people to sign up for a physical event.
- The site includes a staff section for personnel of the event.
- The site is a TypeScript Angular SPA.
- The site uses TailwindCSS for styling.
- The site uses custom UI components.
- The site uses websockets to reload the page and reload data.

## Pages

- Landing: Where the users are greeted and shows links to login or register.
- Login: Where the users can log in to the event (email and phone number).
- Sign Up: Where the users can sign up for the event.
- Home: Where the users can see the home page of the event. If the user has a type of "user", it shows their ticket as a QR code. If the user type is "staff", the home page shows tools to allow the personnel of the event to check regular users' atendance.

## Auth

- The landing, login and register pages are only accessible if the user is not logged in, if the user is logged in, it will be redirected to the home event page.
- The home page is only accessible if the user is logged in, if the user is not logged in, it will be redirected to the landing page.
- The user will stay logged in until the logout button is clicked, then it will be redirected to the landing page.
- Staff and regular users use the same login page, it only changes the content of the home page.

## Special requirements

- If provided with an image of a page of the site's design, use it as reference to build the page and make sure it matches the design.