Day 179 of Learning MERN Stack

Hello Dev Community! 👋

It is Day 179 of my full-stack engineering milestone journey! Today, I built the My Projects Dashboard UI for the AI Website Builder platform! 🚀🎨

Here is a breakdown of how I designed a card grid layout with dynamic live preview rendering using TypeScript and React.

🛠️ Architecture & UI Highlights

1. Miniature Live Previews via Scaled iFrames

Instead of storing static preview thumbnails, I embedded live preview previews using scaled iframe rendering directly from stored markup strings:

tsx
<iframe
  srcDoc={project.current_code}
  className="absolute top-0 left-0 w-[1200px] h-[800px] origin-top-left pointer-events-none"
  sandbox="allow-scripts allow-same-origin"
  style={{ transform: 'scale(0.25)' }}
/> const [loading, setLoading] = useState<boolean>(true);
const [projects, setProjects] = useState<Project[]>([]);

const deleteProject = async (projectId: string) => {
  console.log(projectId);
};