DEV Community: Luigi Morel

Expose only the data needed by the frontend

Luigi Morel — Sat, 15 Nov 2025 10:28:09 +0000

With the astronomical rise of vibe coding and non-technical folks shipping software, it's become apparent that now more then ever, we
need to be aware of very insecure software flooding the market.

One of the mistakes I'm seeing now and again is developers exposing too much data (than what's required in the
frontend).

There's no excuse for having a record's updated_at, deleted_at and created_at fields in your API responses if the
frontend doesn't need them.

Response from a blogging platform's API showing unnecessary fields exposed

This is a very common mistake that can lead to security vulnerabilities and performance issues.

APIs are doorways to the data and ultimately to your client's business as well. They are a description of the
client's business processes, as well.

How does business xyz handle my data when I sign up? How do they process payments? How do they handle refunds?

For example, by looking at a certain fintech startup's API responses, I was able to map at the different processes and
verifications they have in place while handling a payment.

Take an instance of the image above (it is from a vibe codded blogging platform's API). The API response contains data in this
format:

{
  "id": 7,
  "title": "Sleep Your Way To The Top: How, Why And With Who",
  "content":"...full article content...",
  "slug": "sleep-your-way-to-the-top-how-why-and-with-who",
  "excerpt": "These are the confessions of a young executive who thought he was on the fast track to the top. Kumbe… ",
  "type": "feature",
  "status": "draft",
  "isPremium": false,
  "isFeatured": true,
  "publishedAt": null,
  "createdAt": "2025-07-18T10:30:19.641Z",
  "updatedAt": "2025-08-19T15:13:45.906Z",
  "authorId": 17,
  "categoryId": 1,
  "columnType": null,
  "tags": {},
  "author": {
    "id": 17,
    "slug": "tom-rwahwire",
    "user": {
      "id": 32,
      "fullName": "Tom Rwahwire",
      "username": "tom_rwahwire"
    }
  }
}

Suppose I'm a malicious user and I want to read a premium article without paying for it. What could I do?

I could get my authentication token, then try sending a PATCH request to the article endpoint changing the isPremium field to
true. I could keep doing this for all premium articles that I want to read.

We certainly don't need to expose some fields for example createdAt, updatedAt, authorId, categoryId, etc. if
they are not being used in the frontend.

How do we achieve this?

We can reduce the fields to the absolute minimum required by the frontend. For example:

{
  "title": "Sleep Your Way To The Top: How, Why And With Who",
  "slug": "sleep-your-way-to-the-top-how-why-and-with-who",
  "excerpt": "These are the confessions of a young executive who thought he was on the fast track to the top. Kumbe… ",
  "type": "feature",
  "isPremium": false,
  "isFeatured": true,
  "publishedAt": null,
}

This can be achieved by preparing response structures or using serialization libraries that allow you to define which
fields to include or exclude in the API responses.

For example in Go, you can declare response structs that only include the necessary fields:

type ArticleResponse struct {
    ID          int       `json:"id"`
    Title       string    `json:"title"`
    Slug        string    `json:"slug"`
    Excerpt     string    `json:"excerpt"`
    Type        string    `json:"type"`
    IsPremium   bool      `json:"isPremium"`
    IsFeatured  bool      `json:"isFeatured"`
    PublishedAt *time.Time `json:"publishedAt,omitempty"`
}

Then map your data models to these response structs before sending them to the frontend.

// Article represents the full article model from the database
type Article struct {
    ID          int
    Title       string
    Slug        string
    Excerpt     string
    Type        string
    IsPremium   bool
    IsFeatured  bool
    PublishedAt *time.Time
    CreatedAt   time.Time
    UpdatedAt   time.Time
    AuthorID    int
    CategoryID  int
}

// Assuming you have an Article response from your database
 article := Article{
    ID:          7,
    Title:       "Sleep Your Way To The Top: How, Why And With Who",
    Slug:        "sleep-your-way-to-the-top-how-why-and-with-who",
    Excerpt:     "These are the confessions of a young executive who thought he was on the fast track to the top. Kumbe… ",
    Type:        "feature",
    IsPremium:   false,
    IsFeatured:  true,
    PublishedAt: nil,
    CreatedAt:   time.Date(2025, 7, 18, 10, 30, 19, 641000000, time.UTC),
    UpdatedAt:   time.Date(2025, 8, 19, 15, 13, 45, 906000000, time.UTC),
    AuthorID:    17,
    CategoryID:  1,
}
// Set content type headers and marshal the response and then, 
func GetArticleResponse(article Article) ArticleResponse {
    return ArticleResponse{
        Title:       article.Title,
        Slug:        article.Slug,
        Excerpt:     article.Excerpt,
        Type:        article.Type,
        IsPremium:   article.IsPremium,
        IsFeatured:  article.IsFeatured,
        PublishedAt: article.PublishedAt,
    }
}

This way, we can be sure that only the necessary data is sent to the frontend, reducing the risk of exposing sensitive
information.

In any case, you have a software project that you would like us to discuss, reach out via hello@terraconsults.co

Resources

Software Configuration Management for DevOps teams

Luigi Morel — Sat, 12 Apr 2025 12:13:00 +0000

This article originally appeared on my personal blog https://luigimorel.com

Introduction

While working on software projects, maintaining control over configurations is very important.

Software Configuration Management (SCM) plays a vital role in ensuring that software systems are built, deployed, and maintained consistently and reliably.

For DevOps engineers, mastering SCM is essential for fostering collaboration, reducing errors, and streamlining the development process.

For example, consider a web application that needs different database connections for development, staging, and production environments:

# Development environment
database:
  host: localhost
  port: 5432
  name: myapp_dev

# Staging environment
database:
  host: staging-db.example.com
  port: 5432
  name: myapp_staging

# Production environment
database:
  host: prod-db.example.com
  port: 5432
  name: myapp_prod

SCM helps manage these configurations across environments, ensuring that developers use the correct settings and preventing accidental deployment of development configurations to production. It encompasses a set of practices and tools that help manage changes to software systems, including version control, build automation, and deployment processes. By implementing effective SCM strategies, DevOps teams can enhance their ability to deliver high-quality software at speed.

Key Principles of Software Configuration Management

Version Control: Version control systems (VCS) are the backbone of SCM. They allow teams to track changes to code, collaborate on development, and revert to previous versions if necessary. Popular VCS tools include Git, Subversion (SVN), and Mercurial.
Change Management: Effective change management processes ensure that all changes to software configurations are documented, reviewed, and approved before implementation. This helps prevent unauthorized changes and reduces the risk of introducing errors into the system.
Build Automation: Automating the build process is crucial for ensuring that software is consistently built and tested. Continuous Integration (CI) tools like Jenkins, Travis CI, and CircleCI enable teams to automate the build process, run tests, and deploy applications seamlessly.
Environment Management: Managing different environments (development, testing, staging, production) is essential for ensuring that software behaves consistently across all stages of the development lifecycle. Tools like Docker and Kubernetes help create and manage isolated environments for testing and deployment.
Release Management: Release management involves planning, scheduling, and controlling the build and deployment of software releases. This includes managing dependencies, coordinating with stakeholders, and ensuring that releases are delivered on time and meet quality standards.
Documentation: Comprehensive documentation is vital for effective SCM. It provides a clear record of configurations, changes, and processes, making it easier for teams to understand and manage software systems. Documentation should be kept up-to-date and easily accessible to all team members.
Monitoring and Auditing: Continuous monitoring of software configurations helps identify issues early in the development process. Auditing tools can track changes, assess compliance with standards, and provide insights into the overall health of the software system.
Collaboration: SCM is a collaborative effort that involves developers, testers, operations teams, and other stakeholders. Encouraging open communication and collaboration among team members is essential for successful SCM practices.

Tools for Software Configuration Management

Git: A distributed version control system that allows teams to track changes, collaborate on code, and manage branches effectively.
Jenkins: An open-source automation server that enables continuous integration and continuous delivery (CI/CD) by automating the build, test, and deployment processes.
Docker: A platform that allows developers to create, deploy, and run applications in containers, ensuring consistency across different environments.
Ansible: An open-source automation tool that simplifies configuration management, application deployment, and task automation.
Puppet: A configuration management tool that automates the provisioning and management of infrastructure, ensuring that systems are configured consistently.
Chef: A configuration management tool that automates the deployment and management of applications and infrastructure, allowing teams to define configurations as code.
Terraform: An infrastructure as code (IaC) tool that enables teams to define and manage infrastructure using declarative configuration files, making it easier to provision and manage resources across different cloud providers.
Kubernetes: An open-source container orchestration platform that automates the deployment, scaling, and management of containerized applications, ensuring consistency across different environments.
GitLab CI/CD: A built-in continuous integration and continuous delivery tool that allows teams to automate the build, test, and deployment processes directly within the GitLab platform.
Bitbucket Pipelines: A continuous integration and deployment service integrated with Bitbucket, allowing teams to automate the build and deployment processes using YAML configuration files.
Azure DevOps: A set of development tools and services that provide version control, CI/CD, and project management capabilities, enabling teams to manage the entire software development lifecycle.
AWS CodePipeline: A fully managed continuous delivery service that automates the build, test, and deployment processes for applications hosted on AWS.
CircleCI: A cloud-based continuous integration and delivery platform that automates the build, test, and deployment processes, allowing teams to deliver software faster and with higher quality.
Travis CI: A continuous integration service that automatically builds and tests code changes in GitHub repositories, enabling teams to catch issues early in the development process.
Selenium: An open-source testing framework that automates web browsers, allowing teams to perform automated testing of web applications as part of the CI/CD pipeline.

Best Practices for Software Configuration Management

Establish a Version Control Strategy: Define a clear branching strategy (e.g., Git Flow, trunk-based development) that suits your team's workflow and ensures that changes are managed effectively.
Automate the Build and Deployment Process: Use CI/CD tools to automate the build, test, and deployment processes, reducing manual errors and ensuring consistency across environments.
Implement Change Management Processes: Establish a formal change management process that includes documentation, review, and approval of changes to software configurations.
Use Infrastructure as Code (IaC): Define infrastructure configurations using code to ensure consistency and reproducibility across different environments. Tools like Terraform and Ansible can help automate infrastructure provisioning.
Monitor and Audit Configurations: Continuously monitor software configurations for changes and compliance with standards. Use auditing tools to track changes and assess the overall health of the system.
Encourage Collaboration: Foster a culture of collaboration among team members by using tools that facilitate communication and knowledge sharing. Encourage regular code reviews and pair programming to enhance collaboration.
Keep Documentation Up-to-Date: Maintain comprehensive and up-to-date documentation of software configurations, processes, and changes. Ensure that documentation is easily accessible to all team members.
Train and Educate Team Members: Provide training and resources to team members on SCM best practices, tools, and processes. Encourage continuous learning and improvement within the team.
Regularly Review and Improve SCM Processes: Continuously assess and improve SCM processes to adapt to changing requirements and technologies. Solicit feedback from team members and stakeholders to identify areas for improvement.
Integrate SCM with DevOps Practices: Ensure that SCM practices are integrated with other DevOps practices, such as continuous integration, continuous delivery, and monitoring, to create a cohesive and efficient development process.
Use Feature Flags: Implement feature flags to enable or disable features in production without deploying new code. This allows for safer deployments and easier rollback of changes if issues arise.
Conduct Regular Backups: Regularly back up configurations, code repositories, and documentation to prevent data loss and ensure that you can recover from failures or disasters.
Implement Security Best Practices: Ensure that SCM processes adhere to security best practices, including access controls, encryption, and vulnerability assessments, to protect sensitive data and configurations.
Leverage Cloud Services: Utilize cloud-based SCM tools and services to enhance collaboration, scalability, and accessibility for distributed teams.
Monitor Performance and Reliability: Continuously monitor the performance and reliability of software configurations to identify and address issues proactively. Use monitoring tools to track key metrics and alert the team to potential problems.

Conclusion

In conclusion, Software Configuration Management (SCM) is a fundamental practice for DevOps engineers that ensures the consistency, reliability, and quality of software systems. By implementing effective SCM strategies, leveraging the right tools, and following best practices, DevOps teams can enhance collaboration, reduce errors, and streamline the development process. As the software development landscape continues to evolve, mastering SCM will remain a critical skill for DevOps professionals seeking to deliver high-quality software at speed.

Summary

In this article, we explored the essential aspects of Software Configuration Management (SCM) for DevOps engineers. We discussed the key principles of SCM, including version control, change management, build automation, environment management, release management, documentation, monitoring, and collaboration. We also highlighted various tools that can aid in effective SCM practices, such as Git, Jenkins, Docker, Ansible, Puppet, and Terraform. Finally, we provided best practices for implementing SCM in a DevOps environment to enhance collaboration and streamline the software development process.

Additional Resources

Mastering SvelteKit Component Documentation: A Guide to using Storybook

Luigi Morel — Tue, 30 May 2023 01:17:03 +0000

What is Storybook?

Storybook positions itself as a frontend workshop for building user interface (UI) components and pages in isolation. Storybook can be used for documentation, testing and documentation.

The core principle of Storybook revolves around utilizing "stories" as a means to effectively document components.

Stories are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior.

Prerequisites

This tutorial covers how to setup component documentation using Storybook and Svelte. I'll assume you know the following:

How to create a Svelte project
How to use install packages using NPM or Yarn
Experience with creating user interfaces
How to install and use Tailwindcss in SvelteKit. Here's the link to the documentation

Getting started

To get started, create a new SvelteKit project in your preferred dicrectory.

You could go straight to the project's respository here



$ npm create svelte@latest storybook-tutorial

Follow the prompts displayed in your terminal. You should see something like this:

You now have a SvelteKit project to work with.
Let's now install Storybook.



$ npx storybook init

Once the installation is done, run the command below.



$ npm run storybook

At this point, a web interface (like the one below) should open up on port 6006 in your browser.

Documenting our components

If you check the sidebar of the interface that's popped up in your browser, there is already example documentation for the Button, Header and Page components (see image above)

Your project folder should be looking like this:

.storybook contains your Storybook configuration
src holds your Svelte project files

Let's delete some of the the files that we do not need.

Delete the stories folder and all it's contents. Go ahead and create a components folder inside of the lib directory.

Inside the components folder create 3 folders, namely:

Buttons
Icons, and
Modals

Through out this tutorial, we will focus on documenting Button component. The documentation for the Modals and Icons can be found in this tutorial's repository

Below is how your src directory should be looking like by now:



├── app.d.ts
├── app.html
├── lib
│ └── components
│ ├── Buttons
│ │ ├── Button.stories.svelte
│ │ └── Button.svelte
│ ├── Footer.svelte
│ ├── Hero.svelte
│ ├── Icons
│ │ ├── Icon.stories.svelte
│ │ └── Icon.svelte
│ ├── Modals
│ │ ├── Modal.stories.svelte
│ │ └── Modal.svelte
│ ├── Navbar.svelte
│ └── Services.svelte
├── routes
│ ├── +layout.svelte
│ ├── +page.svelte
│ └── +page.ts
└── styles
└── app.css

Documenting the Button component

Install the @storybook/addon-svelte-csf package which will allows us to write the stories in Svelte syntax and compiles it to Storybook's CSF syntax.



$ npm install -D @storybook/addon-svelte-csf

Let's go ahead and change our .storybook/main.ts file so that Storybook can pick up our .svelte files. Also, we have added the @storybook/addon-svelte-csf to the addons array. This is how it should look like:



import type { StorybookConfig } from '@storybook/sveltekit'
 const config: StorybookConfig = {
  +stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-svelte-csf',
  ],
  framework: {
    name: '@storybook/sveltekit',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
}
export default config

Now that we are done with configurations, let's jump straight into defining how our Button component looks like:

Here's a sample user story for our buttons

A button component with four sizes (small, medium, large, extra-large) for flexible design and consistent user experience across devices.

Go to the Button.svelte file and paste this code



<script lang="ts">
    export let href: string = '';

    // Button sizes
    /**
     * @type {'small' | 'medium' | 'large' | 'extra-large' }
     */

    export let type: string = 'small';

    let buttonType: string;

    if (type === 'small') {
        buttonType = 'bg-slate-500 text-xs px-5 hover:bg-slate-500/90';
    } else if (type === 'medium') {
        buttonType = ' bg-red-500 px-7 text-sm hover:bg-red-500/90';
    } else if (type === 'large') {
        buttonType = ' bg-teal-500  px-9 text-base hover:bg-teal-500/90';
    } else {
        buttonType = ' bg-violet-500 text-lg px-12 hover:bg-violet-500/90';
    }
</script>

<a class={` btn ${buttonType}`} {href} target="_blank" rel="noreferrer">
    <div class="flex items-center gap-2">
        <slot />
    </div>
</a>

Let's go ahead and create our Storybook stories for the Button component. Go to the Button.stories.svelte file you created earlier in the lib/components/Buttons directory.
Copy and paste the code below:



<script lang="ts">
    import { Meta, Story } from '@storybook/addon-svelte-csf';

    import Button from './Button.svelte';
</script>

<Meta title="Buttons" component={Button} />

<!-- Small -->
<Story name="Small">
    <Button href="https://google.com">Small Button</Button>
</Story>

<!-- medium -->
<Story name="Medium">
    <Button type="medium" href="https://google.com">Medium Button</Button>
</Story>

<!-- large-->
<Story name="Large">
    <Button type="large" href="https://google.com">Large Button</Button>
</Story>

<!-- extra-large-->
<Story name="Extra Large">
    <Button type="extra-large" href="https://google.com">Extra Large Button</Button>
</Story>

Restart your Storybook server that's running on port 6006.

By now you should be able to see your Button component documentation showing in the web interface. This is how it should look like at this point..

And that's it! We have successfully documented our Button components that can be used in our SPAs.
Here's a look at our Button component being used in a web page. Visit this link: https://sveltekit-storybook.netlify.app/

If you'd like to look at the documentation for rest of the components (Modals and Icons), please take a look the the tutorial's repository here

Happy coding!

PS: This article first appeared on my personal blog https://luigimorel.co

Refactoring a codebase

Luigi Morel — Sun, 19 Feb 2023 17:19:16 +0000

This article first appeared on my personal website https://luigimorel.co/blog

Refactoring is a chore that any software engineer encounters as they progress through the career ladder. It is an important process that's geared towards improving code quality, scalability and maintainability of a code base.

A couple of days ago, I got an Upwork to refactor a Next.js application with the end goal of making the improving the re-usability of the components, improving global state management using Redux and cleaning up dead code.

Refactoring is the process of changing a software system in such a way that it does not alter the external behavior of the code yet improves its internal structure. - Martin Fowler

A codebase is like a garden. Without care and attention, it can become overgrown and tangled. Refactoring is like pruning the garden - it helps the codebase grow healthy and strong. - Unknown

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. - Martin Golding

As a lone developer with no engineering manager or team lead to ask why you made the decision to refactor the code the way you did, the above quotes always guides my refactoring process. The idea of a psycopath hunting me down because of an entangled code base is a pretty scary one :)

The Dos

1. Do not change behaviour

While refacoring code, do not change the behaviour of the bits and pieces you're striving to improve.
Changing behavior is not only risky (allowing bugs to slip through since refatoring and behaviour changes overlap), but also make bug attribution harder. Bug attribution is a mental process you'd go through while trying to understand whatt caused the bug ("attribute").

Behavior changes also lead to making code reviews harder and longer since the reviewer has to spend more time looking at not only the refactored code but also at the new behavior.

2. Avoid introducing unnecessary complexity and abstractions

Software complexity can not be avoided but deciding whether the complexity/abstractions you are about to introduce into the codebase are essential or accidental is a call you have to make at some point.

Sometimes, repeating a piece of logic takes precedence over DRY as a way of avoiding accidental complexity.

3. Write tests for the refactored code

Refactoring sessions can introduce new bugs and errors. It's therefore important to have a comprehensive test suite in place that can catch any regressions. Make sure you test the codebase thoroughly before and after making any changes.

4. Don't ignore performance

Refactoring can sometimes have a negative impact on performance. For example, changing to a piece of code from O(n) to O(n²) run time on large inputs.
Make sure you keep performance in mind when making changes, and measure the performance impact of your changes.

5. Keep eyes on the end goal

When refactoring, you should have a clear end goal for example, improving maintainability or scalability. Furthermore, have metrics to measure whether the code chosen end goal has been achieved. Make effort to ensure that you stay focused on it and avoid getting sidetracked by other issues in the codebase you are refactoring

Conclusions

Refactoring is an essential process in software development that helps to improve code quality, maintainability, and scalability. By identifying and eliminating technical debt, refactoring can make it easier to add new features, fix bugs, and optimize performance. It is also an effective way to reduce the risk of software failure and improve the overall user experience.

While refactoring can be time-consuming and require significant effort, it is an investment in the long-term health of your codebase. By regularly reviewing and refactoring your code, you can ensure that your software remains agile, adaptable, and efficient over time. Whether you are working on a small personal project or a large enterprise application, refactoring should be an essential part of your development process.

Understanding scope in Golang

Luigi Morel — Mon, 17 Oct 2022 19:47:20 +0000

This article first appeared on my personal website https://luigimorel.co

What is scope?

Scope can be defined as the current context of execution in which values and expressions are "visible" or can be accessed within a program.
If a variable or expression is not in the current scope,it will not be available for use by other parts of the program.

There exists two types of scope in Go:

Local scope

Local scope is achieved when a variable is declared inside a function body. Such variables are said to have local scope thus (within the function).
They can not be accessed outside of the function.

These types of variables are called local variables. For example,

package main
import "fmt"

func printNumber() {

 b := 2

}

func main() {

printNumber()

// b is inaccessible
fmt.Println("Value of b is", b)

}

Global scope

When a variable is declared outside of a function body, it possesses a global scope. Such variables are know as global variables.
They can be accessed from any part of a program.
For example,


package main
import "fmt"

var x string

func printString () {

x = "This is a string"

}


func main() {

  printString()

  fmt.Println("Value of x is", x)

}

Why is scope important in a program?

Scope helps to prevent mutation of assigned values during the lifetime of a program which helps avoid unneccessary bugs in a program.

What happens if a variable has the same name in both the global and local scope?

If we have local and global variables with the same variable names, the compiler gives priority to the local variable.
For example,

// Program to illustrate the priorities of variables

package main
import "fmt"

// define global variable
x  := 10

func main() {

 // define local variable with same name
  x := 30

  fmt.Println(random)
}

Output

Resources

Choosing a Framework

Luigi Morel — Sun, 16 Oct 2022 06:51:46 +0000

A couple of days ago, I was faced with the task of choosing a tech stack for a new project. At the back of my mind, I knew that I wanted to use Golang due to:

It's statically typed (I do not to use an external type system, e.g if I chose Javascript)
Simpler syntax (only 25 reserved words)
Concurrency
Blazing fast
Easy to learn

But, then I had to choose a framework to use for the API. 🤔
Below are the questions that guided my thinking before making the decision.

What factors did I have to keep in mind?
What framework has the features that any project would need (e.g CORS) while building an API?
What are the pitfalls that I need to avoid e.g performance and complexity?
Which framework has a lower learning curve for the rest of the team (both present and past)?
Which one has better documentation and support online?

I ended up choosing Gin, because:

It's fast (It used a radix tree-based routing to speed things up)
Middleware support
Simpler
Supports different data formats: JSON, XML & HTML.

Conclusion

The above is a mental framework that could be applied whenever faced with making a technical decision, e.g relating to frameworks or a language.
The popular adage, "It depends", holds true in this case. Be ready to realistically look at the pros and cons of each technology before making a decision.

This article first appeared on personal website https://luigimorel.co

Building an API using Express.js, Postgres, Sequelize CLI and Jest for Unit Testing.

Luigi Morel — Wed, 13 Apr 2022 16:06:14 +0000

Crafting Application Programming Interfaces (APIs) is one of the tasks that developers have to do once in a while. Web developers use various tools to accomplish these tasks that are required in their day to day schedules.

In this tutorial, we'll explore how to build a simple e-commerce like API using PostgreSQL, Express.js and Sequelize CLI.

Here's what we will cover:

What is Sequelize?
Installing Sequelize CLI
Creating entity models using the CLI
Writing unit tests using Jest
Deployment to Heroku
Creating associations using Postgres and Sequelize CLI
CI/CD using Circle CI.

Pre-requisites

Basic knowledge about SQL
Express.js basics
HTTP methods

To follow along with this tutorial, you should have the following tools installed on your computer:

Nodejs 14x or higher (I'm using v14.17.3)
Yarn or NPM (I'm using Yarn v1.22.15)
A text editor (I'm using VS Code)
A local installation of PostgreSQL

What is Sequelize?

Sequelize is an easy-to-use JavaScript object relational mapping (ORM) tool that works with SQL databases.

Project set up

Installing Sequelize

Make a new directory that you'll use while working with this tutorial and install the project's dependencies.



mkdir sequelize-tutorial
cd sequelize-tutorial
yarn add sequelize cors pg morgan helmet && yarn add -D sequelize-cli nodemon dotenv

sequelize - Sequelize is a promise-based Node.js ORM tool for Postgres. It features solid transaction support, relations, eager and lazy loading, read replication and more.
cors - CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options.
pg -Non-blocking PostgreSQL client for Node.js.
morgan - HTTP request logger middleware for node.js
helmet - Helmet helps you secure your Express apps by setting various HTTP headers.
sequelize-cli - The Sequelize Command Line Interface (CLI)
nodemon - a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.
dotenv - module that loads environment variables from a .env file into process.env

Add a .gitignore and .env files to the root of your project's folder.



touch .gitignore .env

Then, add the node_modules folder and .env file to your .gitignore



/node_modules
.env

Before we begin

Creating our entities

Our API has two entities

Product
Category

Relationships

One product belongs to one category.
One category has many products

Let's jump right into the code. 🤩

Initialize a Sequelize project, then open the directory in our code editor (VS Code):



yarn sequelize-cli init
code .

Configure the project to use with a Postgres database as the SQL dialect. Go to the config.json in the /config directory and change the code to this:



{
  "development": {
    "username": "postgres",
    "password": null,
    "database": "db_dev",
    "host": "127.0.0.1",
    "dialect": "postgres"
  },

  "test": {
    "username": "postgres",
    "password": null,
    "database": "database_test",
    "host": "127.0.0.1",
    "dialect": "postgres"
  },

  "production": {
    "use_env_variable": "DATABASE_URL",
    "dialect": "postgres",
    "dialectOptions": {
      "ssl": {
        "rejectUnauthorized": false
      }
    }
  }
}

Since we're still in development mode of the project, add the username, database and password fields to the development object.
In my case, username is postgres, password is null (I'm not using a password - bad practice, I know) and database is db_dev.

Once done with the above step, create the database for the project using this command:



yarn sequelize-cli db:create

Defining models

Our goal is to associate the products with the categories that they belong to.

Let's create a Product model.



$ yarn sequelize-cli model:generate --name Product --attribute name:string,quantity:integer,inStock:boolean,productImage:string,expiryDate:date

Below are the contents for the migration file that has been created.



'use strict';

module.exports = {
  async up(queryInterface, Sequelize) {
    await queryInterface.createTable('Products', {
      id: {
        allowNull: false,
        primaryKey: true,
        type: Sequelize.UUID,
        defaultValue: Sequelize.UUIDV4,
      },
      name: {
        type: Sequelize.STRING,
        trim: true,
      },
      quantity: {
        type: Sequelize.INTEGER,
        trim: true,
        allowNull: false,
      },
      price: {
        type: Sequelize.INTEGER,
        allowNull: false,
        trim: true,
      },
      inStock: {
        type: Sequelize.BOOLEAN,
        defaultValue: false,
      },
      productImage: {
        type: Sequelize.STRING,
        allowNull: false,
        trim: true,
      },
      expiryDate: {
        type: Sequelize.DATE,
        allowNull: false,
      },
      createdAt: {
        allowNull: false,
        type: Sequelize.DATE,
      },
      updatedAt: {
        allowNull: false,
        type: Sequelize.DATE,
      },
    });
  },

  async down(queryInterface, Sequelize) {
    await queryInterface.dropTable('Products');
  },
};

Please note that I'm using UUID instead of the integer data type for the id field.

Read about how to use UUID here.

Here is an article about how to add an extension to your database via PSQL shell

When you run the model:generate command, Sequelize generates a model file, and a migration with the attributes specified.
We can now run the migration to enable us create the Products table in our database.



yarn sequelize-cli db:migrate

Let's generate the seed file for the Product model



yarn sequelize-cli seed:generate --name product

A new file ending with -product.js has been created in the /seeders folder. Copy and paste the code below which is sample data of the products.



'use strict';

module.exports = {
  async up(queryInterface, Sequelize) {
    await queryInterface.bulkInsert(
      'Products',
      [
        {
          id: '1373772c-125c-42d0-81ae-a6d020fcbe21',
          name: 'Bread',
          quantity: 4,
          inStock: true,
          productImage:
            'https://res.cloudinary.com/morelmiles/image/upload/v1649765314/download_nwfpru.jpg',
          // Store the price in cents e.g if price is $5, multiply by 100 cents e.g 5 * 100 = 500 cents
          price: 500,
          expiryDate: new Date(),
          createdAt: new Date(),
          updatedAt: new Date(),
        },
        {
          id: '9df55a7c-772c-459f-a21b-933a96981ca6',
          name: 'Milk',
          quantity: 4,
          inStock: true,
          productImage:
            'https://res.cloudinary.com/morelmiles/image/upload/v1647356184/milk_ckku96.jpg',
          // Store the price in cents e.g if the price is $5, multiply by 100 cents e.g 5 * 100 = 500 cents
          price: 100,
          expiryDate: new Date(),
          createdAt: new Date(),
          updatedAt: new Date(),
        },
      ],
      {}
    );
  },

  async down(queryInterface, Sequelize) {
    await queryInterface.bulkDelete('Products', null, {});
  },
};

That's all for the Products model for now.

Create the Category model



$ yarn sequelize-cli model:generate --name Category --attributes name:string

Below is the migration file for the Category model.



'use strict';

module.exports = {
  async up(queryInterface, Sequelize) {
    await queryInterface.createTable('Categories', {
      id: {
        allowNull: false,
        primaryKey: true,
        type: Sequelize.UUID,
        defaultValue: Sequelize.UUIDV4,
      },
      name: {
        type: Sequelize.STRING,
        trim: true,
        allowNull: false,
      },
      createdAt: {
        allowNull: false,
        type: Sequelize.DATE,
      },
      updatedAt: {
        allowNull: false,
        type: Sequelize.DATE,
      },
    });
  },
  async down(queryInterface, Sequelize) {
    await queryInterface.dropTable('Categories');
  },
};

Let's create a seeder file for the Category model



yarn sequelize-cli seed:generate --name category

Below is the file with the seeder entries.



'use strict';

module.exports = {
  async up(queryInterface, Sequelize) {
    await queryInterface.bulkInsert(
      'Categories',
      [
        {
          id: 'a52467a3-3a71-45c4-bf1c-9ace5ad3668f',
          name: 'Confectionaries',
          createdAt: new Date(),
          updatedAt: new Date(),
        },
        {
          id: '33a9e6e0-9395-4f6c-b1cd-3cf1f87e195a',
          name: 'Drinks',
          createdAt: new Date(),
          updatedAt: new Date(),
        },
      ],
      {}
    );
  },

  async down(queryInterface, Sequelize) {
    await queryInterface.bulkDelete('Categories', null, {});
  },
};

We can now create associations between the Products and the Category each belongs to.

Read more about associations : here

Replace the code in the models/product directory with the one below:



'use strict';

const { Model } = require('sequelize');

module.exports = (sequelize, DataTypes) => {
  class Product extends Model {
    static associate(models) {
      Product.belongsTo(models.Category, {
        foreignKey: 'categoryId',
      });
    }
  }

  Product.init(
    {
      name: DataTypes.STRING,
      quantity: DataTypes.INTEGER,
      inStock: DataTypes.BOOLEAN,
      productImage: DataTypes.STRING,
      price: DataTypes.INTEGER,
      expiryDate: DataTypes.DATE,
    },
    {
      sequelize,
      modelName: 'Product',
    }
  );
  return Product;
};

Replace the code in the models/category directory with the one below:



'use strict';

const { Model } = require('sequelize');

module.exports = (sequelize, DataTypes) => {
  class Category extends Model {
    static associate(models) {
      Category.hasMany(models.Product, {
        foreignKey: 'categoryId',
        onDelete: 'CASCADE',
      });
    }
  }
  Category.init(
    {
      name: DataTypes.STRING,
    },
    {
      sequelize,
      modelName: 'Category',
    }
  );
  return Category;
};

Let's now add the foreign key to the Product migration file.
Go to the /migrations sub-folder and add the code below to the file that ends with create-product.js:



categoryId: {
        type: Sequelize.UUID,
        allowNull: false,
        onDelete: 'CASCADE',
        references: {
          model: 'Categories',
          key: 'id',
          as: 'categoryId'
        }
      },

The above line of code adds the categoryId foreign key to the Products table in our database.

To add the categoryId column to the Products table, check the scripts in the package.json file.
There's a script named db:reset in the package.json file. Seen it? It'll help us to drop the database, create the database again, run the migrations and add the seeder data into our database.
Run it.



yarn db:reset

If you open PSQL and run SELECT * FROM "Products";, you should see the updated Products table.

We now have our products and categories table, let's look at how to make requests and get responses using Express.js.

We already have our dependencies install. If you haven't yet, do it now:



yarn add cors express  helmet morgan && yarn add -D dotenv nodemon

Adding the controllers.

Create a new directory named controllers and create three files: category.js, index.js and product.js



touch category.js index.js product.js

Open category.js in the controllers folder and paste the code below.



const { Category, Product } = require('../models');

/**
 * Creates a new category
 * @param {*} req
 * @param {*} res
 * @returns Object
 */
const createCategory = async (req, res) => {
  try {
    const category = await Category.create(req.body);
    return res.status(201).json({
      category,
    });
  } catch (error) {
    return res.status(500).json({ error: error.message });
  }
};

/**
 * Fetches all categories
 * @param {*} req
 * @param {*} res
 * @returns Object
 */
const getAllCategories = async (req, res) => {
  try {
    const categories = await Category.findAll({
      order: [['createdAt', 'DESC']],
    });
    return res.status(200).json({ categories });
  } catch (error) {
    return res.status(500).send(error.message);
  }
};

/**
 * Gets a single category by it's id
 * @param {*} req
 * @param {*} res
 * @returns boolean
 */
const getCategoryById = async (req, res) => {
  try {
    const { id } = req.params;

    const category = await Category.findOne({
      where: { id: id },
      order: [['createdAt', 'DESC']],
    });

    if (category) {
      return res.status(200).json({ category });
    }

    return res
      .status(404)
      .send('Category with the specified ID does not exist');
  } catch (error) {
    return res.status(500).send(error.message);
  }
};

/**
 * Updates a single category by it's id
 * @param {*} req
 * @param {*} res
 * @returns boolean
 */
const updateCategory = async (req, res) => {
  try {
    const { id } = req.params;
    const [updated] = await Category.update(req.body, { where: { id: id } });

    if (updated) {
      const updatedCategory = await Category.findOne({
        where: { id: id },
        include: [
          {
            model: Product,
          },
        ],
      });
      return res.status(200).json({ category: updatedCategory });
    }

    throw new Error('Category not found ');
  } catch (error) {
    return res.status(500).send(error.message);
  }
};

/**
 * Deletes a single category by it's id
 * @param {*} req
 * @param {*} res
 * @returns Boolean
 */
const deleteCategory = async (req, res) => {
  try {
    const { id } = req.params;
    const deleted = await Category.destroy({
      where: {
        id: id,
      },
    });

    if (deleted) {
      return res.status(204).send('Category deleted');
    }

    throw new Error('Category not found ');
  } catch (error) {
    return res.status(500).send(error.message);
  }
};

module.exports = {
  createCategory,
  getAllCategories,
  getCategoryById,
  updateCategory,
  deleteCategory,
};

Now go to the product.js file and paste the following code:



const { Product } = require('../models');

/**
 * Creates a new product
 * @param {*} req
 * @param {*} res
 * @returns Object
 */
const createProduct = async (req, res) => {
  try {
    const product = await Product.create(req.body);

    return res.status(201).json({
      product,
    });
  } catch (error) {
    return res.status(500).json({ error: error.message });
  }
};

/**
 * Fetches all products
 * @param {*} req
 * @param {*} res
 * @returns Object
 */
const getAllProducts = async (req, res) => {
  try {
    const products = await Product.findAll({ order: [['createdAt', 'DESC']] });

    return res.status(200).json({ products });
  } catch (error) {
    return res.status(500).send(error.message);
  }
};

/**
 * Gets a single product by it's id
 * @param {*} req
 * @param {*} res
 * @returns boolean
 */
const getProductById = async (req, res) => {
  try {
    const { id } = req.params;
    const product = await Product.findOne({
      where: { id: id },
    });

    if (product) {
      return res.status(200).json({ product });
    }

    return res.status(404).send('Product with the specified ID does not exist');
  } catch (error) {
    return res.status(500).send(error.message);
  }
};
/**
 * Updates a single product by it's id
 * @param {*} req
 * @param {*} res
 * @returns boolean
 */
const updateProductById = async (req, res) => {
  try {
    const { id } = req.params;
    const product = await Product.update(req.body, {
      where: { id: id },
    });

    if (product) {
      const updatedProduct = await Product.findOne({ where: { id: id } });
      return res.status(200).json({ product: updatedProduct });
    }
    throw new Error('product not found');
  } catch (error) {
    return res.status(500).send(error.message);
  }
};

/**
 * Deletes a single product by it's id
 * @param {*} req
 * @param {*} res
 * @returns boolean
 */
const deleteProductById = async (req, res) => {
  try {
    const { id } = req.params;

    const deletedProduct = await Product.destroy({
      where: { id: id },
    });

    if (deletedProduct) {
      return res.status(204).send('Product deleted successfully ');
    }

    throw new Error('Product not found');
  } catch (error) {
    return res.status(500).send(error.message);
  }
};

module.exports = {
  createProduct,
  getAllProducts,
  getProductById,
  deleteProductById,
  updateProductById,
};

Open index.js in your text editor and paste in the following code:



//Exports the entity controllers in a single object

const productController = require('./product');
const categoryController = require('./category');

module.exports = {
  productController,
  categoryController,
};

Great! Well done for reading this far...

We're now going to create routes for the different controller operations (I mean HTTP methods 😉).

Create a new directory and name it routes. Inside the routes directory, create a new file named index.js



mkdir routes
cd routes
touch index.js

Insides the routes/index.js path, paste the following code .



const router = require('express').Router();

// Controller imports
const { categoryController, productController } = require('../controllers');

// Category routes
router.get('/v1/categories', categoryController.getAllCategories);
router.post('/v1/categories', categoryController.createCategory);
router.get('/v1/categories/:id', categoryController.getCategoryById);
router.put('/v1/categories/:id', categoryController.updateCategory);
router.delete('/v1/categories/:id', categoryController.deleteCategory);

// Product routes
router.get('/v1/products', productController.getAllProducts);
router.post('/v1/products', productController.createProduct);
router.get('/v1/products/:id', productController.getProductById);
router.put('/v1/products/:id', productController.updateProductById);
router.delete('/v1/products/:id', productController.deleteProductById);

module.exports = router;

You can now test your end points using whichever client you choose. The popular ones are Insomnia and Postman.
I'm using Postman.

[TO BE CONTINUED]

Edit (2024): I no longer write Node.js and Javascript as ky main language and neither do I have the time to write technical articles anymore. This will probably never be continued.

My sincere apologies to whoever comes across it.

Differences between the factory pattern and the constructor pattern in JavaScript.

Luigi Morel — Wed, 06 Apr 2022 21:15:43 +0000

Repeating code is something that's avoidable when writing logic for a piece of software that you need to produce.
Abstracting logic is a strategy that can be employed to avoid the repeatition that could emanate.

By the end of this article, you'll have learnt how to;

Use the factory pattern
Use the constructor pattern
The difference between the constructor and factory patterns.

Factory pattern

A factory in programming describes a function that returns an object...

function myFunc() {
  let obj = {};
  return obj;
}

const newObj = myFunc();

Factories can be used to set properties and methods on the objects that they return. In the code snippet below, the makeAnimal function is used to create other objects that represent animals. When using factories, property values are assigned to the returned object through the function's arguments.

function makeAnimal(name, legs, horns) {
  let animal = {};

  // Set properties for the animal object
  animal.name = name;
  animal.legs = legs;
  animal.horns = horns;

  return animal;
}

const newAnimal = makeAnimal('Cow', 4, 2);

console.log(newAnimal.name); // Output: Cow
console.log(newAnimal.legs); // Output: 4
console.log(newAnimal.horns); // Output: 2

Factories can also be used to create default values for properties of the object to be returned.

function makeAnimal(name: string, legs: number, horns: number) {
  let animal = {};

  // Set properties for the animal object
  animal.name = name;
  animal.legs = legs;
  animal.horns = horns;
  animal.hasFur = true; //Every new object returned from this function will have the `hasFur` property and it's value will always be true unless it's changed.

  return animal;
}
t
const newAnimal = makeAnimal('Cow', 4, 2);

console.log(newAnimal.name); // Output: Cow
console.log(newAnimal.horns); // Output: true

Constructor pattern

This is another pattern used to create objects in javascript. Like a factory, a constructor is a function that returns an object.
You could also declare
Refer to the code snippet below.

function Animal(name: string, legs: number, horns: number) {
  // Set properties for the animal object
  this.name = name;
  this.legs = legs;
  this.horns = true; //Default property
}

const newAnimal = new Animal('Cow', 4, 2);

console.log(newAnimal.name); // Output: Cow

Or, there's a cooler way to declare constructors in Javascript with some syntaxical sugar:

class Animal {
  constructor(legs) {
    this.legs = legs;
    this.printLegs = function () {
      console.log('Animal has %d legs:', this.legs);
    },
      this.name = 'Animal';
  }
}

let animal = new Animal(4);

animal.printLegs();
//Output : Animal has 4 legs

Differences between the constructors and factories

Syntax.
Factories do not use the new keyword whereas constructors do. Refer to the examples above.
Constructors inherit from a prototype property and return true from instanceOf factoryFunction.
Factories, on the other hand do not inherit a reference to the prototypeproperty and return false from instanceOf factoryFunction.

ReactDOM.render is no longer supported in React 18

Luigi Morel — Tue, 05 Apr 2022 08:33:54 +0000

So, I bootstrapped my first React application since the launch of React 18 (6 days after the launch).

When I checked my console, I was seeing an error that I did not expect to find (at least according to me):

Why the error occurs?

The error above is shown when you use React.render() instead of React.createRoot in React v18 to render the root of the application - which is always the div with an id of root in the index.js or index.tsx file; depending on whether you bootstrapped your application to use types (Typescript) or not.

How to fix.

Write the following code in your index.tsx or index.js file

Import ReactDOM from the react-dom/client sub-module

Import ReactDOM from 'react-dom/client'

Change the structure of your index.js or index.tsx file. However, this will depend on whether your using Typescript or not.

Using Typescript

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import reportWebVitals from './reportWebVitals'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
 <React.StrictMode>
  <App />
 </React.StrictMode>
)

reportWebVitals()

Look closely and you'll see a createRoot somewhere. Had you seen it? 😏 Pay attention next time :)
The React team changes to createRoot so as to support
Concurrent Mode in React apps.

Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed.

Additional information.

Using React Router in React 18 This is how you would set up your index.js or index.tsx file if you're using the new file set up.

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
 <React.StrictMode>
  <BrowserRouter>
   <App />
  </BrowserRouter>
 </React.StrictMode>
)

reportWebVitals()

I hope I helped you in a way I could.

Cheers.

PS: This is the first article I've ever written. To growth 🎉