Projects Overview

📁 Projects

1. crud-system - Reusable CRUD Management System

A production-ready, type-safe CRUD system built with Next.js, Formik, and Yup.

Features:

• ✅ Fully reusable - Add 100s of CRUDs by just defining schemas
• ✅ Type-safe with Yup inference - No any types
• ✅ Optimized with React best practices (memo, useCallback, useTransition)
• ✅ Per-row loading indicators
• ✅ Real-time validation with error messages
• ✅ Delete confirmations with toast notifications
• ✅ Atomic design architecture
• ✅ Clean, organized codebase

Tech Stack:

• Next.js 16
• React 19
• TypeScript (strict mode)
• Formik + Yup
• Shadcn UI
• Tailwind CSS 4

Quick Start:

cd crud-system
npm run dev

Visit: http://localhost:3000/crud

Documentation:

• docs/README.md - Complete technical documentation
• docs/QUICKSTART.md - For beginners
• docs/OPTIMIZATIONS.md - React optimizations applied
• docs/STRUCTURE.md - Project structure

---

2. react-learning - React Core Concepts

Learning materials and examples for React hooks and APIs.

Topics Covered:

• State hooks (useState, useReducer)
• Effect & Ref hooks (useEffect, useRef, useLayoutEffect)
• Performance hooks (useMemo, useCallback, useTransition)
• Context & Other hooks (useContext, useId, useSyncExternalStore)
• React APIs (memo, lazy, cache, use)

---

🚀 Getting Started

Each project has its own README with specific instructions.

📚 Documentation

All projects include comprehensive documentation in their respective docs/ folders.