Full-Stack Development: From Frontend to Backend

Full-stack development requires understanding both frontend and backend ecosystems. This post covers lessons from building the Floral Radiance e-commerce platform.

The Modern Full-Stack Stack

Frontend

• Framework: Next.js with TypeScript
• Styling: Tailwind CSS + Ant Design
• State Management: Context API or Redux
• HTTP Client: Axios

Backend

• Runtime: Node.js
• Framework: Express.js
• Database: MySQL with Prisma ORM
• Authentication: JWT tokens

Project Architecture

fullstack-app/
├── apps/
│   ├── web/           # Next.js frontend
│   └── api/           # Express.js backend
├── packages/
│   ├── shared-types/  # Shared TypeScript types
│   └── utils/         # Shared utilities
└── docker-compose.yml # Local development

Building the API Layer

Creating RESTful Endpoints

// routes/products.js
import express from "express";
import { PrismaClient } from "@prisma/client";
 
const router = express.Router();
const prisma = new PrismaClient();
 
router.get("/products", async (req, res) => {
  const products = await prisma.product.findMany({
    include: { category: true },
  });
  res.json(products);
});
 
router.post("/products", async (req, res) => {
  const product = await prisma.product.create({
    data: req.body,
  });
  res.status(201).json(product);
});
 
export default router;

Database Design with Prisma

Prisma makes database operations type-safe:

// schema.prisma
model Product {
  id        Int     @id @default(autoincrement())
  title     String
  price     Decimal
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}
 
model Order {
  id        Int     @id @default(autoincrement())
  products  Product[]
  total     Decimal
  status    String
  createdAt DateTime @default(now())
}

Frontend-Backend Integration

Type-Safe API Calls

// lib/api.ts
interface Product {
  id: number;
  title: string;
  price: number;
}
 
export async function getProducts(): Promise<Product[]> {
  const response = await fetch(`${API_URL}/products`);
  return response.json();
}

Error Handling

try {
  const products = await getProducts();
  setProducts(products);
} catch (error) {
  console.error("Failed to fetch products:", error);
  setError("Unable to load products. Please try again.");
}

Deployment Considerations

Backend Deployment

• Use environment variables for sensitive data
• Implement proper logging (Winston, Pino)
• Set up monitoring (Sentry, DataDog)
• Use PM2 for process management in production

Frontend Deployment

• Leverage Vercel for automatic deployments
• Implement proper error tracking
• Use CDN for static assets
• Monitor Core Web Vitals

Best Practices

1. Separation of Concerns: Keep business logic separate from API routes
2. Authentication: Implement proper JWT token management
3. Validation: Validate data on both frontend and backend
4. Documentation: Keep API documentation updated (Swagger/OpenAPI)
5. Testing: Write integration tests for API endpoints

Conclusion

Modern full-stack development is about choosing the right tools and patterns for your use case. The combination of Next.js, Express, and Prisma creates a powerful, type-safe development experience.