Todo

Below are some personal TODOs I'd like to complete on this project before moving on to other things.

actions:

• add search input/filters in posts page
• investigate use of next/image
• tidy and improve Pagination and IconButton components
• add test file for all utils e.g. src\server\utils\s3.ts
• consider how loading states are handled
• consider how auth walls are handled
• consider how api errors are handled
• final sweep of the code to ensure everything is neat and tidy

---

About

This is my dream stack. It's my personal iteration on/flavour of the T3 stack. I've experimented, taken from various other public OSS projects, pulled snippets of code from various places, and written a lot myself. Finally landing upon the current configuration you see here as my preferred setup.

Tech-stack

• NextJS - A React framework that is ahead of the rest and has proven itself over the years and come out on top.
• TypeScript - For type safety and prop type definition.
• MySQL - A tried, tested and battle hardened database.
• Drizzle ORM - A bleeding edge TypeScript ORM, designed with maximum type safety in mind.
• tRPC - End-to-end typesafe APIs made easy.
• Tailwind - A composable, utility-first CSS framework.
• class-variance-authority - For implementing and maintaining a Tailwind design system and component library.
• Storybook - For development and testing of UI components.
• Jest - For unit testing.

VSCode

This app was built with VSCode, and as such contains some configuration in the .vscode folder.

Plugins

• ESLint and Prettier - both plugins required for compatibility with the eslint-config-prettier dependency
• Run current test (optional)
• Code Spell Checker (optional)

Patterns

This app is opinionated. It implements some code and design patterns that I love.

• Atomic design system - In the src/ui folder, you'll see the components subdivided into atoms/, molecules/, organisms/ etc. This is based on the atomic design system

• page/screen separation - In this app you will find the src/pages to be logic heavy, importing all the necesary hooks and configuring all the relevant business logic. And you will find the src/screens to be light on logic but heavy on UI.

• Schema folder - Various schemas that are shared by the serverside and clientside are stored in the src/schema folder. These schemas handle things like the db models and form/api input validation.

• Utils folders - There are 3 folders for utils in the app:

  • src/utils/ - isomorphic utils that are shared across the stack
  • src/server/utils/ - serverside only utils
  • src/client/utils/ - clientside only utils

• Import order - Modules are typically imported in this order: dependency, aliased, relative. for example:

  import one from "one"; // 1st
  
  import two from "@/utils/two"; // 2nd
  
  import three from "./three"; // 3rd

• PathNames - all of the nextjs pages that can be found in the src/pages/ folder are also added to an enum in the src\client\utils\links.ts file, which is imported when ever a page link or redirect is required.

Service providers

After experimenting with many service and hosting providers, I found the following to be the best combo I could find for ease of use, price, reliability and dev experience:

• Vercel - For SSR and static hosting of the Frontend next app.
• PlanetScale - For an infinitely scalable MySQL database.
• Cloudflare - For S3 compatible object storage.
• MailJet - For sending magic link authentication emails.
• Chromatic - For hosting Storybook builds and managing UI changes.

Get started

1. Install

npm i

2. Copy and fill secrets

cp .env.example .env

NEXTAUTH_SECRET can be generated by running openssl rand -base64 32

3. Generate the MySQL schema

npm run db:generate

4. Start developing

# For the next app:
npm run dev
# For the storybook ui:
npm run storybook

Database

To run this app locally you'll need to install MySQL, and optionally the MySQL Workbench:

https://dev.mysql.com/downloads/

Local network

The npm run dev development script is made available on the local IP, so it can be easily be tested on other devices that are connected to the same network.

You can find the local IP by running ipconfig (on Windows) in the command line.

ipconfig

Then look for the Wireless LAN adapter Wi-Fi section under the IPv4 Address section.

Be sure to update the NEXT_PUBLIC_SITE_URL in the .env file too!

Object Storage

Local emulator

I've yet to find a local emulator for s3 compatible object storage, that's currently all that's missing to make this stack a 100% local dev experience.

There are several possible solutions when using Docker, so that may be necessary. However, Docker is currently NOT configured.

Cloudflare CORS

Cloudflare requires you set CORs rules. These rules can be added in the Cloudflare dashboard under your bucket settings tab.

[
  {
    "AllowedOrigins": ["http://localhost:3000", "http://yourdomain.com"],
    "AllowedMethods": ["GET", "PUT"],
    "AllowedHeaders": ["*"]
  }
]