blog | abelcastro.dev

The primary goal of my blog has always been to experiment and explore new technologies rather than getting more views. This journey has seen my blog evolve through various technologies and frameworks, each iteration bringing its own set of learnings and advancements. Here’s a look back at the history and the latest re-implementation of my blog.

The Initial Version: Django, Django Templates, and Bootstrap

The initial version of my blog was launched in 2021. At that time, I chose Django as the primary framework for its robustness and extensive feature set. Django templates allowed for server-side rendering, while Bootstrap provided a responsive and modern look to the blog. This combination was powerful and relatively easy to work with, making it a perfect choice for someone looking to build a solid foundation.

Evolving with htmx and REST API

As time went on, I began exploring more dynamic ways to enhance the user experience. This led to the incorporation of htmx, which allowed for more interactive web pages without the need for full page reloads. Additionally, I implemented a REST API, which opened up possibilities for future integrations and provided a more modular approach to data handling. This version of the blog, which has seen significant evolution, is still live and can be found at https://abelcastro.dev/blog.

Experimenting with Angular

In parallel, I also experimented with Angular, a powerful framework for building dynamic web applications. This version, although not always functional, was hosted separately at https://ng.abelcastro.dev. This experiment allowed me to understand the intricacies of a component-based architecture and single-page applications, providing valuable insights into modern web development practices.

The Latest Iteration: Next.js, Tailwind, and Vercel

The latest iteration of my blog is available at https://blog.abelcastro.dev. This will be the default version of my blog on which I will focus in the future. It represents a significant leap forward in terms of technology and developer experience. Developed with Next.js and styled with Tailwind CSS, this version is sleek, fast, and highly responsive. Next.js offers a perfect balance between server-side rendering and static site generation, ensuring optimal performance and SEO benefits. Tailwind CSS, with its utility-first approach, makes it easy to create a custom and consistent design system.

Hosting this new version on Vercel’s platform as a hobby project has been a delightful experience. After being used to handling server configurations and Docker files, it was amazing to simply link my GitHub repository with Vercel and have the code deployed seamlessly.

One of the exciting aspects of this re-implementation was the opportunity to apply techniques I learned from the Next.js dashboard tutorial. Features like pagination and search have been integrated, enhancing the functionality and usability of the blog. These features not only improve the user experience but also showcase the powerful capabilities of Next.js and the ease with which complex features can be implemented.

Conclusion

The evolution of the code and posts on my blog reflects part of my journey as a developer. I am very happy with the results and excited to learn more about TypeScript and frameworks like Next.js.

By the way, all these projects are available in my github profile.

In the world of Node.js, frameworks like NestJS have transformed the landscape of building server-side applications by introducing a scalable, maintainable, and modular architecture. Coupled with MikroORM, an intuitive TypeScript ORM, you get a powerful duo that promotes code reliability and database management. This post will guide you through setting up a simple blog application using NestJS and MikroORM.

Prerequisites

Before we dive in, ensure you have the following installed:

Node.js
Docker (for running the PostgreSQL database)

Step 1: Setting Up Your NestJS Project

First, install the NestJS CLI globally, if you haven't already:

npm install -g @nestjs/cli

Create a new project:

nest new blog-nest

Navigate to your project directory:

cd blog-nest

Step 2: Integrating MikroORM

Install MikroORM and the PostgreSQL driver:

npm install @mikro-orm/core @mikro-orm/nestjs @mikro-orm/postgresql pg

Create a mikro-orm.config.ts at the root of your project to configure MikroORM:

import { MikroOrmModuleSyncOptions } from '@mikro-orm/nestjs';
import { Post } from './src/posts/post.entity';

const config: MikroOrmModuleSyncOptions = {
  entities: [Post],
  dbName: 'blog',
  type: 'postgresql',
  user: 'test',
  password: 'test',
};

export default config;

Step 3: Running PostgreSQL in Docker

Set up a docker-compose.yml file to run PostgreSQL:

version: '3.8'
services:
  postgres:
    image: postgres:latest
    environment:
      POSTGRES_DB: blog
      POSTGRES_USER: test
      POSTGRES_PASSWORD: test
    ports:
      - "5432:5432"
    volumes:
      - postgres-data:/var/lib/postgresql/data
volumes:
  postgres-data:

Start your PostgreSQL database:

docker-compose up -d

Step 4: Building the Blog API

Define your Post entity:

import { Entity, PrimaryKey, Property } from '@mikro-orm/core';

@Entity()
export class Post {
  @PrimaryKey()
  id!: number;
  @Property()
  title!: string;
  @Property()
  content!: string;
}

Create the Posts module, service, and controller to handle CRUD operations.

Posts Module

import { Module } from '@nestjs/common';
import { MikroOrmModule } from '@mikro-orm/nestjs';
import { PostsController } from './posts.controller';
import { PostsService } from './posts.service';
import { Post } from './post.entity';

@Module({
  imports: [MikroOrmModule.forFeature([Post])],
  controllers: [PostsController],
  providers: [PostsService],
})
export class PostsModule {}

Posts Service

import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@mikro-orm/nestjs';
import { EntityRepository } from '@mikro-orm/core';
import { Post } from './post.entity';

@Injectable()
export class PostsService {
  constructor(
    @InjectRepository(Post)
    private readonly postRepository: EntityRepository<Post>
  ) {}

  async findAll(): Promise<Post[]> {
    return this.postRepository.findAll();
  }
}

Posts Controller

import { Controller, Get } from '@nestjs/common';
import { PostsService } from './posts.service';
import { Post } from './post.entity';

@Controller('posts')
export class PostsController {
  constructor(private readonly postsService: PostsService) {}

  @Get()
  async findAll(): Promise<Post[]> {
    return this.postsService.findAll();
  }
}

Step 5: Running the Application

Run your application and navigate to http://localhost:3000/api/posts to see the posts retrieved from the database:

npm run start

Conclusion

You've just set up a basic blog API using NestJS and MikroORM, with a PostgreSQL database running in a Docker container. This project lays the foundation for building scalable and maintainable applications with advanced features like data mapping, dependency injection, and modular architecture.

For the complete source code, check out the GitHub repository: blog-nest.

NestJS and MikroORM are powerful tools in your Node.js arsenal. By mastering them, you can greatly enhance your backend development capabilities. Happy coding!

abelcastro.dev

My blog goes Next.js

Next.js Dashboard Tutorial with a Local Database

Learn NestJS with MikroORM by Creating a Blog Project

The Initial Version: Django, Django Templates, and Bootstrap

Evolving with htmx and REST API

Experimenting with Angular

The Latest Iteration: Next.js, Tailwind, and Vercel

Conclusion

Prerequisites

Step 1: Setting Up Your NestJS Project

Step 2: Integrating MikroORM

Step 3: Running PostgreSQL in Docker

Step 4: Building the Blog API

Posts Module

Posts Service

Posts Controller

Step 5: Running the Application

Conclusion