A simple resume file can tell someone about your skills, but a working web application proves them. In this guide, you will build a complete full stack resume web app from scratch. This project will help you understand how frontend, backend, and database work together in a real application. You will create a resume website where users can view your details and send messages through a contact form. Those messages will be stored in a database using a backend server.
By the end, you will not only have a project for your resume but also a clear understanding of how full stack development actually works.

Table of Contents

---

Project Overview

In this project, you will build a web application that has three main parts.

1. Frontend: The first part is the frontend, which is what website users will see. It will display your name, skills, projects, and a contact form.
2. Backend: The second part is the backend, which will handle requests sent from the frontend. When a user submits the form, the backend will process that data.
3. Database: The third part is the database, which will store all the messages submitted through the contact form.

The complete flow works like this: when a user fills out the contact form and clicks submit, the frontend sends the data to the backend. The backend receives the data and stores it in MongoDB. This creates a complete working system.

Tech Stack

1. The frontend of this project is built using HTML, CSS, and JavaScript. HTML is used to structure the content of the resume, CSS is used to style the layout and improve appearance, and JavaScript is used to handle form submission and communicate with the backend.
2. The backend is built using Node.js and Express.js. Node.js allows you to run JavaScript on the server, and Express.js makes it easier to create APIs and handle HTTP requests.
3. The database used in this project is MongoDB. It is a NoSQL database that stores data in a flexible JSON-like format, which makes it easier for beginners to use.
4. You will also use tools like Visual Studio Code for writing code, Command Prompt for running commands, Postman for testing APIs, and MongoDB Compass for viewing stored data.

Step 1: Create Project Structure

In this step, you will create the main folders for your project so that frontend and backend code remain organized.
1. Open Command Prompt and run the following commands:

mkdir resume-app
cd resume-app
mkdir frontend backend

After running these commands, your project will have two folders: one for frontend and one for backend. Keeping them separate helps avoid confusion later.

Step 2: Build the Frontend

Now you will create the user interface of your resume website.
1. Navigate to frontend folder
Run this command:

cd frontend

This ensures that all files you create next are inside the frontend folder.
2. Create required files
You need three files to build your frontend:

1. index.html (structure)
2. style.css (design)
3. script.js (logic)

Create these files manually inside the folder.
3. Write HTML
The HTML file defines the layout of your resume and includes a contact form.

!DOCTYPE html
html
head
  titleMy Resume/title
  link rel="stylesheet" href="style.css"
/head
body

  h1Your Name/h1
  pFull Stack Developer/p

  h2About Me/h2
  pI am a beginner learning full stack development./p

  h2Projects/h2
  ul
    liPortfolio Website/li
    liTodo App/li
  /ul

  h2Contact/h2
  form id="contactForm"
    input type="text" id="name" placeholder="Your Name" required
    input type="email" id="email" placeholder="Your Email" required
    textarea id="message" placeholder="Your Message"/textarea
    button type="submit"Send/button
  /form

  script src="script.js"/script
/body
/html

4. Add Styling
The CSS file improves the appearance of your resume.

body {
  font-family: Arial;
  background: #f4f4f4;
  padding: 20px;
}

h1 {
  color: teal;
}

input, textarea {
  display: block;
  margin: 10px 0;
  padding: 8px;
}

5. Add JavaScript
This script connects the frontend to the backend by sending form data.

document.getElementById("contactForm").addEventListener("submit", async function(e) {
  e.preventDefault();

  const data = {
    name: document.getElementById("name").value,
    email: document.getElementById("email").value,
    message: document.getElementById("message").value
  };

  const response = await fetch("http://localhost:5000/api/contact", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
  });

  const result = await response.json();
  alert(result.message);
});

Step 3: Setup Backend

Now you will create the server that processes data.
1. Navigate to backend folder

cd ../backend

2. Initialize Node project
This command creates a configuration file for your backend.

npm init -y

3. Install required packages
These packages are necessary to build your backend.

npm install express cors mongoose

4. Create server file
Create a file named:

server.js

Step 4: Write Backend Code

The order of code in this file is very important because Node.js executes code from top to bottom.
1. Import libraries

const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");

2. Create application

const app = express();

3. Add middleware

app.use(cors());
app.use(express.json());

4. Connect database

mongoose.connect("mongodb://127.0.0.1:27017/resumeDB", {
  useNewUrlParser: true,
  useUnifiedTopology: true
})
.then(() = console.log("MongoDB Connected"))
.catch(err = console.log(err));

5. Define schema

const ContactSchema = new mongoose.Schema({
  name: String,
  email: String,
  message: String
});

6. Create model

const Contact = mongoose.model("Contact", ContactSchema);

7. Create API route

app.post("/api/contact", async (req, res) = {
  try {
    const newMessage = new Contact(req.body);
    await newMessage.save();

    res.json({ message: "Message saved successfully!" });
  } catch (error) {
    res.status(500).json({ message: "Error saving message" });
  }
});

8. Start server

app.listen(5000, () = {
  console.log("Server running on http://localhost:5000");
});

Step 5: Run Backend

Run the following command in backend folder:

node server.js

If everything is correct, your server will start successfully.

Step 6: Test Backend

Before connecting frontend, test your API using Postman.
Send a POST request to:

http://localhost:5000/api/contact

Use JSON body:

{
  "name": "Test",
  "email": "test@gmail.com",
  "message": "Hello"
}

Step 7: Run Frontend

1. Open the index.html file in your browser.
2. Fill the form and click submit.
3. If everything is working correctly, you will see a success message.

Step 8: Verify Data in MongoDB

Open MongoDB Compass and connect to:

mongodb://127.0.0.1:27017

You will find your data inside the resumeDB database.

Conclusion

This project demonstrates the process of building a complete web application from scratch. You created a frontend interface, connected it to a backend server, and stored data in a database. That is the core of full stack development.
Do not worry about making it perfect in the first attempt. What matters is that you understand how each part connects and works together.

Frequently Asked Questions

1. Can beginners complete this project?

Yes, if each step is followed carefully, beginners can build it successfully.

2. Do I need React for this project?

No, this project works completely with basic HTML, CSS, and JavaScript.

3. Why is my form not working?

Most likely the backend server is not running or the API URL is incorrect.

4. Is MongoDB required?

It is not mandatory, but it is the easiest database for beginners.

5. Can I add this to my resume?

Yes, this is a strong beginner-level full stack project.