Serieslist

Keep track of your series and seen episodes.

The series are automatically imported from The Movie Database (TMDB).

Tech stack

The goal of the tech stack is to be as fully statically typed as possible, all the way from the database to the front-end, while being as simple as possible. pnpm and nx are used to manage the multiple workspaces.

The front-end is an SPA with server-side rendering:

• React
• Vite, vite-plugin-ssr
• Apollo Client
• Radix UI
• Vanilla Extract
• React Hook Form
• GraphQL Code Generator
• Vitest, React Testing Library

The back-end is a GraphQL API with full type safety:

• Node
• Fastify, GraphQL Yoga, Pothos GraphQL
• Drizzle ORM
• PostgreSQL

And of course, all code is checked with:

• TypeScript
• ESLint
• Prettier

Finally, the project is continuously deployed to a DigitalOcean droplet with the help of:

• Docker
• GitHub Actions
• Caddy

Set up

Requirements

• Node.js
• pnpm
• See the required versions in package.json, engines field

git clone https://github.com/JoosepAlviste/serieslist.git

pnpm install
./bin/generate-secret-token.sh

Next, generate a new TMDB API token and add it into the .env file. Make sure to check the rest of the .env file for any other variables that should be updated.

Run the project in development mode

First, run the Redis and database containers and migrate the database:

docker-compose up -d
pnpm migrate
# Migrate the test database
pnpm migrate:test

Then, run the application (both the API and the web application):

pnpm start

For more specific information about the webapp and the API, check out their respective READMEs.

The development server is accessible at http://localhost:3000.

File structure

Both the API and the webapp follow a similar file structure where the folders are split into features. The src folders contain some general, "global" files, while the src/features folders contain feature-specific code.

Packages

These are the types of packages in the packages folder:

• core-: Packages that provide reusable logic to be used in all other packages
• feature-: Packages containing business logic
• util-: Utilities and pure functions that don't usually have any framework-specific code

Generating a new package

A new package can be generated with:

pnpm generate:package

Production

The project is deployed to a DigitalOcean droplet and is continuously deployed with GitHub Actions whenever anything is merged to master.

In production, the API and the webapp are run inside Docker like so:

docker-compose -f docker-compose.production.yml up

Neon is used as a managed PostgreSQL service.

The pipeline builds Docker images, pushes them to the GitHub registry, SSH-es into the server, and pulls the images.

Sentry

Error monitoring in Sentry requires setting up a few environment variables:

• API_SENTRY_DSN: The API project DSN
• VITE_APP_SENTRY_DSN: The webapp project DSN
• SENTRY_ORG
• SENTRY_PROJECT
• SENTRY_AUTH_TOKEN: Generate from https://sentry.io/settings/account/api/auth-tokens/, requires the project:releases and org:read scopes

E2E tests

There are some end-to-end tests, but they are still a work in progress.

First, migrate the test database:

pnpm migrate:test

Then, run the e2e tests:

# Install the playwright dependencies if they haven't been yet
(cd apps/e2e && pnpm dlx playwright install chromium --with-deps)
pnpm test:e2e