My Stack
Mehdi ParandakA curated collection of tools and technologies that power my development workflow, chosen for their reliability, type safety, and developer experience.
1. Core Technologies (TypeScript and React)
TypeScript and React form the foundation of all my projects. The type safety and ecosystem of TypeScript combined with React's component model has proven to be incredibly productive since I started using them.
2. State Management (Zustand)
For state management, I chose Zustand for its simplicity and powerful developer tools. It provides a minimal API that works perfectly with TypeScript.
Zustand Store Example
type StoreState = {
items: string[];
addItem: (item: string) => void;
};
let useStore = create<StoreState>((set) => ({
items: [],
addItem: (item) =>
set((state) => ({
items: [...state.items, item],
})),
}));
3. Framework (Next.js)
Next.js gives me the perfect balance of static and server-side rendering capabilities. I leverage the App Router for modern React features and server components.
Server Component Example
export default async function Page() {
let items = await db.items.findMany();
return (
<section className="space-y-4">
<h1 className="text-2xl font-bold">Items</h1>
<ItemList items={items} />
</section>
);
}
4. Styling (Tailwind CSS and Motion)
Tailwind CSS has become my go-to for styling. Its utility-first approach speeds up development and makes responsive design intuitive. For animations, I rely on Motion to create smooth, professional transitions.
Animation Component Example
function FadeInSection({ children }) {
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="p-4 rounded-lg shadow-sm bg-white"
>
{children}
</motion.div>
);
}
5. Database (Postgres and Drizzle)
Postgres is my database of choice, and I use Drizzle as my ORM. The type-safety and developer experience of Drizzle make database operations both safe and enjoyable.
Drizzle Schema Example
export const users = pgTable("users", {
id: serial("id").primaryKey(),
name: text("name"),
email: text("email").notNull(),
createdAt: timestamp("created_at").defaultNow(),
});
export const posts = pgTable("posts", {
id: serial("id").primaryKey(),
title: text("title").notNull(),
content: text("content"),
authorId: integer("author_id").references(() => users.id),
});
6. Development Environment
My development setup has evolved to maximize productivity:
- Editor: Recently switched from VSCode to Zed for its speed and modern features
- Planning: Notion for documentation and project planning
- Project Management: Linear for its beautiful UI and efficient issue tracking
- API Testing: Postman for API development and testing
7. Best Practices
- TypeScript strict mode enabled by default
- Component-first architecture with Next.js App Router
- Tailwind for styling with custom design tokens
- Database migrations with Drizzle
- Linear for running projects in cycles