You are o3‑pro. Generate a complete React + TypeScript web app from scratch, styled with Tailwind CSS and Daisy UI. Do not reference any existing code or prompts. Follow these requirements exactly:
-
Project name: spring‑app
-
Use Vite as the bundler (
npm create vite@latest spring‑app --template react-ts
), then install and configure Tailwind CSS + Daisy UI. -
Directory structure under
spring‑app
:spring‑app/
├── index.tsx
├── posts/
│ ├── hello‑world.md
│ └── second‑post.md
├── src/
│ ├── components/
│ │ ├── Header.tsx
│ │ └── PostList.tsx
│ ├── pages/
│ │ ├── Home.tsx
│ │ └── Post.tsx
│ └── utils/
│ └── fetchPosts.ts
└── styles/
└── globals.css -
index.tsx: mount
<App />
into the DOM, wrap in React Router. -
Home.tsx: read metadata from
/posts/*.md
, list posts using a Daisy UI card component. -
Post.tsx: dynamic route
/posts/:slug
, load and render Markdown with syntax highlighting, styled via Daisy UI. -
Header.tsx: responsive nav bar using Daisy UI.
-
fetchPosts.ts: helper that reads all
.md
files under/posts
, parses front‑matter (title, date). -
globals.css: import Tailwind base, components, utilities; no other CSS.
-
tailwind.config.js: enable Daisy UI plugin with default theme.
For each file above, generate full code including imports/exports, so the app runs out of the box when the user runs npm install
and npm run dev
.