Skip to content
Yangshun Tay edited this page Oct 2, 2022 · 26 revisions

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

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 PostgreSQL database and update the DATABASE_URL field within the .env file.

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

Clone this wiki locally