My Stack

Mehdi Parandak

A 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:

7. Best Practices