Open for Work

Adin Fauzan

Focused on modern frontend architecture, clean UI systems, and developer experience.

View Projects Contact Me

My Projects

A curated selection of projects I've designed and built.

Anime Community

Soraku

Anime community platform for fans to discuss, share, and track their favorite series.

Next.jsTailwind CSSSupabaseTypeScript

View Case Study

Productivity

TaskFlow

Productivity app with real-time collaboration, Kanban boards, and team management.

ReactTypeScriptNode.jsSocket.ioPostgreSQL

View Case Study

My Daily

Quick dev snippets, tips, and mental models.

CSS

Flexbox Mental Model

Think of flexbox as a one-dimensional layout system. Main axis flows left-to-right by default (row), cross axis flows top-to-bottom. Use justify-content for main axis alignment, align-items for cross axis.

Nov 204,500

Next.js

Next.js Data Fetching

Server Components let you fetch data directly in your component. No more getServerSideProps. Just use async/await in your component and it works. The data is fetched on the server and sent to the client.

Oct 153,800

React

Why React Keys Matter

Keys help React identify which items have changed, been added, or removed. Without keys, React may reorder elements unpredictably. Always use stable IDs, not array indices.

Sep 222,900

TypeScript

Type Narrowing in TypeScript

Use typeof, instanceof, in, and custom type guards to narrow types. TypeScript will automatically narrow within conditional blocks. Custom type guards return type predicates.

Aug 182,100

Tailwind

Responsive Design with Tailwind

Tailwind uses mobile-first breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Prefix utilities with breakpoint names: md:text-lg means apply text-lg at md and above.

Jul 101,800

Framer Motion

Layout Animations with Framer Motion

Add the layout prop to any motion component and it will automatically animate to its new position. Combine with layoutId for shared element transitions between routes.

Jun 53,200

View all snippets