This project is hosted on ugentsailing.be

Follow these instructions for setting up a development environment.

1. Install asdf.
2. Add the required asdf plugins: sh .asdf-plugins.
3. Use these plugins to install the dependencies: asdf install.
4. Run asdf reshim.
5. Add $HOME/.asdf/shims to your $PATH.

To run the code, first you need to fill out create the necessary environment variables. Start with making a copy of the example-dev.env.local file and renaming it to .env.local.

Let's start easy, first create the auth_secret. Next-auth has a cli tool for this:

pnpx auth secret --copy

Paste this value as AUTH_SECRET.

If you want to host this on your own website, edit AUTH_URL. If you run in dev mode, this is set to http://localhost:3000 and should work in this tutorial.

If you have docker installed you can use the following command to spin up a basic postgres database:

docker compose -f docker-compose.dev.yml up -d

If for some reason you don't want to use docker, you can follow these instructions.

If you haven't set up postgres yet, you can use the tutorial from geeksforgeeks.

Next create a table for this project:

CREATE USER ugs_site WITH PASSWORD '*****';
CREATE DATABASE ugs_site WITH OWNER = ugs_site;
GRANT ALL PRIVILEGES ON DATABASE ugs_site TO ugs_site;

For development purposes, prisma allows to test migrations on a shadow database, configure a shadow database as well:

CREATE USER ugs_site WITH PASSWORD '*****';
CREATE DATABASE ugs_site WITH OWNER = ugs_site;
GRANT ALL PRIVILEGES ON DATABASE ugs_site TO ugs_site;

Now you can configure the DATABASE_URL and the SHADOW_DATABASE_URL.

Currently we have github and discord authentication providers configured. Go to the discord developers portal and create a new app. Fill in the name and press create. Now choose oauth2 and copy the client ID, this is the AUTH_DISCORD_ID.

Reset the client secret and copy it to AUTH_DISCORD_SECRET. Add the following url to the redirects: http://localhost:3000/api/auth/callback/discord.

Now the discord login should work.

A very simular process is done for github. Let's surf to the github developers settings. Create a new oauth app. Choose a name, use http://localhost:3000 as Homepage URL, and set http://localhost:3000/api/auth/callback/discord as Authorization callback URL.

Copy the client ID to AUTH_GITHUB_ID and create a new secret and copy it as AUTH_GITHUB_SECRET.

First time running you will need to install all packages. Run the following:

pnpm install

Next run the migrations and setup the database:

pnpm run db:migrate

Now you are ready to run the development server:

pnpm run dev

Open http://localhost:3000 with your browser to see the result.

Found an error, want to edit some code, improve this project. Please open an issue, or fork and submit a pull request.

The backend is written in zenstack. The code is auto generated from the models/schema.zmodel file, using the npm run db:generate command.

An OpenAPI spec is also generated to models/prisma/openapi.json.

To create a new table and expose it in the API, simply edit models/schema.zmodel.

To create migrations for the database, you can use pnpm run db:makemigrations, you can find the newly created migration file in models/prisma/migrations/. Check the migrations and if you are happy, run pnpm run db:migrate which will apply the migrations.

After running all that, your newly created model will be availble under /api/model/rest/<model-name>.

Zenstack automatically prevents users from reading, updating, creating an deleting entries. In order to allow users to update/create entries, add the following code:

@@allow("create,update,delete", auth().roles?[role.name == "role-name"])
@@allow("read", true)

The most important roles are found here:

The full list of currently available roles can be found at models/prisma/migrations/20251027002933_roles/migration.sql.

The full Zenstack Documentation can be found here.

Next-js is used for the frontend rendering. Next-js also hosts the api, which is generated from the zenstack model.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

Zenstack is used to handle all database and backend related setup.

The Zenstack schema is used to create the necessary tables in the database. Zenstack limits crud operations to users which are allowed to perform the operation. Zenstack also allows to generate routes for all models.

• Zenstack Documentation

Nextauth is a flexible framework which implements authentication of users. It allows to handle multiple login systems simultaniously and provides interfaces to react and prisma (zenstack is built on top of prisma).

• Auth.js Documentation