Notes

Demo

Design System

Chromatic Visual Regression Testing

Tech Stack

• nx - Monorepo
• Next.js - React Framework
• Tailwind - CSS Framework
• Storybook - Component Library
• Chromatic - Storybook Hosting
• Vercel - Deployment
• Jest - Testing
• Cypress - E2E Testing
• ESLint - Linting
• Prettier - Code Formatting
• TRPC - API Framework

Structure

• The app is called songs.
• It has a feature library with some packages.

Note

There are more connections between apps and libs containers than are actually existing at runtime. The lines between components also show type-only compile time imports. It would be nice if nx could generate a diagram of the runtime connections (I think they are working on it).

A lot of these cannot be put into a separate repo since the types are declared via typeof on a runtime import. TRPC especially requires that you use typeof on runtime code to extract much more specific types than you can get from standalone type declarations.

TODO

• Write out e2e / integration tests
• Add perf checks / code coverage to CI/CD
• Make audio player a bit nicer looking

Observations

• Tailwind is more performant than css-in-js, but the verbose syntax is hard to get used to.
• Naming stuff in a monorepo is hard.
• I tried TRPC. I think I like it, but they could make their API a little more intuitive (too many cross imports).
• The security vulnerabilities upon running npm install are from storybook.
• The deprecation outputs upon running the shared-ui storybook are from storybook.

Getting Started

npm install
npm run dev # note if you want to run storybook, you may have to use node 16 instead of 18

# follow the prompt

These points cannot be easily mitigated until storybook updates their dependencies.

Understand this workspace

Run nx graph to see a diagram of the dependencies of the projects.