diff --git a/.github/workflows/deploy-to-vm.yaml b/.github/workflows/deploy-to-vm.yaml
index 46f40dd..b0d34ba 100644
--- a/.github/workflows/deploy-to-vm.yaml
+++ b/.github/workflows/deploy-to-vm.yaml
@@ -150,6 +150,7 @@ jobs:
run: |
set -euo pipefail
tries=0
+ sleep 5
until curl -fsS -o /dev/null "http://localhost:$FRONTEND_PORT/project2/"; do
tries=$((tries + 1))
[[ $tries -lt 15 ]] || {
diff --git a/README.md b/README.md
index efb4e02..3cbbd9d 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,31 @@
# T-09 Project 2 (G-Spotter)
-Our plan/spec as it is now, is outlined in [./docs/inital-plan.md](./docs/initial-plan.md)
+### Site deployed to [http://it2810-09.idi.ntnu.no/project2](http://it2810-09.idi.ntnu.no/project2), backend deployed to [http://it2810-09.idi.ntnu.no:3001](http://it2810-09.idi.ntnu.no:3001)
+
+Our inital spec, written for the first deliverable, and what we are basing the development on, is outlined in [./docs/inital-plan.md](./docs/initial-plan.md)
+
+## Index
+
+- [Prerequisites](#prerequisites)
+- [Monorepo structure](#monorepo-structure)
+- [Getting started](#getting-started)
+ - [Commands](#commands)
+ - [Styling](#styling)
+ - [Database interactions](#database-interactions)
+ - [Linting & Formatting](#linting--formatting)
+ - [Deployment](#deployment)
+- [Timeline](#timeline)
+ - [1st hand-in of project 2](#1st-hand-in-of-project-2)
+ - [2nd hand-in of project 2](#2nd-hand-in-of-project-2)
+ - [3rd hand-in of project 2](#3rd-hand-in-of-project-2)
+ - [Final hand-in of project 2](#final-hand-in-of-project-2)
+- [AI declaration](#ai-declaration)
+
+## Prerequisites
+
+**PNPM:** We use *p*npm as out package manager **NOT** the regular npm usually used. This is because pnpm is faster (the p is an acronym for "performant") and symlinks packages which were already installed in another project, saving disk space. If npm is already installed, pnpm can easily be installed by running `npx get-pnpm`
+
+**Docker or postgres:** We use postgreSQL as our database solution. For development, we choose to use docker to containerize our database, but on the VM, postgres runs on bare-metal. To start a postgreSQL server, either run `docker compose up -d` to start a docker container in the background, running a postgres instance with the correct credentials. If you are using a debian-based distro, you could also run `pnpm db:setup` (this command jsut runs the script in `./scripts/setup-db.sh`, so you could run that manually as well), which installs and sets up a database using the postgres deamon.
## Monorepo structure
@@ -14,17 +39,14 @@ packages/
db/ Prisma schema, generated client, migrations and seed
```
-The backend builds its GraphQL schema with [Pothos](https://pothos-graphql.dev) and
-the [Prisma plugin](https://pothos-graphql.dev/docs/plugins/prisma), which maps each
-GraphQL selection set to a matching Prisma `select`/`include`. Queries only touch the
-columns and relations the client actually asked for.
+The backend builds its GraphQL schema with [Pothos](https://pothos-graphql.dev) and the [Prisma plugin](https://pothos-graphql.dev/docs/plugins/prisma), which maps each GraphQL selection set to a matching Prisma `select`/`include`. Allowing queries to only touch the columns and relations the client actually asked for.
## Getting started
```bash
# Set up the database
# You can decide to run postgres as a service locally, or use the docker compose script provided to start a container
-pnpm db:setup # Runs a script to set up a bare-metal postgres instance with the correct setup
+pnpm db:setup # Runs a script to set up a bare-metal postgres instance with the correct setup (ONLY WORKS ON DEBIAN DISTROS, we recommend using docker compose for other distros, windows or macos)
# OR
docker compose up -d
@@ -40,244 +62,87 @@ pnpm db:generate
pnpm db:push
pnpm db:seed
-# run the frontend and backend together with live reload
+# run the frontend and backend together
pnpm dev
+
+# Run all these commands from the root of the project
```
Frontend: http://localhost:3000 ยท GraphQL API: http://localhost:3001
### Commands
-| Command | What it does |
-| ------------------------------------------ | ------------------------------------------------------ |
-| `pnpm install` / `pnpm install:all` | Install dependencies in all workspaces |
-| `pnpm dev` | Run frontend and backend concurrently with live reload |
-| `pnpm build` | Build all workspaces that define a build |
-| `pnpm typecheck` | Typecheck all workspaces |
-| `pnpm lint` / `pnpm format` / `pnpm check` | Lint, auto-fix format, and check formatting |
-| `pnpm db:setup` | Provision PostgreSQL natively on Ubuntu (see below) |
-| `pnpm db:generate` | Regenerate the Prisma client and Pothos types |
-| `pnpm db:push` | Push the Prisma schema to the database |
-| `pnpm db:migrate` | Create/apply a development migration |
-| `pnpm db:seed` | Seed the database |
-| `pnpm db:studio` | Open Prisma Studio |
-| `pnpm generate-routes` | Regenerate the TanStack Router route tree |
-
-### Provisioning the database on the Ubuntu VM
-
-`pnpm db:setup` runs [scripts/setup-db.sh](./scripts/setup-db.sh), which installs
-PostgreSQL natively on Ubuntu (apt-based systems only), enables the service, and
-creates the same user, password, and database as `docker-compose.yml`
-(`gspot`/`gspotter`/`gspot` on port 5432). It is idempotent and safe to re-run.
-On Ubuntu 24.04 it installs Postgres 16, matching the pinned compose image; on
-22.04 it falls back to the distro default. Afterwards, set the `DATABASE_URL` it
-prints in `packages/db/.env` and `apps/backend/.env`, then run `pnpm db:push`.
-
-## Below is the default TanStack Start readme, it will be replaced
-
-Welcome to your new TanStack Start app!
-
-# Getting Started
-
-To run this application:
-
-```bash
-pnpm install
-pnpm dev
-```
-
-# Building For Production
-
-To build this application for production:
-
-```bash
-pnpm build
-```
-
-## Styling
+| Command | What it does |
+| ---------------------------------------------- | ------------------------------------------------------ |
+| `pnpm install` / `pnpm install:all` / `pnpm i` | Install dependencies in all workspaces |
+| `pnpm dev` | Run frontend and backend concurrently with live reload |
+| `pnpm build` | Build all workspaces that define a build |
+| `pnpm typecheck` | Typecheck all workspaces |
+| `pnpm lint` / `pnpm format` / `pnpm check` | Lint, auto-fix format, and check formatting |
+| `pnpm db:setup` | Provision PostgreSQL natively on Ubuntu (see below) |
+| `pnpm db:generate` | Regenerate the Prisma client and Pothos types |
+| `pnpm db:push` | Push the Prisma schema to the database |
+| `pnpm db:migrate` | Create/apply a development migration |
+| `pnpm db:seed` | Seed the database |
+| `pnpm db:studio` | Open Prisma Studio |
+| `pnpm generate-routes` | Regenerate the TanStack Router route tree |
+
+### Styling
This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
-### Removing Tailwind CSS
+### Database interactions
-If you prefer not to use Tailwind CSS:
+This project uses the Prisma ORM to define the datbase schema (found in `./packages/db/prisma/schema.prisma`) and to provide type safe database interactions from the backend.
-1. Remove the demo pages in `src/routes/demo/`
-2. Replace the Tailwind import in `src/styles.css` with your own styles
-3. Remove `tailwindcss()` from the plugins array in `vite.config.ts`
-4. Remove `@tailwindcss/vite` and `tailwindcss` from `package.json`
-
-## Linting & Formatting
+### Linting & Formatting
This project uses [eslint](https://eslint.org/) and [prettier](https://prettier.io/) for linting and formatting. Eslint is configured using [tanstack/eslint-config](https://tanstack.com/config/latest/docs/eslint). The following scripts are available:
```bash
-pnpm lint
-pnpm format
-pnpm check
-```
-
-## Deploy with Nitro
-
-This project uses Nitro as a generic server adapter, so it can run on any Node-compatible host.
-
-```bash
-npm run build
-node dist/server/index.mjs
-```
-
-The build output is a self-contained Node server. To deploy, push the `dist/` directory to your host (Render, Fly.io, your own VPS, etc.) and run the server command above.
-
-For host-specific presets (Vercel, Netlify, Cloudflare, AWS Lambda, etc.) and tuning, see https://v3.nitro.build/deploy.
-
-## Routing
-
-This project uses [TanStack Router](https://tanstack.com/router) with file-based routing. Routes are managed as files in `src/routes`.
-
-### Adding A Route
-
-To add a new route to your application just add a new file in the `./src/routes` directory.
-
-TanStack will automatically generate the content of the route file for you.
-
-Now that you have two routes you can use a `Link` component to navigate between them.
-
-### Adding Links
-
-To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
-
-```tsx
-import { Link } from '@tanstack/react-router'
+pnpm lint # Runs eslint, does not fix trivial issues automatically
+pnpm format # Runs the prettier formatter
+pnpm check # Runs the prettier formatter in check mode, so will not write to any files
```
-Then anywhere in your JSX you can use it like so:
+### Deployment
-```tsx
-About
-```
-
-This will create a link that will navigate to the `/about` route.
-
-More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
-
-### Using A Layout
-
-In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you render `{children}` in the `shellComponent`.
-
-Here is an example layout that includes a header:
-
-```tsx
-import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
-
-export const Route = createRootRoute({
- head: () => ({
- meta: [
- { charSet: 'utf-8' },
- { name: 'viewport', content: 'width=device-width, initial-scale=1' },
- { title: 'My App' },
- ],
- }),
- shellComponent: ({ children }) => (
-
-
-
-
-
-
-
-
- {children}
-
-
-
- ),
-})
-```
+The deployment of both the backend and frontend is automated using the github action found in `./.github/workflows/deploy-to-vm.yaml`
-More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
+## Timeline
-## Server Functions
+Below is the timeline for our hand-ins, with the date and commit hash of the most recent commit at the time of hand-in, in case we update the repository between the time of handing in and someone reviewing our code
-TanStack Start provides server functions that allow you to write server-side code that seamlessly integrates with your client components.
+### 1st hand-in of project 2
-```tsx
-import { createServerFn } from '@tanstack/react-start'
+Handed in Oct 2nd
-const getServerTime = createServerFn({
- method: 'GET',
-}).handler(async () => {
- return new Date().toISOString()
-})
+Most recent commit hash at time of hand-in: [`efdbfa5`](https://git.ntnu.no/IT2810-H26/T09-Project-2/tree/efdbfa5be991e0bcf45a62d202b1e764935a077b)
-// Use in a component
-function MyComponent() {
- const [time, setTime] = useState('')
+### 2nd hand-in of project 2
- useEffect(() => {
- getServerTime().then(setTime)
- }, [])
+Handed in Oct 16th
- return
Server time: {time}
-}
-```
+Most recent commit hash at time of hand-in: [`TDB`](<>) (Will update if there is a more recent version in the future)
-## API Routes
+### 3rd hand-in of project 2
-You can create API routes by using the `server` property in your route definitions:
+Handed in TDB
-```tsx
-import { createFileRoute } from '@tanstack/react-router'
-import { json } from '@tanstack/react-start'
+Most recent commit hash at time of hand-in: [`TDB`](<>) (Will update if there is a more recent version in the future)
-export const Route = createFileRoute('/api/hello')({
- server: {
- handlers: {
- GET: () => json({ message: 'Hello, World!' }),
- },
- },
-})
-```
+### Final hand-in of project 2
-## Data Fetching
-
-There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
-
-For example:
-
-```tsx
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/people')({
- loader: async () => {
- const response = await fetch('https://swapi.dev/api/people')
- return response.json()
- },
- component: PeopleComponent,
-})
-
-function PeopleComponent() {
- const data = Route.useLoaderData()
- return (
-
- {data.results.map((person) => (
-
{person.name}
- ))}
-
- )
-}
-```
+Handed in TDB
-Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
+Most recent commit hash at time of hand-in: [`TDB`](<>) (Will update if there is a more recent version in the future)
-# Demo files
+## AI declaration
-Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
+### 1st hand-in:
-# Learn More
+The first hand-in was only our initial plan and consited of setting up tanstack start with a command, and a markdown file, and thus no AI was needed or used
-You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
+### 2nd hand-in:
-For TanStack Start specific documentation, visit [TanStack Start](https://tanstack.com/start).
+We have mostly used AI as a sparring partner in the development of this project, mainly focused on deployment and debugging. For deployment to the VM, GLM 5.3 NVFP4 running on NTNU's LLM servers was used to help generate the script setting up the postgres instance, and to create the deploy pipeline. As can be seen in the `.agents` folder, AI was also used to create more descriptive PR descriptions, but this skill was used with heavy human supervision, and often updated manually afterwards. AI was not used for generating much code, but rather used to help debug issues we were running into, and as a supplement to documentation when it proved lacking/hard to navigate (e.g. when using Pothos to get a DateTime in the GraphQL schema, we could not find any mention of the "expose" function without the expose helper (such as "exposeString" or "exposeFloat"), and thus used AI to figure out how to expose a DateTime object in the schema).
diff --git a/scripts/setup-db.sh b/scripts/setup-db.sh
index c124e0e..7805307 100755
--- a/scripts/setup-db.sh
+++ b/scripts/setup-db.sh
@@ -1,4 +1,7 @@
+# Generated by GLM 5.3 NVFP4
+
#!/usr/bin/env bash
+
set -euo pipefail
DB_USER=gspot