🗓️ Date Started: 03/18

📋 Project Name: AI Productivity SaaS

🌱 Why I Started

Out of a mix of excitement and nervous energy, I launched my first public side project:

  • ✅ Created a Dev.to account to log my journey
  • ✅ Made my first public GitHub repo
  • ✅ Committed to learning full-stack development by doing

I wanted to build something useful and achievable — so I went with a simple productivity SaaS app that helps users add, delete, and toggle tasks.

🧱 Laying the Foundation

The first step was to set up the basic project structure:
Image description

I wrote my first Express server and tested it using app.get() and app.listen() on port 3000. I was thrilled when I could see a simple response on localhost:3000/api/tasks! ✅

Image description

I also installed GitLens on VSCode to better visualize version control history.

📦 npm + Express

Once I ran npm init -y and npm install express, I realized how these tools manage project dependencies through package.json and make backend development way smoother.

😅 Lesson learned: I forgot to install express initially and got a “module not found” error — classic!

🔄 Frontend & Backend Connection

Connecting the frontend (fetch('/api/tasks')) to my backend (app.get('/api/tasks')) was an "aha!" moment.

🔗 The frontend makes a request → the backend responds → the frontend processes and displays the data

I learned that Express automatically understands the port and domain so I don’t have to hardcode them into every fetch call.

✍️ Core Features Implemented

Here's what I got working:

  1. ✅ GET – Display all tasks
  2. ✅ POST – Add a new task
  3. ✅ PUT – Toggle task as complete/incomplete
  4. ✅ DELETE – Remove a task
  5. ✅ Auto-restart backend using nodemon
  6. ✅ .gitignore file to keep my repo clean

I also learned the difference between route params and query params (e.g., /api/tasks/:id vs /api/tasks?completed=true).

Image description

🔁 Refactoring Logic

When I realized I was duplicating button code for both initial render and newly added tasks, I wrote a reusable function:

js
function render_task(task) {
// Create li, span, buttons with event listeners
return li;
}

Image description

🧠 What I Learned

  • Setting up a Node.js + Express backend isn't scary — it's powerful and fast
  • Understanding how client-server communication works builds strong mental models
  • It’s easier than expected once you take the first step
  • Modular code with helper functions makes future changes simple

📌 TODOs for Next Steps

  • 🎨 Add CSS or Tailwind for modern UI
  • 🗑️ Add delete confirmation dialog

📂 Project Repo

You can check out the full code on GitHub:

👉 https://github.com/yiqing416/ai-productivity-saas

💬 Final Thoughts

This first step was huge for me — it gave me confidence and clarity.

Starting with vanilla JavaScript was the right call. It helped me understand what goes on under the hood before moving on to more modern frameworks.

If you're like me — just starting out — I highly recommend building something useful and learning by doing.

👊 Just. Start. Building.