Ready to Challenge Yourself?

Welcome to the codebase for the interactive examples! This code base has 20 different React examples you can use to practice your react skills for personal learning or interview practice. Most of these challenges are geared towards beginners and should be easy to solve within 15-30 minutes. Some of more intermediate and might take longer to solve. If you enjoyed checking out the code for these challenges, checkout the paid course I created with over 6 hours of walkthrough videos explaining how to solve these challenges:

https://webdevcody.gumroad.com/l/beginner-react-challenges-collection

Challenges

• Calculator 🔢 - Build a functional calculator with basic operations
• Connect Four 🔴 - Create the classic two-player connection game
• Dice 🎲 - Build a simple dice rolling simulator
• Expense Tracker 💰 - Create a basic expense tracking application
• Gradient Generator 🎨 - Build a customizable gradient generator
• Hangman 🎯 - Implement the classic word guessing game
• Tower of Hanoi 🗼 - Implement the classic Tower of Hanoi puzzle game
• Histogram 📊 - Create a dynamic bar chart visualization
• Memory Game 🎴 - Build a card-matching memory game
• Quiz ❓ - Build an interactive quiz with scoring
• Quote Generator 💭 - Create a random quote generator
• Rock Paper Scissors ✂️ - Build the classic hand game
• Simon Says 🎮 - Create the classic memory skill game
• Speed Typing ⌨️ - Build a typing speed test application
• Split View ↔️ - Build a resizable split pane interface
• Stopwatch ⏱️ - Create a timer with start, stop, and reset
• Tic Tac Toe ⭕ - Implement the classic game with win detection
• Traffic Light 🚦 - Create an animated traffic light simulator
• Tree Visualization 🌳 - Render a hierarchical tree structure
• Whack-a-Mole 🔨 - Build the classic arcade game

How to Run

These examples are built using TanStack Router and React, providing a modern, type-safe routing solution. Running the examples locally allows you to:

• Explore the code implementation of each challenge
• Experiment with modifications and improvements
• Debug and understand React patterns in practice
• Test your solutions against working examples

To run the examples locally, first clone this repository, then follow these steps:

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