Building My First Full-Stack Project - Lessons Learned

08/10/2025

8 mins to read

Introduction

Building my first full-stack application was both thrilling and terrifying. I made countless mistakes, hit numerous roadblocks, and almost gave up several times. But pushing through taught me more than any tutorial ever could. Here's my honest account of the journey.

preview

The Project: A Task Management App

I decided to build a collaborative task management application—ambitious for a first project, I know. The stack I chose was:

Frontend: Vue 3 + TypeScript + Tailwind CSS
Backend: Node.js + Express
Database: PostgreSQL
Authentication: JWT
Deployment: Docker + Railway

Looking back, I probably should have started simpler, but sometimes the best learning comes from jumping in the deep end.

Lesson 1: Planning Saves Time (Even When It Feels Slow)

The Mistake

I was so eager to start coding that I skipped proper planning. I had a vague idea of "a task app" and just started building. Three weeks in, I realized I had built features that didn't work together and had to refactor everything.

What I Should Have Done

## Pre-Development Checklist
- [ ] Define core features (MVP only)
- [ ] Sketch basic UI wireframes
- [ ] Design database schema
- [ ] Plan API endpoints
- [ ] Set up development environment
- [ ] Create project structure

The Database Schema I Wish I Started With:

-- Users table
CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  email VARCHAR(255) UNIQUE NOT NULL,
  password_hash VARCHAR(255) NOT NULL,
  username VARCHAR(100) NOT NULL,
  created_at TIMESTAMP DEFAULT NOW()
);

-- Projects table
CREATE TABLE projects (
  id SERIAL PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  description TEXT,
  owner_id INTEGER REFERENCES users(id),
  created_at TIMESTAMP DEFAULT NOW()
);

-- Tasks table
CREATE TABLE tasks (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  description TEXT,
  status VARCHAR(50) DEFAULT 'todo',
  project_id INTEGER REFERENCES projects(id),
  assigned_to INTEGER REFERENCES users(id),
  created_at TIMESTAMP DEFAULT NOW(),
  due_date TIMESTAMP
);

Key Takeaway: Spend 20% of your time planning to save 50% of your development time.

Lesson 2: Start With Authentication (It's Harder Than You Think)

The Challenge

I naively thought, "I'll add authentication later." Bad idea. Retrofitting auth into an existing app meant rewriting almost every API endpoint and component.

My Authentication Flow (After Many Iterations):

// Backend: Login endpoint
import { sign } from 'jsonwebtoken';
import { compare } from 'bcrypt';

export async function login(req, res) {
  try {
    const { email, password } = req.body;
    
    // Find user
    const user = await db.query(
      'SELECT * FROM users WHERE email = $1',
      [email]
    );
    
    if (!user.rows[0]) {
      return res.status(401).json({ error: 'Invalid credentials' });
    }
    
    // Verify password
    const validPassword = await compare(
      password,
      user.rows[0].password_hash
    );
    
    if (!validPassword) {
      return res.status(401).json({ error: 'Invalid credentials' });
    }
    
    // Generate JWT
    const token = sign(
      { userId: user.rows[0].id, email: user.rows[0].email },
      process.env.JWT_SECRET!,
      { expiresIn: '7d' }
    );
    
    res.json({ token, user: { id: user.rows[0].id, email } });
  } catch (error) {
    res.status(500).json({ error: 'Server error' });
  }
}

// Frontend: Auth composable
export function useAuth() {
  const token = ref(localStorage.getItem('token'));
  const user = ref(null);
  
  async function login(email: string, password: string) {
    const response = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    });
    
    if (!response.ok) throw new Error('Login failed');
    
    const data = await response.json();
    token.value = data.token;
    user.value = data.user;
    localStorage.setItem('token', data.token);
  }
  
  function logout() {
    token.value = null;
    user.value = null;
    localStorage.removeItem('token');
  }
  
  return { token, user, login, logout };
}

Lesson 3: Error Handling Isn't Optional

My Initial Approach (Don't Do This)

// ❌ Bad: No error handling
async function fetchTasks() {
  const response = await fetch('/api/tasks');
  const tasks = await response.json();
  return tasks;
}

What I Learned to Do

// ✅ Good: Proper error handling
async function fetchTasks() {
  try {
    const response = await fetch('/api/tasks', {
      headers: {
        'Authorization': `Bearer ${token.value}`
      }
    });
    
    if (!response.ok) {
      if (response.status === 401) {
        // Token expired, redirect to login
        await logout();
        router.push('/login');
        throw new Error('Session expired');
      }
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Failed to fetch tasks:', error);
    // Show user-friendly error message
    showNotification('Failed to load tasks. Please try again.', 'error');
    return [];
  }
}

Lesson 4: API Design Matters

My First API Attempt

// ❌ Inconsistent and confusing
app.get('/getTasks', ...)
app.post('/task/create', ...)
app.post('/deleteTask', ...)
app.put('/tasks/update/:id', ...)

After Learning REST Principles

// ✅ RESTful and consistent
app.get('/api/tasks', getAllTasks);
app.get('/api/tasks/:id', getTaskById);
app.post('/api/tasks', createTask);
app.put('/api/tasks/:id', updateTask);
app.delete('/api/tasks/:id', deleteTask);

// Nested resources
app.get('/api/projects/:projectId/tasks', getProjectTasks);

With Proper Middleware

import { authenticate } from './middleware/auth';

// Protected routes
app.use('/api/tasks', authenticate);
app.use('/api/projects', authenticate);

// Middleware
export async function authenticate(req, res, next) {
  try {
    const token = req.headers.authorization?.split(' ')[1];
    
    if (!token) {
      return res.status(401).json({ error: 'No token provided' });
    }
    
    const decoded = verify(token, process.env.JWT_SECRET!);
    req.user = decoded;
    next();
  } catch (error) {
    res.status(401).json({ error: 'Invalid token' });
  }
}

Lesson 5: State Management Gets Complex Fast

When I Realized I Needed Pinia

Initially, I passed props and emitted events everywhere. With 3+ levels of components, it became a nightmare. Enter Pinia.

// stores/tasks.ts
import { defineStore } from 'pinia';

interface Task {
  id: number;
  title: string;
  description: string;
  status: 'todo' | 'in-progress' | 'done';
  projectId: number;
}

export const useTasksStore = defineStore('tasks', {
  state: () => ({
    tasks: [] as Task[],
    loading: false,
    error: null as string | null
  }),
  
  getters: {
    tasksByProject: (state) => (projectId: number) => {
      return state.tasks.filter(task => task.projectId === projectId);
    },
    tasksByStatus: (state) => (status: Task['status']) => {
      return state.tasks.filter(task => task.status === status);
    }
  },
  
  actions: {
    async fetchTasks() {
      this.loading = true;
      this.error = null;
      try {
        const response = await fetch('/api/tasks');
        this.tasks = await response.json();
      } catch (error) {
        this.error = 'Failed to fetch tasks';
      } finally {
        this.loading = false;
      }
    },
    
    async createTask(task: Omit<Task, 'id'>) {
      try {
        const response = await fetch('/api/tasks', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(task)
        });
        const newTask = await response.json();
        this.tasks.push(newTask);
      } catch (error) {
        this.error = 'Failed to create task';
      }
    }
  }
});

Lesson 6: Deployment Is a Whole New Challenge

My Deployment Journey

Week 1: "I'll just push to GitHub, it'll be fine"
Week 2: "Why doesn't it work on the server?"
Week 3: "What do you mean environment variables?"
Week 4: Finally got it working with Docker

The Docker Setup That Worked

# Dockerfile (Backend)
FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci --only=production

COPY . .

EXPOSE 3000

CMD ["node", "server.js"]

# docker-compose.yml
version: '3.8'

services:
  backend:
    build: ./backend
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=${DATABASE_URL}
      - JWT_SECRET=${JWT_SECRET}
    depends_on:
      - db
  
  frontend:
    build: ./frontend
    ports:
      - "4173:4173"
  
  db:
    image: postgres:15-alpine
    environment:
      - POSTGRES_DB=taskapp
      - POSTGRES_PASSWORD=${DB_PASSWORD}
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

What I'd Do Differently

If I started over today, here's my approach:

Start smaller: Build a simple CRUD app first
Use a starter template: Don't reinvent the wheel
Set up CI/CD early: Automate testing and deployment
Write tests: At least for critical functionality
Document as you go: Future you will thank present you
Ask for code reviews: Even from peers

The Most Valuable Lesson

Building is the best teacher. No tutorial, course, or book can replace the experience of building something real, hitting problems, and figuring out solutions.

My first full-stack project is far from perfect. The code could be cleaner, the architecture more sophisticated, and the features more polished. But it works, it's deployed, and I learned more building it than I did in months of tutorials.

Conclusion

Your first full-stack project will be messy. You'll make mistakes. You'll want to give up. That's normal. The key is to push through, learn from each obstacle, and celebrate small wins along the way.

Start building today. Your future self will thank you. 🚀