Simple post and comment web app with focus on infra rather than the app functionality itself. For more information see about project at the bottom.
- Node.js (>v22)
- Docker (>v27)
- Docker Compose (>v2.31)
npm run init-dev
For additional installation and how to run in development see:
Add following environment variables to CI/CD:
HEROKU_API_KEYHEROKU_APP_NAMEHEROKU_EMAILSENTRY_AUTH_TOKENSENTRY_ORGSENTRY_PROJECT
Add following environment variables to Heroku:
AUTH_SECRETCOOKIE_SECRETCSRF_SECRETDATABASE_URL- Has to be CockroachDB due to didn't want to keep k8s in separate branch... and no credits for cluster. If PostgreSQL is desired: change provider to
postgresqlinserver/prisma/schema.prisma, then deletemigrationsfolder, and then runnpm run dev:migrate. Note that migrate command requires running PostgreSQL database: modify docker composes to use PostgreSQL.
- Has to be CockroachDB due to didn't want to keep k8s in separate branch... and no credits for cluster. If PostgreSQL is desired: change provider to
NODE_ENV=productionSENTRY_AUTH_TOKEN
Work hours can be found here. They explain pretty well the flow of this project, and what has been done. Here is table of things that I want mention in somewhat categories.
| Global | Server - Client | Server | Client |
|---|---|---|---|
| Dockerized development environment with hotloads | tRPC for type-safe APIs | Prisma ORM for database management | React with TypeScript |
| Fully declarative Kubernetes deployment (development version only) | Schema validation via Zod | CockroachDB for scalable database (PostgreSQL removed while doing k8s conversion) | TailwindCSS for styling |
| CI/CD with GitHub Actions | Double CSRF | Sentry for monitoring and profiling | Infinite scrolling with virtualizer (TanStack) |
| Dependabot for dependency updates | Helmet for more secure HTTP | Rate limiting with Traefik (rate limit removed from Express while doing k8s conversion) | Code splitting and prefetching |
| CodeQL integration | Stress testing with k6 | Horizontal auto-scaling | Responsive and accessible UI with ShadCN components (utilizes radix-ui) |
| Husky and lint staged (Prettier and ESlint) | Site analyzing with Lighthouse | Env validation | File path based routing |
Functionality of the app can be simplified down to the following
| Non-logged user | User | Post | Comment |
|---|---|---|---|
| See any post or comment, but can't interact | Register and login | Create, like and unlike | Create, like and unlike |
| Only logger in user can create etc. posts and comments | Edit if creator | Edit if creator | |
| Delete if creator | Delete if creator or owner of post |
- Click
profileicon at footer > signup > enter email and password > changes to login modal > enter email and password used to signup - Click
plusicon at footer > enter title and content (make at least 3 posts) - Click
hearticon at one post > press it again to unlike - Click
pencilicon at one post > modify a bit and submit - Click
messageicon at one post > repeat steps 2, 3 and 4 for comments - Click
profileicon at footer - Click
expandicon at post you created comments on > select all > upmosttrashicon in comment table deletes all selected - Click
trashicon at some of the posts > delete it - Click
homeicon at footer > post has disappeared - Click
shutdownicon at footer > logs out - Posts and comments are now on readonly view