DEV Community: Alex Gonzalez

I stopped setting up TypeScript APIs from scratch — here's what I do instead

Alex Gonzalez — Wed, 18 Mar 2026 10:56:37 +0000

Every new project starts the same way.

Open terminal. mkdir new-project. And then... 2 days of configuration before writing a single line of business logic.

After 8 years building APIs professionally — across startups and companies — I realized I was solving the same problems every single time:

TypeScript strict mode setup that actually works
JWT auth with refresh token rotation
A folder structure that doesn't fall apart at scale
Docker that works the same on every machine
CI/CD that doesn't take half a day to configure

So I stopped. And I packaged everything into a boilerplate I actually use in production.

What the stack looks like

After trying many combinations, this is what I landed on:

Fastify over Express — it's faster, has better TypeScript support out of the box, and the plugin system is genuinely good once you understand it.

Prisma over raw SQL or other ORMs — the DX is excellent and the generated types save hours of manual typing.

Zod for validation — schema-first validation that integrates cleanly with TypeScript. No more runtime surprises.

Vitest over Jest — faster, same API, zero config with TypeScript.

The folder structure

This is the part most boilerplates get wrong. Everything dumped in a flat src/ folder doesn't scale.

src/
  config/       # Zod-validated env vars, constants
  modules/      # Feature modules
    auth/       # routes, controller, service, schema
    users/      # routes, controller, service, schema
  middlewares/  # error handler, auth guard, rate limiter
  plugins/      # Fastify plugins (Prisma, JWT)
  utils/        # AppError, response helpers, logger
  app.ts
  server.ts

Each module owns its routes, controller, service and validation schema. Adding a new feature means adding a new folder — nothing else changes.

Auth that actually works in production

Most boilerplates ship with basic JWT. This one has:

Access token (short-lived) + refresh token (long-lived)
Refresh tokens stored in DB and rotated on every use
Role-based access control: authenticate() and authorize(ROLES.ADMIN) guards
Passwords hashed with Node.js native scrypt — no bcrypt dependency

// Protecting a route is two lines
fastify.get(
  '/admin/users',
  { preHandler: [authenticate, authorize(ROLES.ADMIN)] },
  usersController.findAll
)

Error handling that doesn't leak internals

Centralized error handler with a custom AppError class:

// Throw anywhere in your code
throw new AppError('User not found', 404)

// Consistent response format everywhere
// { success: false, message: 'User not found', statusCode: 404 }

Zod validation errors are also caught and formatted automatically — no more unhandled validation crashes.

From zero to running API in 4 commands

cp .env.example .env
docker compose up db -d
npx prisma migrate dev
npm run dev

That's it. PostgreSQL running in Docker, migrations applied, API live on localhost.

CI/CD included

GitHub Actions pipeline with 4 stages:

Lint — ESLint + Prettier
Test — Vitest + Supertest integration tests
Build — TypeScript compilation check
Docker — multi-stage build (builder + alpine runner, non-root user)

Push to main and everything runs automatically.

The result

38 files. Zero any types. Strict TypeScript throughout. Consistent response format. Graceful shutdown. Pino logger with request ID tracing.

Everything I wished existed when I started my first project.

If you want to skip the setup and start with this foundation, I packaged it here: [link to your Gumroad product]

Or just steal the ideas — either way, I hope it saves you 2 days.

Introduction to Web Development: Navigating the Digital Creation Space

Alex Gonzalez — Tue, 02 Apr 2024 19:34:28 +0000

Web development stands as the backbone of the internet, a dynamic field that encompasses the creation, design, and management of websites and web applications. It's the craft that turns complex codes into the visual and interactive experiences that fill our screens. Whether you're a curious beginner eager to dive into the digital creation space or a professional looking to refine your knowledge, understanding the fundamentals of web development is essential. This introduction aims to guide you through the basics, tools, and current trends in web development, offering a solid foundation to start or enhance your journey in this fascinating field.

Understanding the Core of Web Development

Web development can be divided into two main categories: front-end and back-end development, with a third, overarching category known as full-stack development.

Front-end Development: This area is concerned with the part of the website that users interact with directly. Front-end developers focus on designing and developing the layout, navigation, graphics, and overall aesthetics of the website using technologies like HTML, CSS, and JavaScript.
Back-End Development: Back-end development deals with the server side of a website, where all the data processing happens. It involves creating and maintaining the technology needed to power the components which enable the user-facing side of the website to exist in the first place. This includes databases, servers, and applications. Languages commonly used in back-end development include PHP, Ruby, Python, and Node.js.
Full-Stack Development: Full-stack developers are jacks-of-all-trades in web development, with expertise in both front-end and back-end technologies. They are capable of creating a complete web application from scratch.

Tools and Technologies

The world of web development is always evolving, with new tools and technologies continually emerging to make the development process more efficient and powerful. Some of the essential tools for web developers include:

Version Control Systems like Git help developers track and manage changes to a project’s codebase, facilitating collaboration among team members.
Frameworks and Libraries such as React (for front-end) and Django (for back-end) provide pre-written code to help developers build applications faster and with more robust features.
Development Environments and Editors like Visual Studio Code and Sublime Text offer powerful coding tools tailored for web development, including syntax highlighting, code completion, and debugging features.

Trends and Best Practices

Staying updated with current trends and best practices is crucial in the fast-paced world of web development. Responsive design, ensuring websites work well on various devices and screen sizes, is now a standard. Progressive Web Apps (PWAs) are gaining traction for their ability to provide a user experience closer to that of native apps. Web accessibility is also a critical consideration, making sure websites are usable for people with disabilities.

Moreover, the rise of artificial intelligence (AI) and machine learning is starting to make its mark on web development, from automating certain tasks to creating more personalised user experiences.

Getting Started

The best way to learn web development is by doing. Here are a few steps to get you started:

Learn the Basics: Start with HTML, CSS, and JavaScript. There are numerous free resources online, such as Codecademy, freeCodeCamp, and W3Schools, where you can learn these skills.
Build Projects: Apply what you've learned by building projects. Start simple with a personal portfolio site and progressively build more complex applications.
Explore Further: Once you're comfortable with the basics, start exploring more advanced topics, such as frameworks, back-end development, or even full-stack development.
Join a Community: Web development has a vast and supportive community. Join forums like Stack Overflow, Reddit's web development subreddit, or local meetups to learn from others, get advice, and stay updated on the latest trends.

Web development is a constantly evolving field, with new tools, technologies, and best practices emerging all the time. It requires a commitment to lifelong learning but offers a rewarding and creative career path. Whether you're interested in front-end, back-end, or full-stack development, there's a place for you in the world of web development.

Conclusion

Web development is a continually changing field that requires a passion for learning and adaptation. By understanding its fundamentals, mastering the tools and technologies, and staying abreast of trends and best practices, anyone can embark on a rewarding journey into web development. Whether your goal is to become a professional developer or simply to explore the digital creation space, web development offers a versatile platform to bring your ideas to life.

Comment your thoughts about Web Development!

Happy Coding! 🚀

Introduction to JavaScript: Empowering Web Development with Interactivity

Alex Gonzalez — Mon, 25 Mar 2024 14:39:57 +0000

JavaScript is a cornerstone of modern web development. It's a versatile programming language that enables developers to add interactivity, dynamic behavior, and functionality to web pages. Whether you're building a simple website or a complex web application, JavaScript is essential for creating engaging user experiences on the web.

What is JavaScript?

JavaScript is an interpreted, high-level, dynamically typed programming language. Unlike HTML and CSS, which are used to define the structure and style of a web page, respectively, JavaScript is used to add behavior and dynamic functionality to web pages. This includes things like form validation, animations, DOM (Document Object Model) manipulation, user interaction, and much more.

Why Learn JavaScript?

Frontend Development: JavaScript is the primary language for frontend web development. It's used to create dynamic user interfaces, handle user events, and communicate with servers to fetch and display data.
Backend Development: With the advent of Node.js, JavaScript can now be used for server-side development as well. This means that developers can use JavaScript for both frontend and backend tasks, streamlining the development process.
Versatility: JavaScript is not limited to web browsers. It's used in a variety of environments, including mobile app development (using frameworks like React Native), game development (using libraries like Phaser), and even serverless computing (using platforms like AWS Lambda).
Popularity and Demand: JavaScript consistently ranks as one of the most popular programming languages in the world. Learning JavaScript opens up a wide range of job opportunities in the tech industry.

Basic Syntax of JavaScript

JavaScript follows a syntax similar to other programming languages, making it relatively easy to learn for those who already have programming experience. Here's an example of basic JavaScript code:

// Definition of a function
function functionName(propertyName) {
    return "Hello, " + propertyName + "!";
}

// Function call and output
console.log(functionName("World"));

Comments: These can be added with // for a single line or /* */ for multiline comments.
Functions: Defined using the function keyword.
Variables: Declared using var, let, or const.
Console: Used to print information to the browser's console.

Basic Concepts and Key features of JavaScript

Variables and Data Types: JavaScript supports various data types such as strings, numbers, booleans, arrays, and objects. Variables are used to store and manipulate data.
Functions: Functions are blocks of reusable code that perform a specific task. They allow developers to organize code into manageable chunks and make it more modular and reusable.
Control Flow: JavaScript provides constructs like if-else statements, loops (for, while), and switch statements for controlling the flow of execution based on conditions.
DOM Manipulation: The Document Object Model (DOM) represents the structure of an HTML document as a tree-like structure. JavaScript can manipulate this structure, allowing developers to dynamically update the content and style of web pages.
Interactivity: JavaScript allows developers to create interactive web pages that respond to user actions, such as clicking a button or filling out a form.
Events: JavaScript can respond to various events triggered by user interactions, such as clicks, mouse movements, and keyboard inputs. Event handling allows developers to create interactive and responsive web applications.
Ajax and Fetch: Allows for asynchronous HTTP requests to the server, enabling loading or sending of data without having to reload the entire page.
Frameworks and Libraries: There are numerous JavaScript frameworks and libraries, such as React, Angular, and Vue.js, which simplify the development of complex web applications.

Advancing with JavaScript

As you become familiar with JavaScript, you can explore more advanced concepts such as object-oriented programming, array and object manipulation, promises and asynchronous programming, and web application development using modern technologies like Node.js.

JavaScript is a powerful language that has come a long way since its early days. Today, it's essential for any web developer looking to create interactive and dynamic experiences on the web. With practice and perseverance, you can master JavaScript and take your web development skills to the next level. Start your journey today!

Introduction to CSS: Transforming Web Pages with Style

Alex Gonzalez — Wed, 20 Mar 2024 16:54:52 +0000

CSS, or Cascading Style Sheets, is a language used to style and present web pages. While HTML provides the structure and content of a page, CSS brings it to life by defining how that content will look. From color and typography to layout and arrangement.

What is CSS?

CSS is a styling language that describes how HTML elements should be presented on a web page. It allows control over aspects such as color, font, size, and layout of HTML elements, as well as the arrangement and positioning of those elements on the page.

Basic Syntax of CSS

The syntax of CSS consists of a set of rules that specify how style should be applied to HTML elements. Each rule consists of a selector and a set of style declarations, which define the properties and values to be applied to the selected elements.

selector {
    property: value;
    /* Comment */
}

Selector: Specifies which HTML elements will be affected by the style rule.
Property: Defines the aspect you want to change.
Value: Specifies the value to be applied to the property
Comments: Used to add notes in the CSS code that are not interpreted as part of the style.

Applying Styles to HTML Elements

There are several ways to apply CSS styles to HTML elements:

Inline Styles: Applied directly to an element using the style attribute.

<p style="color: blue; font-size: 16px;">Paragraph with inline styles.</p>

Internal Styles: Defined within the <style> tag in the <head> section of the HTML document.

<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

External Styles: Defined in a separate CSS file and linked to the HTML document using the <link> tag in the <head> section.

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Key CSS Properties

CSS offers a wide range of properties to customize the style of HTML elements. Some of the most common properties include:

color: Defines the text color.
font-family: Specifies the font used for text.
font-size: Sets the font size.
margin: Controls the space around an element.
padding: Defines the internal space of an element.
border: Sets the border around an element.
background-color: Defines the background color of an element.

For more information about CSS Properties: https://www.dofactory.com/css/properties

Advancing with CSS

As you become familiar with CSS, you can explore more advanced techniques such as using more specific selectors, responsive design to adapt the page to different devices, and animation to add visual interactivity.

With this introduction to CSS, you're ready to start styling your web pages and creating captivating visual experiences on the web. Experiment and have fun exploring the power of web design with CSS!

Introduction to HTML: The HyperText Markup Language

Alex Gonzalez — Sat, 16 Mar 2024 00:00:05 +0000

HTML, or HyperText Markup Language, is the standard language used for creating web pages. As a markup language, it provides the structure and layout of a web page, defining elements like headings, paragraphs, links, and more. From simple static websites to complex interactive web applications, HTML is the foundation upon which much of the internet is built.

What is HTML?

HTML is a markup language that uses a series of tags to define the structure and content of a web page. These tags, written within angle brackets < >, are interpreted by web browsers to render the content correctly on the user's screen, and are used to create elements like headers (represented by <h1> through <h6> tags), paragraphs (<p>), links (<a>), or images (<img>), among others.

The basic structure of an HTML document:

Every HTML document follows a basic structure consisting of a set of key elements:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is an example of a heading.</h1>
    <p>This is an example of a paragraph.</p>
</body>
</html>

<!DOCTYPE html>: This declaration defines the HTML version used in the document. (In this case, HTML5).
<html>: It is the root element that wraps all HTML content.
<head>: It contains metadata about the document, such as the page title and links to CSS style sheets and JavaScript scripts.
<title>: Defines the title of the page displayed in the browser’s tab.
<body>: Contains the visible content of the page, such as headers, paragraphs, images, and more.

Key HTML Tags:

Headers (<h1> ,…,<h6>): Used to organize and hierarchize page content.
Paragraphs (<p>): Defines a block of text.
Links (<a>): Creates an hyperlink to other web pages or online resources.
Images (<img>): Inserts an image into the page.
Lists (<ul>,<ol>): Creates an unordered or ordered list.
- List item (<li>): Defines a list item.
Tables (<table>): Organizes data into a tables.
- Table row (<tr>):Defines a table row.
- Table column (<td>): Defines a table column.
Forms (<form>): Creates a form to collect user information.
- Input (<input>): Defines an input that can be filled with some information.
- Button (<button>): Defines a button that can be pressed to send the form information.

For more information about HTML tags: https://html5doctor.com/element-index/

Moving forward with HTML

To create dynamic and visually appealing web pages, it's necessary to complement it with CSS (Cascading Style Sheets) for styling the content and JavaScript for adding interactivity and functionality. Together, these three languages form the core of modern web programming.