Skip to main content

Learn React by Building

Explore three practical React applications demonstrating modern patterns, custom hooks, and API integration. From weather forecasts to GIF searches, learn by doing.

Get startedExplore projects

Quick start

Get up and running with any of the three projects in minutes

1

Clone the repository

Start by cloning the React Mini Projects repository to your local machine.
git clone https://github.com/AndrewHerrada/React-mini.git
cd React-mini
2

Choose a project

Navigate to one of the three available projects:
  • weather-finder - Real-time weather forecasts with Open-Meteo API
  • gifs-app - GIF search engine using Giphy API
  • hooks-app - React Hooks demonstrations and patterns
cd weather-finder  # or gifs-app, or hooks-app
3

Install dependencies

Each project uses pnpm for package management. Install dependencies:
pnpm install
4

Start development server

Launch the development server and start exploring:
pnpm dev
Your application will be running at http://localhost:5173

Explore projects

Three fully-featured applications to learn from

Weather Finder

Real-time weather forecasts using Open-Meteo API with geolocation search

GIFs App

Search and browse GIFs powered by Giphy API with smart caching

Hooks Demo

Interactive demonstrations of useState, useEffect, and custom hooks

Key features

Modern React patterns and best practices

Custom Hooks

Learn to build reusable hooks for state management, data fetching, and side effects

API Integration

Real-world examples of fetching and managing data from external APIs

Component Patterns

Reusable components with TypeScript interfaces and prop validation

TypeScript

Full TypeScript support with type-safe props, interfaces, and API responses

Learning paths

Choose your learning journey

Component library

Explore reusable components like SearchBar, CustomHeader, and display components

Custom hooks

Deep dive into useWeather, useGifs, and useCounter hook implementations

State management

Learn state patterns with useState, useRef, and local storage

API patterns

Master data fetching, caching, and error handling strategies

Ready to start building?

Clone the repository and start exploring these React projects. Each application is fully functional and ready to customize.

Installation guide

Build docs developers (and LLMs) love

Get started for freeTalk to us