Home

Tech Stack

Area	Choice	What is it
Monorepo	Turborepo	High-performance build system that allows you to break a repo into multiple smaller packages
Language	TypeScript	Statically typed JavaScript
View	React	Most popular UI library
App Framework	Next.js	React meta framework that has multiple ways of rendering
Styling	Tailwind CSS	Rapidly build modern websites without ever leaving your HTML
Data Fetching	React Query	A pretty sophisticated data fetching library
Auth	NextAuth.js	Authentication for Next.js, supports many OAuth options
Type Safety	tRPC	End-to-end typesafe APIs made easy
ORM	Prisma	Next-generation Node.js and TypeScript ORM
Database	PostgreSQL	Popular open source relational database

Development

Git

• main is release branch and should remain stable at all times
• Create feature branches for your in-progress features and using the format <username>/my-feature (doesn't have to be your GitHub username, just use something identifiable and be consistent about it)
• Commit messages should follow the Conventional Commits specification as much as possible
• Squash commits into a single commit before merging into main
• Delete your branch after merging into main

Editor

• VS Code is the recommended IDE due to it's superb support for TypeScript
• Install the following extensions for VS Code, or find the equivalents for your IDE:
  • Prettier - Code formatter
  • TypeScript Importer
  • Tailwind CSS IntelliSense
  • ESLint
  • Prisma
  • Stylelint
  • Code Spell Checker
  • Optional: Tailwind Docs
• Use Workspace settings as source of truth for VS Code

Directory Structure

TBD

Front End

Next.js

• For most imports, use ~/ which is an alias for the apps/portal/src instead of relative paths.

React

• Props should be Readonly
• Props should be sorted alphabetically
• Props should be destructured in the component function declaration

Data Querying Library

React Query.

Form Library

TBD

Back End

Data Model: Prisma

We use Prisma, which is an ORM for JavaScript/TypeScript applications. Make sure you have the Prisma VS Code extension installed, which gives you autocompletion and formatting of the .prisma files.

• Naming
  • Namespace/Prefix your models per project (e.g. ResumeSomething, OfferSomething, QuestionSomething).
  • enum values should be written using UPPER_SNAKE_CASE.
  • Look around and see the existing schema fields and try to be consistent about field naming, even across projects.
• Fields
  • Use camelCase for fields in schema.prisma. If you see some snake_case fields in Account, that's because of the requirements of NextAuth.js, and they are exceptions.
  • Use cuid() for ids, don't use autoincrement(). We don't want to reveal how many rows there are in a table.

Prisma Studio

In case you want to have an admin view of your database, run yarn prisma studio which will run an admin web app on http://localhost:5555.

Server API calls: tRPC

• userIds for creator fields should always come from the session, not from a parameter.
• Prisma doesn’t have ACL (access control list), so we need to manually implement permissioning in tRPC routing code.

Database

Set up your own local PostgreSQL database and update the DATABASE_URL field within the .env file.

Setting up

Run prisma migrate dev if it's your first time.

Changing schema

1. After you change schema.prisma, run prisma migrate. Prisma will generate migration files for you and make the changes in your local database.
2. Ping @yangshun to productionize any changes.

Auth

We're using NextAuth.js which has integrations with many auth providers for Next.js and is super handy. Most of the time you won't need to mess with authentication since it's already done. But if you need to, here's NextAuth.js' official demo site and the source code on GitHub.