⚙️ Fullstack Dev Setup Guide – React, PostgreSQL & Node

Welcome! This guide prepares your local environment for the 6-Day Fullstack Curriculum covering React 19, PostgreSQL, and Node.js with Express.

💻 Minimum Hardware Requirements

WARNING

Purpose: Ensure your system can run fullstack development tools efficiently.

• 🧠 CPU: Intel i5 / AMD Ryzen 5 / Apple M1+
• 🧮 RAM: 8GB (16GB recommended)
• 💾 Storage: SSD with 10GB free
• 🌐 Internet: Required for npm install, Postgres download, etc.

🛠️ Install VS Code

1. Download: VS Code
2. Enable:
   • “Open with Code” option
   • PATH setup (for terminal use)
3. Check:

   code --version

🌍 GitHub & Git Setup

• Create GitHub account

• Install Git:

  • Windows: Git for Windows
  • macOS: brew install git
  • Linux: sudo apt install git

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

🔐 SSH Key for GitHub

ssh-keygen -t ed25519 -C "you@example.com"
# then add to GitHub: Settings → SSH Keys → New

🧱 Node.js + NPM Setup

Use NVM for version control:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
nvm install --lts
nvm use --lts

Check versions:

node -v
npm -v

⚛️ React Project Setup (via Vite)

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

✅ React 19 strict mode enabled by default.

🐘 PostgreSQL Setup (All Platforms)

📦 Install PostgreSQL 15+

• Windows/macOS: PostgreSQL Downloads
• Linux (Ubuntu):

sudo apt update
sudo apt install postgresql postgresql-contrib

✅ Verify

psql --version

🔧 Setup DB & User

sudo -u postgres psql
CREATE DATABASE fullstackdb;
CREATE USER devuser WITH ENCRYPTED PASSWORD 'devpass';
GRANT ALL PRIVILEGES ON DATABASE fullstackdb TO devuser;

🔌 Prisma ORM Setup

Inside your React or Node app:

npm install prisma --save-dev
npx prisma init

Edit .env:

DATABASE_URL="postgresql://devuser:devpass@localhost:5432/fullstackdb"

🛠️ Express + Node Setup

npm init -y
npm install express cors helmet dotenv

Optional middleware/labs:

npm install express-validator bcrypt jsonwebtoken
npm install mocha supertest --save-dev

Create structure:

📁 src/
 ┣ 📁 routes/
 ┣ 📁 controllers/
 ┣ 📁 services/
 ┣ 📁 middlewares/
 ┗ 📄 index.js

Start server:

// index.js
import express from 'express';
const app = express();
app.use(express.json());
app.listen(3000, () => console.log('API running on 3000'));

🔐 JWT Auth Tools

npm install jsonwebtoken bcrypt dotenv

🔬 Testing Setup

npm install mocha chai supertest --save-dev

📡 Axios for React-Express Integration

npm install axios

Use in React:

axios.get("http://localhost:3000/api/data");

📘 Recommended VS Code Extensions

Extension	Purpose
Prettier	Auto-format code
ESLint	Code linting
Prisma	Prisma schema support
Tailwind CSS IntelliSense	Tailwind autocomplete
REST Client	Test APIs directly in editor
GitLens	Git history + blame

Install with:

code --install-extension esbenp.prettier-vscode \
 && code --install-extension dbaeumer.vscode-eslint \
 && code --install-extension Prisma.prisma \
 && code --install-extension bradlc.vscode-tailwindcss \
 && code --install-extension humao.rest-client \
 && code --install-extension eamodio.gitlens

✅ Final Checklist

• [ ] Git + GitHub setup with SSH
• [ ] Node + Vite + React 19 working
• [ ] PostgreSQL running with local DB
• [ ] Express API working at localhost:3000
• [ ] Prisma + PostgreSQL connected
• [ ] Axios fetch in React tested

🎯 You're ready!

This setup ensures you're ready to tackle every lab and integration from Day 1 to Day 6 of the curriculum.

Happy hacking! 💻🚀