software

Lo viejo funciona, Juan! A monolithic is enough, almost ever.

Published: (December 20, 2025 at 04:41 PM EST)
3 min read
Source: Dev.to

Source: Dev.to

Introduction

It is a common saying: “You will need an MVP ready as fast as you can.”
For a simple landing page you typically need:

  • A contact form that captures the user’s email and name
  • An API endpoint to receive the form data
  • Basic health‑check routes

The goal is to get something functional quickly, while keeping the codebase maintainable.

Approach with React and Vite

If you prefer a modern JavaScript stack, you can scaffold a React project with Vite:

npm create vite@latest

Project structure

  • Header component
  • Footer component
  • MainContent component that wraps the different sections

Routing

Using a router (e.g., react-router-dom) you can redirect any unknown URL back to the homepage:

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

{/* Example route configuration */}
<BrowserRouter>
  <Routes>
    {/* your routes here */}
    <Route path="*" element={<Navigate to="/" replace />} />
  </Routes>
</BrowserRouter>

Backend (Node.js)

Create a small Express server with the following routes:

// server.js
import express from "express";
import cors from "cors";
import helmet from "helmet";
import xss from "express-xss-sanitizer";

const app = express();
app.use(cors());
app.use(helmet());
app.use(express.json());
app.use(xss());

app.post("/api/contact", (req, res) => {
  const { name, email } = req.body;
  // TODO: send email or store in DB
  res.status(200).json({ message: "Contact received" });
});

app.get("/api/health", (req, res) => {
  res.status(200).json({ status: "OK" });
});

app.get("/", (req, res) => {
  res.send("API is running");
});

app.listen(3000, () => console.log("Server listening on port 3000"));

Testing & Security

  • Security: express-xss-sanitizer helps mitigate XSS attacks.
  • Testing: Use Jest for unit tests of your route handlers.

Simpler Approach with Plain HTML, Tailwind, and GSAP

For a straightforward landing page you often don’t need React. A static HTML file with Tailwind CSS and GSAP (for animations) loaded via CDN can be set up in minutes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Landing Page</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
</head>
<body class="flex flex-col min-h-screen">

  <header class="bg-gray-800 text-white p-4">
    <h1 class="text-2xl">Welcome</h1>
  </header>

  <main class="flex-grow p-4">
    <form id="contactForm" class="space-y-4">
      <input type="text" name="name" placeholder="Name" class="border p-2 w-full" required />
      <input type="email" name="email" placeholder="Email" class="border p-2 w-full" required />
      <button type="submit" class="bg-blue-500 text-white p-2">Submit</button>
    </form>
  </main>

  <footer class="bg-gray-200 text-center p-4">
    © 2025 My Company
  </footer>

  <script>
    // Simple GSAP animation
    gsap.from("header", { y: -50, opacity: 0, duration: 0.8 });
    gsap.from("footer", { y: 50, opacity: 0, duration: 0.8 });

    // Form submission
    document.getElementById('contactForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      const data = Object.fromEntries(formData.entries());

      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });

      if (response.ok) {
        alert('Thank you! Your message has been sent.');
        e.target.reset();
      } else {
        alert('Something went wrong. Please try again.');
      }
    });
  </script>
</body>
</html>

Why this works

  • Speed: No build step; just open the HTML file.
  • Simplicity: One file, minimal dependencies.
  • Future‑proof: You can replace the static page with a React app later if needed.

Balancing DRY and KISS

Developers often emphasize DRY (Don’t Repeat Yourself) but may overlook KISS (Keep It Simple, Stupid). While avoiding duplication is valuable, over‑engineering can slow down delivery. For an MVP:

  1. Start simple – a single HTML page with a tiny backend.
  2. Iterate – refactor into components or micro‑services only when the complexity justifies it.

Conclusion

  • If you need a quick MVP, a plain HTML/CSS page with a minimal Node.js API is often enough.
  • Use React and Vite when you anticipate richer interactivity or a larger codebase.
  • Always keep the KISS principle in mind: simplicity speeds up development and reduces bugs.

Happy coding! 🚀

Back to Blog

Related posts

Read more »