vubnguyen.com

A storybook instance is demo of created components by vujita-ui

Inspiration

This is a mono repo is inspired from t3 stack. The major deviation is using turborepo for a mono repo setup for future project extensions

I also want to be able to host my personal portfolio site and any packages that.

I may want to publish for future use in other projects, like

• eslint-config
• common utilities
• any ui libraries I may create

Installation

There are 2 prescribed way of running this repository, either with github codespaces or locally

github codespaces

Github codespaces can be running locally

• Install docker. Instructions on mac
• Install vscode
• Open in this folder in a devcontainers

You can also run it in the repository by creating a code space off a branch, or locally using devcontainer extension if you have docker installed

local setup

Install nvm, and run

  nvm install
  nvm use
  corepack enable
  corepack prepare pnpm@8.6.9 --activate
  pnpm install-completion # optional but will give you autocompletion

Install postgres version 14

Environment, node modules, and db sync

# Install dependencies (this should be done by initialization script)
pnpm i

# Configure environment variables.
# There is an `.env.example` in the root directory you can use for reference
cp .env.example .env

# Push the drizzle schema to your database
pnpm db:push

auth setup

• Discord: create a discord application and add client/secret to your .env file

Folder structure

.github
  └─ workflows
        └─ CI with pnpm cache setup
.vscode
  └─ Recommended extensions and settings for VSCode users
apps
  └─ vubnguyen
  |   ├─ Next.js 13
  |   ├─ React 18
  |   ├─ Tailwind CSS
  |   └─ E2E Typesafe API Server & Client
packages
  ├─ api
  |   └─ tRPC v10 router definition
  ├─ auth
  |   └─ Authentication using next-auth. **NOTE: Only for Next.js app, not Expo**
  ├─ config
  |   └─ Shared Tailwind & Eslint configs
  └─ db
  |  └─ Typesafe db calls using drizzle
  └─ vujita-ui
      └─ A ui library based on React/Tailwind/Class Variance Authority
      └─ a component library storybook
      └─ TBA....