🚀 Building Permalist: my Journey Through making a Dynamic To-Do List App

Hey everyone! 🎉 Recently, I finished learning PostgreSQL, and to put my new skills to the test, I built a simple (yet powerful) to-do list app called Permalist. In this post, I’ll walk you through my journey of building it with Node.js, Express, PostgreSQL, and EJS templating. Spoiler alert: There were plenty of challenges, but they helped me learn a lot! 😄

🛠️ Getting Started with Permalist

I started by setting up my project and installing the necessary packages. The basics—creating a directory, initializing a Node.js project, and adding dependencies like Express and PostgreSQL—were straightforward, but exciting because it felt like the first real step towards bringing my app to life.

Here’s a snapshot of what I did to kick things off:

mkdir permalist-project
cd permalist-project
npm init -y
npm install express body-parser pg ejs

Once everything was set up, I jumped into creating my server in index.js. My goal was to get PostgreSQL connected and running smoothly with Node.js.

import express from "express";
import bodyParser from "body-parser";
import pg from "pg";

const app = express();
const port = 3000;

const db = new pg.Client({
  user: "postgres",
  host: "localhost",
  database: "permalist",
  password: "0000", // Just an example, don't do this! 😅
  port: 5432,
});
db.connect();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));

With this basic setup, I was ready to handle CRUD operations for my to-do list. But then came the fun part—working with dynamic content!

✨ Rendering the To-Do List with EJS

To make the front end dynamic, I chose EJS as my templating engine. This was my first time using it, and I was really excited about how simple yet powerful it was for rendering dynamic content.

In index.js, I set up EJS like this:

import path from "path";
const __dirname = path.resolve();

app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "views"));

Then, I created an index.ejs file to display the to-do list. It was great to see how easily I could loop through my list items:

<h1><%= listTitle %></h1>

<% listItems.forEach(item => { %>
  <div class="item"><p><%= item.title %></p></div>
<% }) %>

It was pretty satisfying when I saw my to-do list appear dynamically on the page! 😄

📝 Adding, Editing, and Deleting Items

The next step was to handle user inputs—adding, editing, and deleting items. For this, I wrote routes that connected the user actions to my PostgreSQL database.

For example, here's the route for adding new items to the list:

app.post("/add", async (req, res) => {
  const itemTitle = req.body.newItem;
  try {
    await db.query("INSERT INTO items (title) VALUES ($1)", [itemTitle]);
    res.redirect("/");
  } catch (err) {
    console.error("Error adding item:", err);
    res.status(500).send("Internal Server Error");
  }
});

Similarly, I created routes for editing and deleting items. It was my first real experience handling these kinds of operations in a full-stack app, and it felt pretty awesome! 😎

😅 The Challenges (and How I Overcame Them)

Let’s be real: things didn’t always go smoothly! Here are a few challenges I faced while building Permalist, and how I tackled them:

Database Connection Issues

I initially struggled with connecting to PostgreSQL. Turns out, my connection details were off (oops!). After a quick double-check and a restart of the PostgreSQL server, everything started working perfectly.

Managing Asynchronous Code

Dealing with async operations (especially querying the database) was another hurdle. Using async/await saved the day by making sure my server waited for database responses before moving forward.

Rendering Dynamic Content with EJS

This part was tricky at first—I had to make sure my data was correctly passed to the EJS template. With the help of console.log (seriously, my best friend during debugging!), I figured out how to render everything correctly.

In a nutshell 🥜

Building Permalist was a huge learning experience for me. Not only did I get hands-on practice with PostgreSQL, but I also learned a lot about full-stack development, including handling CRUD operations and rendering dynamic content.

If you’re diving into full-stack projects, I hope this post gives you a bit of inspiration to keep going. The challenges might seem tough, but the satisfaction of seeing your app work is totally worth it! 💪

Thanks for reading, and happy coding! 😄