---

Full-Stack Portfolio Project

This repository contains the full-stack personal portfolio application built with React (Frontend) and Node.js/Express/PostgreSQL (Backend). It showcases a professional portfolio, projects, certificates, and a contact form with email notifications via SendGrid and persistent database storage.

Live Frontend: https://portfolio-nine-orcin-33.vercel.app/

• Backend API (Deployed on Render): https://your-backend-url.onrender.com/api/v1/portfolio/sendEmail

---

---

Project Overview

The project demonstrates full-stack development skills with:

• Responsive React frontend with multiple sections
• Backend API to store and email contact form messages via SendGrid
• PostgreSQL (Neon) database for persistent storage
• Input validation and error handling
• Secure environment variable management

---

Features

Frontend

• Responsive design (Desktop, Tablet, Mobile)
• Pages: Home, About, Welcome, Projects, Certificates, Education, Work Experience, Contact
• Projects section includes a Machine Learning video carousel
• Dynamic fetching of GitHub projects via API
• Dark/Light mode toggle using ThemeContext
• Reusable components and custom hooks for modularity

Backend

• Node.js + Express REST API
• PostgreSQL (Neon) database to store contact messages
• SendGrid email service for sending notifications on contact submissions
• Input validation and error handling
• Endpoint: POST /api/v1/portfolio/sendEmail

---

Tech Stack

Frontend	Backend
React	Node.js
React Router	Express.js
Context API	PostgreSQL (Neon)
CSS / Responsive	pg (Postgres client)
react-toastify	SendGrid (Email Service)
Custom Hooks	dotenv, cors
Vercel Deployment	Render Deployment

---

Folder Structure

Portfolio/
│
├── frontend/                # React frontend
│   ├── public/              # Static assets: images, favicon
│   ├── src/
│   │   ├── assets/          # Images, resume
│   │   ├── components/      # Layout, Menu, MobileNav, TabletNav, reusable components
│   │   ├── context/         # ThemeContext for dark/light mode
│   │   ├── pages/           # About, Certificates, Contact, Educations, Home, Projects, Techstack, Welcome, WorkExp
│   │   ├── utils/           # techstackList.js and helper utilities
│   │   ├── App.js           # Main App component
│   │   ├── index.js         # React entry point
│   │   └── index.css        # Global styling
│   ├── package.json
│   └── README.md
│
├── backend/                 # Node.js backend
│   ├── controllers/         # portfolioController.js
│   ├── routes/              # portfolioRoutes.js
│   ├── config/              # db.js
│   ├── server.js
│   ├── package.json
│   └── README.md
│
└── README.md                # Root full-stack README

---

Environment Variables

Frontend .env

REACT_APP_GITHUB_TOKEN=your_github_token
REACT_APP_BACKEND_URL=https://your-backend-url.onrender.com

Backend .env

PORT=8080
DATABASE_URL=your_neon_postgres_url
SENDGRID_API_KEY=your_sendgrid_api_key
SENDGRID_SENDER_EMAIL=sender@example.com
SENDGRID_RECEIVER_EMAIL=receiver@example.com

⚠️ Do not commit .env files to GitHub. Use .gitignore.

---

Setup & Run Locally

Backend

cd backend
npm install
node server.js

Server will run at http://localhost:8080 (or use the Render deployment URL).

Frontend

cd frontend
npm install
npm start

Frontend will run at http://localhost:3000

---

Deployment

Backend (Render)

• Push backend code to GitHub
• Connect the repo to Render
• Set environment variables in Render dashboard
• Deploy service → URL accessible as https://your-backend-url.onrender.com

Frontend (Vercel)

• Push frontend code to GitHub
• Connect repo to Vercel
• Set environment variable REACT_APP_BACKEND_URL to your Render backend URL
• Deploy → live frontend at https://portfolio-nine-orcin-33.vercel.app/

---

API Documentation

Send Contact Message

POST /api/v1/portfolio/sendEmail

Request Body

{
  "name": "Ankit Dimri",
  "email": "dimri.ankitdimri@gmail.com",
  "msg": "Hello, I want to connect!"
}

Response

{
  "success": true,
  "message": "Message sent and saved successfully"
}

---

Database

Messages are stored in contacts table (PostgreSQL):

CREATE TABLE contacts (
  id SERIAL PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(150),
  message TEXT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

---

Author

Full-stack Developer 📍 Dehradun, India

GitHub LinkedIn LeetCode

---

Created by Ankit Dimri © 2024

---