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.- 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.
- 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.
- Database: The third part is the database, which will store all the messages submitted through the contact form.
Tech Stack
- 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.
- 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.
- 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.
- 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:
After running these commands, your project will have two folders: one for frontend and one for backend. Keeping them separate helps avoid confusion later.mkdir resume-app
cd resume-app
mkdir frontend backend
Step 2: Build the Frontend
Now you will create the user interface of your resume website.1. Navigate to frontend folder
Run this command:
This ensures that all files you create next are inside the frontend folder.cd frontend
2. Create required files
You need three files to build your frontend:
Create these files manually inside the folder.
- index.html (structure)
- style.css (design)
- script.js (logic)
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 StylingThe 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 JavaScriptThis 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
2. Initialize Node projectcd ../backend
This command creates a configuration file for your backend.
3. Install required packagesnpm init -y
These packages are necessary to build your backend.
4. Create server filenpm install express cors mongoose
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
2. Create applicationconst express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
3. Add middlewareconst app = express();
4. Connect databaseapp.use(cors());
app.use(express.json());
5. Define schemamongoose.connect("mongodb://127.0.0.1:27017/resumeDB", {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() = console.log("MongoDB Connected"))
.catch(err = console.log(err));
6. Create modelconst ContactSchema = new mongoose.Schema({
name: String,
email: String,
message: String
});
7. Create API routeconst Contact = mongoose.model("Contact", ContactSchema);
8. Start serverapp.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" });
}
});
app.listen(5000, () = {
console.log("Server running on http://localhost:5000");
});
Step 5: Run Backend
Run the following command in backend folder:If everything is correct, your server will start successfully.node server.js
Step 6: Test Backend
Before connecting frontend, test your API using Postman.Send a POST request to:
Use JSON body:http://localhost:5000/api/contact
{
"name": "Test",
"email": "test@gmail.com",
"message": "Hello"
}
Step 7: Run Frontend
- Open the index.html file in your browser.
- Fill the form and click submit.
- If everything is working correctly, you will see a success message.
Step 8: Verify Data in MongoDB
Open MongoDB Compass and connect to:You will find your data inside the resumeDB database.mongodb://127.0.0.1:27017
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?2. Do I need React for this project?Yes, if each step is followed carefully, beginners can build it successfully.
3. Why is my form not working?No, this project works completely with basic HTML, CSS, and JavaScript.
4. Is MongoDB required?Most likely the backend server is not running or the API URL is incorrect.
5. Can I add this to my resume?It is not mandatory, but it is the easiest database for beginners.
Yes, this is a strong beginner-level full stack project.
0 Comments