React Challenges

This repo is a collection of small, focused React projects built with TypeScript and styled Tailwind CSS. Each project tackles a specific UI pattern, game, or data-driven interaction. The goal is to practice core frontend skills: managing state, handling events, working with effects and data, and building clean, responsive interfaces using modern React tools.

What I Practiced

• React Fundamentals: Components, props, state, and event handling
• React Hooks: useState, useEffect, useRef
• State Management: Structuring and updating state for interactive UIs
• Styling: Responsive layouts and custom designs with Tailwind CSS
• APIs & Data Fetching: Using fetch and handling asynchronous data
• Problem Solving: Breaking down requirements and implementing solutions step by step

Projects & Concepts

• Rock Paper Scissors: Classic hand game handling user interactions and game logic
• Stopwatch: Timer with start, stop, and reset using interval timers and UI updates
• Dice Roller: Simple dice rolling simulator with randomization and UI interactions
• Traffic Light: Animated traffic light simulator with conditional rendering and state transitions
• Quote Generator: Random quote generator fetching data from APIs
• Gradient Generator: Customizable gradient generator manipulating CSS gradients dynamically
• Tic Tac Toe: Classic game with win detection and game state management
• Whack-a-Mole: Arcade game using timers, event handling, and animations
• Quiz: Interactive quiz app with scoring and user input management
• Expense Tracker: Basic expense tracking app managing state with React hooks
• Calculator: Fully functional calculator with React state and operations
• Hangman: Classic word guessing game with state and conditional rendering
• Password Generator: Generate secure passwords with customizable options
• Split View: Resizable split pane interface using flexbox and responsive layouts
• Folder Tree: Recursive component rendering hierarchical data
• Memory Game: Card-matching game using useEffect and component state
• Histogram: Dynamic bar chart visualization for data

Tech Stack

• React 19
• TypeScript
• TanStack Router
• Tailwind CSS

How to Run

To run the challenges locally, clone the repo and run:

1. npm i
2. npm run dev
3. open http://localhost:3000