React & TypeScript
Modern component architecture
Tailwind CSS
Custom design systems
Full-Stack
Database, APIs & deployment
AI Integration
Smart features & automation
Live Code Preview
Explore the actual codebase powering this website
my-project — Abdulhadi IDE
main
1import { useState } from "react";
2import Header from "./components/Header";
3import Card from "./components/Card";
4import Modal from "./components/Modal";
5
6const App = () => {
7 const [showModal, setShowModal] = useState(false);
8
9 return (
10 <div className="min-h-screen bg-background">
11 <Header />
12 <main className="container mx-auto py-12 px-4">
13 <h1 className="text-4xl font-bold mb-8">
14 Dashboard
15 </h1>
16 <div className="grid grid-cols-3 gap-6">
17 <Card title="Revenue" value="$12,450" />
18 <Card title="Users" value="1,234" />
19 <Card title="Orders" value="567" />
20 </div>
21 </main>
22 {showModal && <Modal onClose={() => setShowModal(false)} />}
23 </div>
24 );
25};
26
27export default App;
09:23:15[vite] dev server running at http://localhost:5173/
09:23:16✓ React app mounted successfully
09:23:16✓ Theme initialized: dark mode
09:23:17⚠ No cached data, fetching from API...
09:23:18✓ Fetched 12 dashboard items
09:23:18✓ Auth session restored
09:23:19[HMR] connected
09:24:02✓ User preferences saved