voi: A TypeScript repository from Sieutoc

Made by ⚡Sieutoc

Important

Work in progress, breaking changes are expected!

Features

Next.js 14
TypeScript
ESLint
Prettier
Shadcn UI with Tailwind CSS
Postgresql with Prisma
Magic link login with Next-Auth

Demo

https://voi.up.railway.app

Getting Started

One-click Deploy

Note

Currently the Dockerfile does not work well, so the template still uses the GitHub as source. If you could help, please suggest me a way. Thanks in advance.

Normal Installation

You need at least one Postgresql instance up and running.

Then you can deploy like a simple Next.js app, there are lot of tutorial on Vercel, Netlify etc.

The environment variables you need:

NEXTAUTH_SECRET=topsecret
NEXTAUTH_URL=https://yourdomain.com
DATABASE_URL=postgres://....

SMTP_USER=yoursmtpuser
SMTP_PASSWORD=yoursmtppass
SMTP_HOST=yoursmtpserver
SMTP_PORT=587

For Development

We use pnpm package manager. Get it here.
Make sure Docker up and running.
If your Docker account has 2FA enabled, you have to create a Personal Access Token and login before:
- Follow this guide.
- Login with docker login --username <your-username>

Install dependencies

cd your-project
pnpm install

Setup environment variables

For the first time, you need some default environment variables:

cp .env.example .env

Then, run the development server:

pnpm dev

Setup Prisma

NOTE: The dev server need to be running, because we need Postgres instance.

Sometimes, for example in fresh database situation when you have just started:

pnpm prisma migrate dev

Create New UI Component

We use shadcn-ui, and create 2 helper scripts for you:

# for adding new component
pnpm ui:add <compnent-name>

# for checking diffs
pnpm ui:diff <component-name>

Start developing!

Open http://localhost:3000 with your browser and start developing.

Good to know

This project uses App Router feature.
We try to take adventage of Next.js's ecosystem, thus most of the features here are built on top of Next.js best practices.
We use storybook for UI components preview, it will automatically run with pnpm run dev

Deploy with Docker

Prerequisites

Docker
Docker Compose
PostgreSQL 16+
SMTP Credentials

Setting up

Create docker-compose.yaml file

Create a voi folder and copy the minimal content of this template below:

version: "3.8"
name: voi

services:
    postgres:
        container_name: voi-postgres
        image: postgres:16-alpine
        restart: always
        ports:
            - "5432:5432"
        volumes:
            - data:/var/lib/postgresql/data
        environment:
            POSTGRES_DB: postgresdb
            POSTGRES_USER: postgresuser
            POSTGRES_PASSWORD: yourpostgrespassword

    app:
        container_name: voi-app
        image: sieutoc/voi:latest
        restart: always
        ports:
            - "80:3000"
        environment:            
            # Needed for authentication
            NEXTAUTH_SECRET: topsecret
            NEXTAUTH_URL: http://localhost:3000

            # Connection string to the PostgreSQL database
            DATABASE_URL: postgres://postgresuser:yourpostgrespassword@db:5432/postgresdb

            # From which account e-mails will be sent
            EMAIL_FROM: hi@yourdomain.com

            SMTP_USER: username
            SMTP_PASSWORD: password
            SMTP_HOST: smtp.yourdomain.com
            SMTP_PORT: 587

            # Extra
            PROJECT_NAME: Voi
    
volumes:
    data:

The Docker Compose file above defines two services: postgres and app. In case you're using an external Postgres database, remove the db service and replace DATABASE_URL environment variable with your connection string.

Pull the images and run

Open your favorite terminal, navigate to voi folder and run

docker compose pull
docker compose up -d

You can find the logs by using docker-compose logs app. The message http server started on :3000 means everything is ok and you're ready to go.

Just open your favorite browser and navigate to http://localhost. You should see a voi app.

Congratulation! 🎉

getsieutoc/voi