React Projects

A collection of React applications demonstrating modern development practices, from fundamental concepts to advanced full-stack implementations.

Table of Contents

• Projects Overview
• Technical Stack
• Core Concepts Covered
• Installation
• Development Notes
• License

---

Projects Overview

1. Notes App

A note-taking application with local storage persistence.

Key Concepts: Form handling, CRUD operations, local storage API, state management

2. Simple Timer

A timer application demonstrating data persistence across page reloads.

Key Concepts: useRef hook, data persistence, DOM manipulation

3. Shopping Cart UI

A shopping cart application with global state management using Context API.

Key Concepts: useContext hook, Context API, global state management, cart functionality

4. GitHub Finder

A GitHub user search application with API integration.

Key Concepts: API integration, data fetching, caching strategies, error handling

5. Crypto Dash

A cryptocurrency dashboard displaying real-time prices and market information.

Key Concepts: External API consumption, dashboard architecture, real-time data handling

6. Idea Drop

A full-stack MERN application for sharing and managing ideas with authentication.

Key Concepts: Full-stack development, authentication with access and refresh tokens, HTTP-only cookies, RESTful API design

7. The Friendly Dev

A portfolio website and blog with headless CMS integration.

Key Concepts: Server-side rendering, routing (framework mode), CMS integration, SEO optimization

Technical Stack

Frontend

• React 19
• React Router v7
• TanStack Query
• TanStack Router

Backend

• Node.js
• Express
• MongoDB

Database

• Neon

CMS

• Strapi

Deployment

• Vercel (Frontend)
• Render (Backend)

Development Tools

• React DevTools
• Vite

Core Concepts Covered

Fundamentals

• JSX syntax and component structure
• Props and state management
• Event handling
• Conditional rendering
• Component composition

React Hooks

• useState - State management
• useEffect - Side effects and lifecycle
• useRef - Reference management
• useContext - Context API for global state

Advanced Topics

• Component lifecycle management
• Modern routing with React Router v7
• Data fetching and caching with TanStack Query
• Authentication and authorization
• Server-side rendering
• Full-stack MERN architecture

Installation

Each project is self-contained in its own directory. General setup steps:

# Clone the repository
git clone https://github.com/akabaytar/react-projects.git

# Navigate to project directory
cd react-projects/[project-name]

# Install dependencies
npm install

# Start development server
npm run dev

Development Notes

Each project is designed to progressively build upon previous concepts, providing a structured learning path through the React ecosystem. Projects range from simple component-based applications to complex full-stack implementations with authentication and database integration.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

---

Built with React and modern web technologies.