Building My First Full-Stack Application

· 4 min read
full-stacknodeexpressmongodb

I just finished building my first full-stack application, and I’m excited to share what I learned.

It’s not a complex app just a simple note-taking application but it taught me how frontend, backend, and database work together.

What I Built

A note-taking app where users can:

  • Create notes
  • Read their notes
  • Update notes
  • Delete notes

Basic CRUD (Create, Read, Update, Delete) operations.

The Stack

Frontend: HTML, CSS, JavaScript (vanilla, no framework yet)

Backend: Node.js with Express

Database: MongoDB

Tools: Postman for testing APIs, MongoDB Compass for viewing data

Understanding the Architecture

Before this project, I didn’t really understand how frontend and backend connected.

Here’s what I learned:

Frontend: What the user sees and interacts with. Sends requests to the backend.

Backend: Handles business logic, processes requests, talks to the database. Sends responses back to frontend.

Database: Stores the data persistently.

The flow is:

  1. User clicks a button in the frontend
  2. Frontend sends an HTTP request to the backend
  3. Backend processes the request and queries the database
  4. Database returns data to the backend
  5. Backend sends a response to the frontend
  6. Frontend displays the data to the user

Building the Backend

I started with the backend because I wanted to understand how APIs work.

Using Express made it surprisingly simple:

const express = require('express');
const app = express();

app.get('/api/notes', async (req, res) => {
  const notes = await Note.find();
  res.json(notes);
});

app.post('/api/notes', async (req, res) => {
  const note = new Note(req.body);
  await note.save();
  res.json(note);
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

This creates endpoints that the frontend can call.

Working with MongoDB

MongoDB was my first experience with databases.

I chose it because:

  • It’s popular for Node.js projects
  • It uses JSON-like documents (familiar from JavaScript)
  • It’s easier to get started than SQL databases (or so I heard)

Using Mongoose (a MongoDB library) made it easier:

const noteSchema = new mongoose.Schema({
  title: String,
  content: String,
  createdAt: { type: Date, default: Date.now }
});

const Note = mongoose.model('Note', noteSchema);

Connecting Frontend and Backend

This is where it clicked for me.

The frontend uses fetch() to call the backend:

// Get all notes
async function getNotes() {
  const response = await fetch('http://localhost:3000/api/notes');
  const notes = await response.json();
  displayNotes(notes);
}

// Create a note
async function createNote(title, content) {
  const response = await fetch('http://localhost:3000/api/notes', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title, content })
  });
  const note = await response.json();
  return note;
}

Seeing data flow from frontend to backend to database and back was amazing.

Challenges I Faced

CORS errors: My frontend couldn’t talk to my backend because of CORS (Cross-Origin Resource Sharing). I had to install and configure cors middleware.

Async/await confusion: I kept forgetting to use await and wondering why my data wasn’t there.

Error handling: My app crashed whenever something went wrong. I learned to use try/catch blocks.

Environment variables: I hardcoded my database connection string at first. Then learned to use .env files.

Data validation: Users could submit empty notes. I needed to add validation.

What I Learned

Backend is just JavaScript: I thought backend would be completely different, but with Node.js, it’s still JavaScript.

APIs are not magic: They’re just functions that respond to HTTP requests.

Databases are essential: Without a database, your data disappears when the server restarts.

Error handling matters: Things will go wrong. You need to handle errors gracefully.

Testing is important: I used Postman to test my API endpoints before connecting the frontend. This saved a lot of debugging time.

Mistakes I Made

Not planning the data structure: I changed my database schema multiple times because I didn’t think it through first.

Mixing concerns: I put database logic directly in my routes. I should have separated it into different files.

No authentication: Anyone can access and modify any notes. I need to learn about authentication.

Poor error messages: When something went wrong, my app just said “Error.” Not helpful.

What’s Next

Now that I understand the basics, I want to:

  • Add user authentication (so each user has their own notes)
  • Learn about SQL databases (to compare with MongoDB)
  • Try a frontend framework (React or Vue)
  • Learn about deployment (how to put this online)
  • Improve my code organization

Resources That Helped

  • Traversy Media on YouTube: His MERN stack crash course was super helpful
  • Express documentation: Clear and well-organized
  • MongoDB University: Free courses on MongoDB
  • Stack Overflow: For all the errors I encountered

Advice for Beginners

Start simple: Don’t try to build a complex app. Build something basic that does CRUD operations.

Build the backend first: Get your API working before worrying about the frontend.

Test with Postman: Test your API endpoints before connecting the frontend. It makes debugging much easier.

Use a database GUI: MongoDB Compass let me see my data visually, which helped me understand what was happening.

Don’t worry about perfection: My code is messy and could be better organized. That’s okay. I’m learning.

Deploy it: Even if it’s simple, putting your app online is exciting and teaches you new things.

Building a full-stack app felt overwhelming at first, but breaking it into pieces made it manageable.

Frontend, backend, database they’re just pieces that fit together. Once you understand how they connect, you can build anything.

All articles