I'm Aldi, a 16-year-old student at SMK Muhammadiyah 1 Sukoharjo.
I focus on frontend development, building interfaces that are fast, accessible, and visually striking.
I care about user experience and love writing clean, maintainable code.
DevConnect 🤝 Collab
Fullstack web app where developers can find collaborators for projects.
| Frontend | React 19, TypeScript, TailwindCSS v4, Shadcn/UI, TanStack Query, React Hook Form + Zod, Socket.IO Client (My Core Focus) |
| Backend | Express 5, TypeScript, Prisma ORM, PostgreSQL, JWT + Google OAuth (Built in collaboration with a friend) |
| Highlights | • Real-time collaboration posts • Advanced form validation & state management • Secure authentication • Custom user profiles & tech stack filtering |
Food Ordering System 🤝 Collab
Fullstack e-commerce application with a complete admin dashboard.
| Frontend | React, TypeScript, TailwindCSS (My Core Focus) |
| Backend | Express, Prisma, PostgreSQL (Built in collaboration with a friend) |
| Highlights | • Order tracking & cart management • Image uploads via Multer • Responsive admin dashboard |
Recipe discovery application with a focus on clean UI/UX.
| Tech Stack | React, Vite, TailwindCSS, Radix UI |
| Highlights | • Resizable split panels • Instant search & filtering • High performance |
Portfolio Websites (v1 & v2)
Personal websites showcasing different UI/UX approaches.
| Tech Stack | HTML, TailwindCSS, JavaScript |
| Highlights | • V1: Minimalist aesthetic with a custom LocalStorage CMS • V2: Modern Neo-Brutalism design |
I have transitioned from foundational learning to building complex, scalable architectures. Here is what I am actively exploring and applying in my current projects:
| Focus Area | Current Application |
|---|---|
| Modern React Ecosystem | Applying React 19, TanStack Query for server state, and React Hook Form + Zod for robust client-side validation in DevConnect. |
| Fullstack Backend Design | Designing relational databases with Prisma ORM & PostgreSQL, and building RESTful APIs using Express 5. |
| Real-time Web | Integrating Socket.IO for live features and real-time data updates. |
| Next.js & SSR | Deep diving into Server Components and the Next.js ecosystem for SEO and performance optimization. |
I believe in building in public and maintaining a structured development environment:
Documents/
├─ learning/
│ ├─ react/ (Advanced React projects: Food Ordering, MyRecipe)
│ ├─ nextjs/ (Exploring Next.js framework & Server Components)
│ └─ project/ (Current active workspace)
│ ├─ DevConnect/ (Fullstack Monorepo)
│ │ ├─ client/ (React, Tailwind v4, TanStack Query)
│ │ └─ server/ (Express, Prisma, Socket.IO)
│ └─ portfolio-aldiii/ (Deployed on Vercel)
└─ RepositoryGit/
└─ WorkshopWeb/ (GDG Workshop projects & tech explorations)