From SQL to Full Stack (10 mins)
- ✓ You already know data structures!
- ✓ Tables → JSON objects
- ✓ Joins → API endpoints
- // SQL: SELECT * FROM users WHERE id = 1 // API: GET /api/users/1 // SQL: JOIN orders ON users.id = orders.user_id // API: GET /api/users/1/orders
Quick Backend Essentials (15 mins)
Express.js - Like SQL procedures for the web:
// Basic Express API endpoint
app.get('/api/franchises', async (req, res) => {
try {
const franchises = await db.query(
'SELECT * FROM franchises'
);
res.json(franchises);
} catch (err) {
res.status(500).json({ error: err.message });
}
});
Frontend Made Simple (15 mins)
React - Think of it as dynamic HTML templates:
// React component example
function FranchiseList() {
const [franchises, setFranchises] = useState([]);
useEffect(() => {
// Like running a query when page loads
fetch('/api/franchises')
.then(res => res.json())
.then(data => setFranchises(data));
}, []);
return (
{franchises.map(f => (
);
}
{f.name}
))}
Putting It All Together (5 mins)
Key takeaways:
- Backend = Data access + Business logic
- Frontend = Data display + User interaction
- APIs = The bridge between them
Next steps:
- Practice with simple endpoints first
- Start with read-only operations
- Add interactivity gradually