Portfolio Website Fullstack Guide

<h2>Introduction</h2>
<p>This guide will help you build a fullstack portfolio website from scratch using React for frontend and Node.js/Express with MongoDB for backend. It is suitable for beginners to advanced learners.</p>

<h3>Tech Stack</h3>
<ul>
  <li>React – Frontend framework</li>
  <li>Node.js & Express – Backend API</li>
  <li>MongoDB – Database</li>
  <li>Tailwind CSS / Styled Components – Styling</li>
</ul>

<h3>Project Setup</h3>
<ul>
  <li>Initialize React frontend using Vite or create-react-app</li>
  <li>Initialize Node.js backend with Express</li>
  <li>Set up folder structure: /client and /server</li>
</ul>

<h3>Backend Development</h3>
<p>Setup Express server and MongoDB connection:</p>
<pre><code>{`// server.js

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

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

mongoose.connect('mongodb://localhost/portfolio', { useNewUrlParser: true, useUnifiedTopology: true, });

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

app.listen(5000, () => console.log('Server running on port 5000')); `}</code></pre>

<h3>Frontend Development</h3>
<p>Fetch and display projects in React:</p>
<pre><code>{`// Projects.js

import { useEffect, useState } from 'react';

export default function Projects() { const [projects, setProjects] = useState([]);

useEffect(() => { fetch('http://localhost:5000/projects') .then(res => res.json()) .then(data => setProjects(data)); }, []);

return ( <div> {projects.map(project => ( <div key={project.id}> <h3>{project.title}</h3> <p>{project.description}</p> </div> ))} </div> ); } `}</code></pre>

<h3>Features</h3>
<ul>
  <li>Home, About, Projects, Contact sections</li>
  <li>Contact form with backend integration</li>
  <li>Portfolio projects gallery with modals</li>
  <li>Responsive design and light/dark mode</li>
</ul>

<h3>Deployment</h3>
<ul>
  <li>Deploy backend on Render / Heroku</li>
  <li>Deploy frontend on Vercel / Netlify</li>
  <li>Connect frontend & backend URLs</li>
</ul>

<h3>Extras</h3>
<ul>
  <li>Include screenshots for each section</li>
  <li>Add live demo link</li>
  <li>Encourage customization and adding more features</li>
</ul>

<h3>Conclusion</h3>
<p>By following this guide, you will have a complete fullstack portfolio website with a working backend, frontend, and live deployment.</p>