Tech Stack Overview

This section will cover the frameworks/libraries I used for this project.

FRONTEND

React: A JavaScript library for building reusable UI components using a virtual DOM for efficient rendering, enabling scalable apps with a declarative syntax and strong ecosystem support.

Next.js: A React fullstack framework for server-side rendering (SSR) and static site generation (SSG), optimizing SEO and performance via hybrid rendering, file-based routing, and minimal-config deployment.

TypeScript: JavaScript with static typing to catch errors early, improve code clarity, and enhance IDE tooling for maintainable, collaborative codebases.

Tailwind CSS: Utility-first CSS framework styling HTML directly with prebuilt classes, enabling rapid, responsive designs without CSS bloat or context-switching.

shadcn/ui: Unstyled, accessible React UI components (buttons, modals) for Tailwind CSS customization, decoupling logic from design for brand flexibility.

Three.js: JavaScript 3D library for rendering interactive 3D graphics in the browser using WebGL, abstracting low-level APIs to simplify scenes, lighting, and animations. It is used with React-three-fiber for React integration along with Drei for additional abstractions. The binary background on this website is built with Three.js.

React-three-fiber: React renderer for Three.js enabling declarative 3D scenes with React components, integrating seamlessly with the React ecosystem and state management.

Drei: Helper library for react-three-fiber offering ready-to-use abstractions (e.g. controls, loaders, shaders) to accelerate 3D scene development with minimal boilerplate.

Zod: TypeScript-first schema validation library for parsing and validating data structures, ensuring runtime safety while syncing with static types for robust input handling.

BACKEND

Hetzner VPS: Affordable, high-performance virtual private servers in Europe offering full root access, predictable pricing, and flexible scaling for hosting apps, databases, and dev environments.

Docker: Containerization platform for packaging apps with dependencies into isolated environments, enabling consistent development, scalable deployment, and simplified DevOps workflows.

Nginx: High-performance web server and reverse proxy handling HTTP(S) traffic, load balancing, and caching, often used for securing apps, routing requests, and boosting scalability. It is used as a reverse proxy and rate limiting for the backend server.

bash: Unix shell and scripting language for automating tasks, managing systems, and chaining commands efficiently, foundational in DevOps, scripting, and terminal workflows. It is used for setting up the VPS as a production-ready environment, and updating the app.

Next.js: A React framework enabling backend API routes, SSR/SSG, and full-stack integration, simplifying hybrid app development with minimal setup.

PostgreSQL: Open-source relational database with ACID compliance, JSON support, and extensibility for complex queries and high concurrency.

Prisma ORM: TypeScript ORM for type-safe database access, schema management, and reduced SQL boilerplate with PostgreSQL integration.

Better-Auth: Authentication framework for passwordless/MFA workflows, offering prebuilt security, OAuth integration, and compliance-ready auth flows.

ESLint: Static code analysis tool enforcing coding standards and catching errors in JS/TS via customizable rules and IDE feedback.

Prettier: Opinionated code formatter automating style consistency (indentation, quotes) across languages to eliminate syntax debates.

Husky: Git hook manager automating pre-commit/push checks (linting, tests) to enforce code quality and block substandard code.

Lint-Staged: Runs linting/formatting only on staged files for faster pre-commit checks, paired with Husky for efficient workflows.