Building Full-Stack Products

Create a minimal full-stack foundation:

Bash
# Backend (Node.js/Express)
mkdir my-product && cd my-product
npm init -y
npm install express cors helmet morgan
echo 'const express = require("express");
const app = express();
app.use(express.json());
app.get("/api/health", (req, res) => res.json({ status: "ok" }));
app.listen(3001, () => console.log("Server running on 3001"));' > server.js

# Frontend (React)
npx create-react-app client
cd client && npm start

Progress:

• Define core features - List 3-5 essential functions
• Design API contracts - Endpoints, request/response shapes
• Set up backend foundation - Database, auth, basic routes
• Build core API endpoints - Implement main business logic
• Create clean frontend components - Focus on functionality first
• Connect frontend to backend - API integration, error handling
• Add reliability measures - Input validation, error boundaries
• Test critical paths - Happy path and common edge cases
• Deploy and monitor - Basic logging, health checks

API Design Principles

1. RESTful patterns: GET /users, POST /users, GET /users/:id
2. Consistent response format:

   JSON
   { "data": {...}, "success": true, "message": "..." }

3. Proper HTTP status codes: 200, 201, 400, 401, 404, 500

Backend Foundation

• Database: Start with PostgreSQL for relational data, Redis for caching
• Auth: JWT tokens with refresh mechanism
• Middleware: Logging, CORS, rate limiting, input validation
• Error handling: Centralized error middleware

Frontend Approach

• Component structure: Atomic design (atoms → molecules → organisms)
• State management: Context API for simple apps, Redux for complex
• Styling: CSS modules or styled-components for consistency
• Performance: Code splitting, lazy loading, image optimization

Example 1: User Management API Input: Need user registration and profile management Output:

JavaScript
// Backend routes
app.post('/api/users', validateUser, async (req, res) => {
  const user = await User.create(req.body);
  res.status(201).json({ data: user, success: true });
});

app.get('/api/users/profile', authenticateToken, async (req, res) => {
  const user = await User.findById(req.user.id);
  res.json({ data: user, success: true });
});

Example 2: Frontend Data Fetching Input: Display user profile with loading and error states Output:

JavaScript
const Profile = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('/api/users/profile')
      .then(res => res.json())
      .then(data => setUser(data.user))
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  return <div>{user.name}</div>;
};

• Start simple: Build MVP first, add complexity when needed
• Database design: Normalize initially, denormalize for performance later
• Error handling: Fail gracefully with meaningful messages
• Security basics: Sanitize inputs, use HTTPS, implement rate limiting
• Code organization: Separate concerns (routes, models, controllers)
• Environment configs: Use .env files for different environments
• Documentation: Keep API docs updated, comment complex business logic
• Version control: Feature branches, meaningful commit messages

• Over-engineering early: Don't build for scale you don't have yet
• Ignoring error states: Always handle loading, error, and empty states
• Mixed concerns: Keep business logic out of components and routes
• No input validation: Validate on both frontend and backend
• Hardcoded values: Use environment variables for configs
• Poor database design: Plan relationships and indexes upfront
• Skipping authentication: Secure endpoints from day one
• No logging: Add structured logging for debugging production issues