DEV Community

Shubham Shukla
Shubham Shukla

Posted on

Building a To-Do App Using Node.js, Drizzle, and Sequelize

Building a To-Do App Using Node.js, Drizzle, and Sequelize

In the realm of creating to-do lists, it seems developers have an uncanny obsession. Maybe it's because it gives us the illusion that we, too, can be organized by merely coding our way there. Today, we shall embark on a journey to build yet another to-do app using Node.js, but this time with a sprinkle of Drizzle for that sleek frontend, and Sequelize to interact with our database like we're chatting up an old friend.

Prerequisites

Before we start, let's ensure you've got the necessary tools in your developer toolbox:

  • Node.js installed (preferably the version that doesn’t scream at you with deprecation warnings).
  • Basic understanding of how to use npm or yarn without causing a dependency apocalypse.
  • A fresh cup of coffee or your choice of a productivity potion.

Let’s break down the app into manageable chunks:

1. Setting Up the Backend

Initialize Node Project

Open your terminal and run these magical incantations:

mkdir todo-drizzle
cd todo-drizzle
npm init -y
npm install express sequelize sqlite3 body-parser
Enter fullscreen mode Exit fullscreen mode

Here, express is our trusty server, sequelize is our ORM to manage database interactions, and sqlite3 is our lightweight DB friend, perfect for development phases.

Setup Sequelize

Create a new folder called models, and inside, create a file called task.js:

const { Sequelize, DataTypes } = require('sequelize');
const sequelize = new Sequelize({
  dialect: 'sqlite',
  storage: 'database.sqlite',
});

const Task = sequelize.define('Task', {
  description: {
    type: DataTypes.STRING,
    allowNull: false
  },
  completed: {
    type: DataTypes.BOOLEAN,
    defaultValue: false
  }
});

module.exports = {
  sequelize,
  Task
};
Enter fullscreen mode Exit fullscreen mode

Build Express Server

Create a new file called server.js:

const express = require('express');
const bodyParser = require('body-parser');
const { sequelize, Task } = require('./models/task');

const app = express();
app.use(bodyParser.json());

app.post('/tasks', async (req, res) => {
  const { description } = req.body;
  try {
    const task = await Task.create({ description });
    res.status(201).send(task);
  } catch (error) {
    res.status(500).send(error.message);
  }
});

app.get('/tasks', async (req, res) => {
  try {
    const tasks = await Task.findAll();
    res.status(200).send(tasks);
  } catch (error) {
    res.status(500).send(error.message);
  }
});

async function assertDatabaseConnectionOk() {
    console.log(`Checking database connection...`);
    try {
        await sequelize.authenticate();
        console.log('Database connection OK!');
    } catch (error) {
        console.log('Unable to connect to the database:');
        console.log(error.message);
        process.exit(1);
    }
}

async function init() {
    await assertDatabaseConnectionOk();
    console.log(`Starting Sequelize + Express example on port 3000...`);
    app.listen(3000, () => {
        console.log(`Server up and running on http://localhost:3000/`);
    });
}

init();
Enter fullscreen mode Exit fullscreen mode

2. Setting Up the Frontend with Drizzle

For this guide, let’s assume Drizzle magically does all the frontend work. (Just kidding, you'd need something like React and react-drizzle, but that's a story for another day).

However, let’s keep it simple here, as frontend setup can be quite extensive.

Common Mistakes and Misconceptions

  • Ignoring Async/Await: Remember that interacting with databases is asynchronous. Manage those promises well, or face the wrath of unresolved promises!
  • Mutating State Directly: In your actual React/Drizzle frontend, never mutate state directly. Always use setters, or face potentially hours of debugging fun.

Conclusion

Building a to-do app with Node.js, Sequelize, and a dash of Drizzle (or its frontend equivalent) is a fantastic project to sharpen your full-stack prowess. Start simple, iterate, and remember—every to-do app you craft brings you closer to mastering the art of organizing not just tasks, but also your code.

Happy coding, and may your coffee be strong and your bugs few!

Top comments (0)