⚛️ React Workshop

Building. Experimenting. Learning by Doing.

A hands-on collection of projects exploring React, state management, form validation, and full-stack development with Next.js.

Projects · Tech Stack · Getting Started · Learning Goals

---

📂 Projects

A growing collection of applications, each designed to explore specific concepts and put them into practice.

🧩 React Fundamentals

Forms with React Practice building forms using native React capabilities. Explores Controlled form inputs React state management Form submission and validation Stack: React · TypeScript · Vite

Forms with Libraries Build structured forms using dedicated form and validation libraries. Explores React Hook Form Schema validation with Zod Reusable UI components Stack: React · TypeScript · React Hook Form · Zod · shadcn/ui

🔄 State Management

Product Catalog Explore product browsing and shopping cart management. Explores Context API useReducer Custom hooks Shared application state Stack: React · TypeScript · Vite · Tailwind CSS · shadcn/ui	Recipe Explorer Discover recipes and manage favorite recipes through Redux. Explores API integration Search and filtering Redux Toolkit Centralized state management Stack: React · TypeScript · Redux Toolkit
Community Feed Build an interactive feed with post management and server-state handling. Explores REST API integration Create, read, update, and delete operations Redux Toolkit Query (RTK Query) Query caching and cache invalidation Loading and error states Stack: React · TypeScript · Redux Toolkit · RTK Query · Vite · Tailwind CSS · shadcn/ui

▲ Full-Stack Development

Mini E-commerce Build an e-commerce storefront using the Next.js App Router. Explores Server and Client Components File-based routing and route groups Dynamic product pages Data fetching and caching Authentication and session management Protected routes and redirects Form handling and schema validation Stack

---

🛠️ Tech Stack

Category	Technologies
Frontend	React, TypeScript, JavaScript
Frameworks & Tooling	Next.js, Vite
State Management	Context API, useReducer, Redux Toolkit, RTK Query
Forms & Validation	React Hook Form, Zod
Styling & Components	Tailwind CSS, shadcn/ui, Lucide React
Authentication & Database	Better Auth, SQLite

---

🚀 Getting Started

Each project has its own dependencies and setup instructions.

To explore a project:

1. Browse the project directories.
2. Open the project's README.
3. Follow its installation and configuration instructions.
4. Run the application locally and explore the implementation.

---

🎯 Learning Goals

This repository is a practical space to:

• Strengthen React fundamentals through hands-on development.
• Explore different approaches to state management.
• Work with APIs, asynchronous operations, and caching.
• Build accessible, reusable user interfaces.
• Understand form handling and validation.
• Learn Next.js routing, rendering, and authentication patterns.
• Develop the habit of organizing applications into maintainable modules.

---

Learn the concepts. Build the projects. Understand the trade-offs.

One project at a time.