Document: 02-tech-stack.md
Version: 1.0.0

Purpose

This document defines the official technology stack used by Rundown for all web development projects.

Standardizing the technology stack allows projects to remain consistent, reduces onboarding time, simplifies maintenance, and enables reusable solutions across multiple client projects.

Unless a project has specific technical requirements that justify an exception, every website developed by Rundown should follow the standards defined in this document.

Design Principles

The selected technology stack is based on the following priorities:

• Performance

• Scalability

• Maintainability

• Developer Experience

• SEO

• Security

• Cost Efficiency

• Open Source Preference

Frontend

Framework

Next.js

Why We Use It

• Excellent SEO capabilities through Server Side Rendering and Static Site Generation.

• Modern React framework with long-term ecosystem support.

• Built-in routing and image optimization.

• Strong developer experience.

• Large community and ecosystem.

• Excellent compatibility with AI-assisted development tools.

Alternatives Considered

• React + Vite

• Astro

• Nuxt

• SvelteKit

Next.js is selected because it provides the best balance between flexibility, performance, and ecosystem maturity for the majority of client projects.

Language

TypeScript

Why We Use It

• Static type checking.

• Better IDE support.

• Improved maintainability.

• Reduced runtime errors.

• Easier collaboration across teams.

JavaScript may be acceptable for prototypes or experiments, but production projects should use TypeScript.

Styling

Tailwind CSS

Why We Use It

• Utility-first workflow.

• Consistent design system.

• Faster development.

• Smaller production CSS.

• Excellent ecosystem support.

UI Components

shadcn/ui

Why We Use It

• Fully customizable.

• Accessible by default.

• No dependency on proprietary component libraries.

• Integrates naturally with Tailwind CSS.

• Components remain part of the project rather than being locked behind a package.

Animation

Animations should enhance usability rather than distract from content.

Standard Libraries

GSAP

Used for:

• Scroll animations

• Complex timelines

• Interactive experiences

• Landing pages

Framer Motion

Used for:

• Component animations

• Page transitions

• Micro-interactions

Lenis

Used for:

• Smooth scrolling

React Three Fiber

Used only when projects require interactive 3D experiences.

Content Management System

Payload CMS

Payload CMS is the official CMS for Rundown projects.

Why We Use It

• Self-hosted.

• Built with TypeScript.

• Excellent Next.js integration.

• Flexible schema design.

• Built-in authentication.

• Complete ownership of data.

• No recurring SaaS licensing costs.

Payload should be used whenever clients require content management capabilities.

Database

PostgreSQL

Why We Use It

• Reliable relational database.

• Excellent performance.

• Mature ecosystem.

• Strong support for structured business data.

• Suitable for ecommerce and CMS-driven applications.

Each client project should use its own database within a shared PostgreSQL server whenever appropriate.

File Storage

Cloudflare R2

Media files should be stored in Cloudflare R2 rather than on the application server.

Benefits

• Low storage costs.

• No egress charges.

• Improved scalability.

• Easy backup and migration.

Only metadata and file references should be stored inside PostgreSQL.

Authentication

Authentication should be handled through Payload CMS whenever possible.

Role-based access should be implemented for:

• Administrators

• Editors

• Clients

Email

Preferred providers:

• Resend

• Brevo

Email should be used for:

• Contact forms

• Password resets

• Notifications

• Transactional messages

Payments

Supported payment providers:

• Razorpay

• Stripe

• HDFC Smart Payment Gateway

The selected provider should be based on project requirements and client preferences.

Search

Default projects should rely on Payload CMS.

Projects requiring advanced search capabilities should implement:

Meilisearch

Analytics

Every project should include:

• Google Analytics

• Microsoft Clarity

Additional analytics tools may be introduced based on project requirements.

Deployment

Applications should be containerized using Docker.

Deployment should be managed through Coolify.

Hosting should be provided using a Linux VPS unless project requirements justify alternative infrastructure.

Hosting

Preferred infrastructure:

• Hostinger VPS

• Ubuntu LTS

• Docker

• Coolify

• Nginx Reverse Proxy

Cloudflare should be used for DNS, SSL, CDN, and caching whenever practical.

Version Control

All projects must use Git.

Repositories should be hosted on GitHub.

Every project should maintain:

• Main branch

• Development branch

• Feature branches

Detailed branching strategies are documented separately.

Recommended Project Architecture

Frontend

↓

Next.js

↓

Payload CMS

↓

PostgreSQL

↓

Cloudflare R2

↓

Cloudflare CDN

Guiding Principle

The official technology stack should remain stable.

New technologies should only be introduced when they provide measurable improvements in performance, maintainability, developer experience, or operational efficiency.

Technology should be adopted deliberately rather than in response to trends.