My Preferred Go, React with TypeScript, and PostgreSQL Project Environment

Welcome back to Rig & Code, the official blog of EMSERO! I’m Brian Brown, the founder of EMSERO. In my last post, I introduced this blog as a space to share insights from my journey. Today, I’m diving into a practical topic: my preferred project environment for Go, React with TypeScript, and PostgreSQL, refined through years of building secure, scalable applications.

Why Your Environment Matters

A well-organized project environment is crucial for efficient, high-quality software. When working with Go for backends, React with TypeScript for frontends, and PostgreSQL for data management, my environment ensures I can focus on solving problems—not wrestling with tools. Here’s what I use and how I organize my projects.

My Go-To Tools

I rely on a curated set of tools that streamline development with Go, React with TypeScript, and PostgreSQL:

• Editor: I use Visual Studio Code (VS Code) as my primary code editor. Its support for Go (with the Go extension), TypeScript (built-in), and PostgreSQL (via SQL extensions) makes it ideal for this stack. Features like integrated terminals, Git integration, and workspace management streamline my workflow.

• Backend: I use Go for building robust, performant APIs. Its simplicity and concurrency features are perfect for handling high-throughput systems.

• Frontend: React with TypeScript powers my dynamic, type-safe web interfaces. TypeScript’s static typing reduces bugs, and React’s component-based architecture speeds up development.

• Database: PostgreSQL is my go-to relational database for structured data, offering reliability, advanced querying, and scalability.

• Version Control and CI/CD: Platforms for robust code hosting, paired with a CI/CD tool for automated pipelines, streamline workflows from development to deployment.

• Containerization and Kubernetes: A containerization tool for consistent environments and a Kubernetes package manager for efficient deployments, vital for distributed systems.

• Code Quality: A static analysis tool to catch issues early and maintain high standards.

• Environment Management: I use direnv to automatically manage environment variables per project directory. It loads and unloads variables (like database URLs or API keys) as I navigate folders, keeping my setup clean—crucial for juggling multiple projects.

• Build Automation: Make files are my go-to for automating repetitive tasks. I define commands like make build, make test, and make run in a Makefile, simplifying workflows and ensuring consistency across environments.

This toolkit helps me tackle projects with Go, React with TypeScript, and PostgreSQL, balancing security, scalability, and agility.

My Folder Structure

A clear folder structure keeps projects organized, especially for complex systems. Here’s my streamlined layout, tailored for Go, React with TypeScript, and PostgreSQL, and designed to work seamlessly with VS Code, direnv, and Make files:

• /cmd: Entry points for Go applications, containing main packages for different binaries (e.g., API server).

• /pkg: Reusable Go packages, such as database helpers or API utilities, shared across the project.

• /web: React with TypeScript source code for the frontend.

  • /web/src: React components, views, and TypeScript files.

  • /web/public: Static assets (e.g., images, fonts).

• /conf: Configuration files, with environment variables managed by direnv, and database connection settings for PostgreSQL.

• /tests: Test files, mirroring the structure (e.g., /tests/cmd, /tests/web).

• /docs: Documentation (API specs, diagrams).

• /deploy: Deployment configs (Kubernetes manifests, CI/CD scripts), with Make files for deployment tasks.

• /data: PostgreSQL schemas and migrations.

• /build: Build artifacts, generated via Make commands.

• .envrc: At the project root, a direnv file to load environment variables (e.g., PostgreSQL connection strings, API keys).

• /Makefile: At the root, a Makefile with commands like make build-cmd, make start-web, and make migrate-db.

This structure scales well. For example, in a project for an e-commerce platform, I built a Go API in /cmd/api to manage product data stored in PostgreSQL, with shared database helpers in /pkg/db. The React with TypeScript frontend lived in /web/src to display the catalog, and migrations in /data managed the database schema. Using direnv, I set project-specific variables in .envrc (loaded from /conf), and a Makefile automated API builds and database migrations. In VS Code, I leveraged its integrated terminal to run Make commands and its Git integration to manage commits, saving hours when a tight deadline loomed and letting me focus on optimizing the system’s performance under pressure.

Why This Works for Me

I’ve built systems for a variety of applications, and a disciplined environment ensures I meet high standards for security and performance. VS Code’s flexibility allows me to switch seamlessly between Go, TypeScript, and SQL queries for PostgreSQL—like optimizing an e-commerce catalog—while its extensions ensure code quality alongside my static analysis tool. Tools like direnv keep sensitive variables isolated—vital for secure data handling—while Make files standardize processes, reducing errors during deployments. For startups, this structure enables rapid iteration without sacrificing quality. For enterprises, it supports scalability and maintainability—key for long-term success.

What’s Next?

What’s your go-to setup for Go, React with TypeScript, and PostgreSQL projects? Share your favorite tools or folder structure in the comments—I’d love to hear your approach! Or reach out at info@emsero.com to discuss how I can help with your next project.

— EMSERO