01.
Overview & Stack Setup
Full Stack Web Development with React.js
Page 1: Overview & Stack Setup
🧠 Technologies We'll Use
Frontend: React.js, TailwindCSS
Backend: Node.js, Express.js
Database: MongoDB (via Mongoose)
API Communication: REST (JSON)
Deployment: Vercel (frontend), Render/Fly.io (backend)
📁 Folder Structure
fullstack-app/
├── client/ # React frontend
└── server/ # Node.js backend
🛠️ Setup Instructions
1. Create Frontend (React)
SHELL
npx create-react-app client
cd client
npm install axios react-router-dom tailwindcss
npx tailwindcss init -p
tailwind.config.js
JS
content: ["./src/**/*.{js,jsx,ts,tsx}"]
./src/index.css
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
2. Create Backend (Express + MongoDB)
SHELL
mkdir server && cd server
npm init -y
npm install express mongoose cors dotenv
Basic server ( server/index.js )
JS
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
require("dotenv").config();
const app = express();
app.use(cors());
app.use(express.json());
app.get("/api", (req, res) => res.send("Hello from API!"));
mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true,
useUnifiedTopology: true })
.then(() => app.listen(5000, () => console.log("Server running on
http://localhost:5000")))
.catch(err => console.error(err));
.env (server)
MONGO_URI=your_mongodb_uri
✅ You're ready to begin development!
Say "Go to the next page in a new canvas" to continue.
