Day 178 of Learning MERN Stack

Hello Dev Community! 👋

Today marks Day 178 of my full-stack journey, and I’m officially kicking off a new major project: An AI-Powered Website Builder.

The goal is to turn simple user natural language prompts into responsive web applications instantly.

🛠️ The Tech Stack

• Frontend: React, TypeScript, Tailwind CSS
• Core Feature: AI-driven prompt parsing to UI generation
• UX focus: Minimalist, high-contrast premium UI

🖥️ Implementation Highlights (Home Page)

Today I built the Landing Hero Section. The key focus was ensuring a robust, type-safe submission flow.

Highlights:

1. TypeScript-driven Event Handling: Using React.FormEvent to type the submission handler.
2. State Orchestration: Managing loading states for the AI request lifecycle.
3. Guard Clauses: Ensuring authentication and non-empty inputs before hitting the API.

typescript
const onSubmitHandler = async (e: React.FormEvent) => {
  e.preventDefault();
  if (!session?.user) return toast.error("Please sign in");
  setLoading(true);
  // Simulate AI API Call
  const { data } = await api.post("/api/user/project", { initial_prompt: input });
  navigate(`/projects/${data.projectId}`);
};