React Frontend Projects Collection

---

Overview

This repository contains 38 React practice projects built while learning frontend development through freeCodeCamp, The Odin Project, and independent experimentation.

Each project is self-contained and focuses on a specific React concept or combination of concepts. The projects range from simple component exercises to multi-page applications with routing, state management, and API integration.

These projects demonstrate proficiency in:

• React fundamentals and JSX syntax
• Component architecture and reusable UI design
• State management with useState, useReducer, and useMemo
• Side effects and data fetching with useEffect
• DOM manipulation with useRef
• Event handling and controlled inputs
• Reusable UI component patterns
• Frontend project structure and tooling with Vite

---

Learning Journey

These projects were built while transitioning from JavaScript fundamentals to modern frontend frameworks. The progression moves from basic component rendering to complex application architecture.

The primary goal was to develop a deep understanding of:

• Component-based architecture and composition
• Props, state, and data flow between components
• React hooks (useState, useEffect, useReducer, useMemo, useRef)
• Controlled forms and event handling patterns
• Lifting state up and sharing state across components
• Client-side routing with React Router
• Building interactive, user-facing interfaces

The projects increase in complexity as new concepts are introduced, reflecting the actual learning progression from simple rendering to full application development.

---

Technologies Used

Technology	Purpose
React 18+	UI library and component model
Vite	Development server and build tool
JavaScript (ES6+)	Application logic
HTML5	Markup structure
CSS3	Styling and layout
React Router	Client-side routing
Git	Version control
GitHub	Remote repository and collaboration
GitHub Pages	Static site deployment

---

Repository Structure

frontend-projects-collection/
│
├── 01-my-first-react-app/
├── 02-reusable-footer/
├── 03-reusable-profile-card/
├── 04-mood-board/
├── 05-chemists-list/
├── 06-recipes-list/
├── 07-my-recipes-app/
├── 08-my-poem-app/
├── 09-quote-list/
├── 10-gallery/
├── 11-avatar-size/
├── 12-color-selector/
├── 13-sculpture-image-rendercd/
├── 14-hello-app/
├── 15-feedback-page/
├── 16-menu-list/
├── 17-planet-hopper/
├── 18-packing-list/
├── 19-inbox-page/
├── 20-wikipedia/
├── 21-synced-inputs/
├── 22-menu-matcher/
├── 23-resume-generator/
├── 24-event-registration-app/
├── 25-chat-room/
├── 26-space-trip-planner/
├── 27-todos-app/
├── 28-memory-card-game/
├── 29-todo/
├── 30-react-router-demo/
├── 31-my-page/
├── 32-shopping-cart/
├── 33-online-courses/
├── 34-movie-explorer-app/
├── 35-email-chat/
├── 36-focus-input/
├── 37-image-scrolling/
├── 38-playing-pausing-video/
│
├── docs/
└── README.md

---

Project Categories

UI Components

Projects focused on building reusable, composable UI elements.

#	Project	Key Concept
02	Reusable Footer	Reusable component structure
03	Reusable Profile Card	Props-driven components
04	Mood Board	Component composition
10	Gallery	Data-driven rendering
11	Avatar Size	Dynamic props and conditional rendering
36	Focus Input	useRef for DOM access

Interactive Applications

Projects demonstrating state-driven interactivity.

#	Project	Key Concept
13	Sculpture Image Gallery	useState with navigation
16	Menu List	Editable list state
19	Inbox Page	Multi-select with Set
20	Wikipedia Accordion	Lifted state
22	Menu Matcher	Filterable lists
28	Memory Card Game	Game state logic
37	Image Scrolling	useRef for scroll control
38	Playing/Pausing Video	useRef for media control

Forms and Data Handling

Projects focused on controlled inputs, form state, and data entry patterns.

#	Project	Key Concept
14	Hello App	Controlled inputs
15	Feedback Page	Async form submission
18	Packing List	CRUD with state
21	Synced Inputs	Shared state across inputs
23	Resume Generator	Form-driven document generation
24	Event Registration App	Multi-field form handling

Data Rendering

Projects that render lists and structured data from arrays and objects.

#	Project	Key Concept
05	Chemists List	Mapping over data arrays
06	Recipes List	List rendering
07	My Recipes App	Component decomposition
08	My Poem App	Static content components
09	Quote List	Rendering component collections
12	Color Selector	Interactive selection state
17	Planet Hopper	Nested data structures with useImmer

Effects and Async Patterns

Projects demonstrating useEffect, data fetching, and side effect management.

#	Project	Key Concept
25	Chat Room	useEffect with cleanup
26	Space Trip Planner	Chained useEffect with API calls
27	Todos App	useMemo for derived state
35	Email Chat	useReducer for complex state

Application Simulations

Larger, multi-page applications with routing and persistent state.

#	Project	Key Concept
01	My First React App	Project scaffolding, Vite
29	Todo	Class and functional components
30	React Router Demo	Client-side routing
31	My Page	Personal site with nested routes
32	Shopping Cart	Multi-page app with cart state
33	Online Courses	Enrollment state management
34	Movie Explorer App	Auth, localStorage, favourites

---

React Architecture Overview

The following diagram illustrates the data flow pattern used across all projects in this collection:

graph TD
    A[User Interaction] --> B[Event Handler]
    B --> C[State Update via useState / useReducer]
    C --> D[React Virtual DOM Diffing]
    D --> E[DOM Re-render]
    E --> F[Updated UI]
    F --> A

    G[useEffect] --> H[Side Effect / API Call]
    H --> C

    I[useRef] --> J[Direct DOM Access]
    J --> K[Imperative Control]

Loading

---

Running Projects Locally

Each project is a standalone application. To run any project:

# Navigate to the project folder
cd 01-my-first-react-app

# Install dependencies
npm install

# Start the development server
npm run dev

Projects bootstrapped with Create React App use:

npm install
npm start

---

Deployment

Projects are deployed to GitHub Pages using Vite's build output stored in the docs/ folder.

To build a project for deployment:

npm run build

Copy the output from the project's dist/ folder to the top-level docs/ folder with the appropriate subfolder name for GitHub Pages routing.

Live demos are available at: https://sadykovismail.github.io/frontend-projects-collection/<project-folder>/

---

Screenshots

---

License

This repository is licensed under the MIT License.

You are free to use, copy, modify, and distribute this code for any purpose with attribution.