How to Create a Web App in 2024 Using a Modern Stack ( tRPC, React and Express)

Building Fullstack Web Apps with TER: Prioritizing Developer-Friendly Solutions

Creating web applications often feels overwhelming due to the vast array of tools and frameworks available. TER isn’t just another boilerplate; it’s a thoughtfully designed stack that emphasizes ease of use, speed, and efficiency. For developers looking for a streamlined workflow, TER delivers an optimal setup for building high-quality web applications without the usual complexity.

The Vision Behind TER

TER was built with one main purpose: to make developers’ lives easier. It offers a straightforward configuration, cutting-edge tools, and an emphasis on speed, helping developers stay productive and focused on building rather than debugging or configuring.

What Sets TER Apart from Other Stacks?

Stacks like T3 often rely on frameworks like Next.js for handling frontend and backend needs. While effective, this approach isn’t ideal for every scenario. TER intentionally excludes Next.js, opting instead for a model where the frontend can be compiled into static files. These files can then be hosted on object storage solutions like AWS S3, making deployment simpler and more flexible.

Key Benefits of This Approach:

• Versatile Deployment Options: Frontend assets can be hosted on any static hosting platform, avoiding the need for specialized setups.
• Designed for Web Applications: Unlike stacks optimized for SEO-heavy websites, TER is geared toward web apps like dashboards, internal tools, or applications where SEO isn’t a key concern. This allows developers to focus on functionality and user experience.

Why These Technologies?

The TER stack was curated to deliver a smooth, fullstack development experience while maintaining type safety and flexibility. Each component was chosen for its ability to simplify development without compromising power:

tRPC: Facilitates end-to-end type-safe communication between the frontend and backend, eliminating mismatched schemas and redundant validations.
Express: This lightweight framework for Node.js provides essential backend functionality with minimal overhead, giving developers complete control.
React: A powerful library for building interactive UIs, React complements TER’s focus on creating dynamic, user-friendly applications.
Drizzle ORM: Ensures robust, type-safe database interactions. Its integration with TypeScript aligns perfectly with TER’s philosophy of building reliable, maintainable applications.

TER demonstrates how thoughtful design and modern tools can create an efficient foundation for building web applications, delivering exceptional productivity for developers at every level.

Highlights of TER: A Comprehensive Toolkit for Fullstack Web Development

TER goes beyond being a simple collection of libraries. It includes essential features that address the common needs of modern web applications, from secure authentication to seamless data management.

• Secure JWT Authentication with HttpOnly Cookies: Ensures stateless and secure authentication by using cookies inaccessible to JavaScript, significantly reducing the risk of XSS attacks.
• External API Integration Examples: Demonstrates how to fetch data from APIs like Beers, Users, Movies, and Albums, making it easier to integrate third-party services into your application.
• Health Monitoring Endpoint: A built-in /health endpoint allows for straightforward server status checks, critical for production environments.
• Customizable Table Row Display: Lets users control how many rows are visible in data tables, enhancing usability for applications dealing with large datasets.

---

Why Drizzle Stands Out as an ORM

While Prisma has been a long-time favorite for its user-friendly design, scalability challenges in serverless environments pushed me to explore alternatives. The lack of optimized SQL queries and the overhead of the Prisma Rust query engine (which adds around 15MB to Lambda functions) became significant bottlenecks.

Drizzle emerged as a game-changer. Its TypeScript-first approach and SQL-level optimizations make it a better fit for TER, especially for serverless architectures. It’s leaner and more efficient, resolving connection pool issues without requiring paid add-ons like Prisma Accelerate.

Simplifying Development with npm Workspaces in a Monorepo

Past attempts to manage shared code between the frontend and backend using Git submodules or private npm packages proved cumbersome:

• Code Sharing Issues: Submodules complicated workflows with multiple repos in the same IDE, while npm packages moved the source of truth away from the main repository.
• Versioning Challenges: Aligning versions across repos was tedious with submodules, and tracking changes in npm packages was often confusing.
• Slow Development Workflow: A single feature required multiple pull requests across repos, adding unnecessary delays.

Switching to npm Workspaces centralized all code in one monorepo, simplifying version control, reducing PR overhead, and enabling seamless code sharing—all while keeping GitHub as the source of truth.

---

Developer-Centric Features in TER

TER is engineered to maximize developer productivity through intelligent choices:

• Type Safety Across the Stack: The combination of TypeScript and tRPC eliminates data type mismatches, ensuring smooth communication between frontend and backend.
• Lightning-Fast Development with Vite: Vite’s hot module replacement significantly speeds up frontend iterations.
• Extensibility at Its Core: The structure of TER allows developers to easily add routes, middleware, and components, offering a flexible starting point for any project.

---

Where TER Shines

TER’s tailored design makes it perfect for fullstack apps where SEO isn’t a primary concern:

• Internal Dashboards: Build administrative tools, analytics panels, or reporting dashboards.
• Data-Driven Applications: Handle large datasets efficiently with features like dynamic tables and robust API integrations.
• Rapid Prototyping: Ideal for MVPs or proofs of concept that require quick iteration without compromising quality.

---

Installation Made Simple

Setting up TER is designed to be as hassle-free as possible:

1. Create a Database: Set up a Postgres database named ter.
2. Configure Environment Variables: Update env.ts with your database credentials.
3. Install Dependencies: Run npm i from the root directory.
4. Apply Migrations: Use npm run push to set up the database schema.
5. Seed Data: Populate sample data with npm run seed.
6. Launch the App: Start the development server with npm run dev to run both the backend and frontend.

---

Explore TER

TER isn’t just another stack—it’s a thoughtfully crafted toolkit for developers who value efficiency and flexibility. By taking a different path from conventional stacks like T3, TER excels in scenarios where SEO is not a priority, focusing on high-performance web applications.

Check out the project here: TER GitHub Repository.

If you find TER helpful, consider starring the repo to support its growth! 🚀