Front-End Learning Path from Youtube Videos

React-Three/Fiber mini course

A frontend-only hotel booking landing page built for learning and instruction. It demonstrates a responsive single-page application (SPA) where users can browse luxury rooms, filter by guest capacity (adults/kids), pick check-in/check-out dates, and view detailed room information, ideal for understanding React patterns, Context API, routing, layout

A modern, single-page landing site for an AI chat product. It is built as a front-end showcase with React, Vite, TypeScript, and Tailwind CSS. The project is aimed at learning and reuse: you get a full landing layout (hero, features, pricing, roadmap, footer), scroll-based animations with Framer Motion, a responsive header with mobile menu

基于React开发的仿韩寒「ONE · 一个」webapp，适合新手练习的上手项目，欢迎 Star 和 Fork 。 官方网站：

An interactive, single-page product showcase inspired by the Apple iPhone 15 Pro experience. It is built for learning & instruction: you get a full React + TypeScript codebase with 3D (Three.js), scroll & timeline animations (GSAP), & a responsive UI (Tailwind CSS). There is no backend or database, a small proxy endpoint for Sentry error monitoring

A modern, user-friendly language translator web application built with Next.js, React, and TypeScript. It uses the free MyMemory Translation API to translate text between dozens of languages. The app features a responsive UI with TailwindCSS, smooth animations via Framer Motion, and a server-rendered shell for fast first paint—ideal for learning

There are list of Learning project build using React application

Documented journey through Namaste React by Akshay saini combining theory and practical React insights in deapth - perfect for solidifying core concepts to zero to hero , revision and more.

A beginner-friendly todo list application built with React, Vite, and TypeScript. It demonstrates core React concepts—state management, Context API, custom hooks, and reusable components—with no backend: all data is stored in the browser’s localStorage. Use it to add, edit, delete tasks, switch themes, learn how a React app is structured & run

A simple React Todo List application designed for learning React fundamentals.

Calendar App is a React-Vite Calendar To-Do List project, using Calendar, select any day of month of year, set the clock hour for the day to remind the plan, also plan can be changed and edited with delete options and deploy on Vercel.

A dynamic, web-based gym & fitness training application built with Next.js, React, TypeScript, Tailwind CSS. It provides intelligent workout generation, exercise guidance, & personalized training plans using in-browser logic—no backend or API required. The app is designed both as a practical fitness tool and as an educational codebase

A modern, fully-featured, customizable admin dashboard built with React, Next.js, TypeScript, Material-UI, Recharts, and Tailwind CSS. This project is designed for learning, rapid prototyping, & real-world admin panel use cases. It demonstrates responsive layout, theme switching (light/dark), data grids, charts, forms, calendar, reusable component

A full-stack movie discovery web app built with Next.js, React, TypeScript, powered by The Movie Database (TMDB) API. It demonstrates modern patterns: App Router, server-side rendering, client components, TailwindCSS styling, Framer Motion animations, reusable UI. Ideal for learning & teaching Next.js, API integration, component-based architecture

A React application demonstrating tab functionality: it displays job information fetched from an external API and lets users switch between jobs using interactive buttons. The project focuses on React fundamentals—state management, side effects, component structure, props, list keys, and working with APIs

A learning-focused Unsplash image search app built with React, Vite, TypeScript, React Query, and Context API. It demonstrates real-world patterns: fetching from an external API, global state, dark/light theming, skeleton loading, image modal view, and local download—all in a single-page, responsive UI. Use it as a reference for API integration

React Learning Repo contain many hooks method

A learning-focused, responsive Navbar built with React and Vite. It demonstrates client-side routing, React hooks (useState, useRef), dynamic layout (mobile toggle, desktop inline links), and reusable data-driven components. Use it as a reference for building navigation in single-page applications or as teaching material for React fundamentals

A monorepo with two separate implementations of a Shopify-style image swiper: one with **jQuery + Swiper.js + plain HTML/CSS**, and one with **React + TypeScript + Swiper.js + Tailwind CSS + Vite**. Both are static, client-side only, and aimed at learning and reuse. No backend or environment variables are required to run either project

“A collection of hands-on React exercises built with reusable components, designed to help beginners and learners grasp React concepts step by step. Each exercise demonstrates core features like props, state, hooks, and component structure—making React easy to learn and apply in real projects.”

A hands-on React app that generates color palettes from any hex color. Enter a hex code or use the built-in color picker to get a full set of tints and shades, then copy any hex value to the clipboard with one click. Built with React, Vite, values.js, and react-toastify—ideal for learning component state, third-party libraries, & the Clipboard API

Learning React Native

react-course learning by doing

A full-stack style weather application that goes beyond a simple temperature readout: it combines live OpenWeather data, 5-day forecast, air quality, dynamic Unsplash backgrounds, AI-generated weather summaries & farming tips (via server API routes), a glassmorphism UI built with Next.js App Router, React, TypeScript, Tailwind CSS, Framer Motion

A personal learning hub for exploring React.js fundamentals, hooks, routing, state management, and hands-on mini-projects.

This repo contains web projects built with React and other technologies

A beginner-friendly, educational blog application built with React, Vite, TypeScript, Firebase (Firestore & Auth), and TailwindCSS. It demonstrates full CRUD operations, Google and email/password authentication, protected routes, and reusable patterns (Context API, custom hooks, TypeScript types). Use it to learn modern React and Firebase

A learning-focused React application that demonstrates two ways to build an image slider: a custom carousel from scratch using React hooks, and a library-based carousel using React Slick. It is ideal for understanding state management, effects, event handling, and third-party library integration in React

A modern, responsive travel & tourism landing page built with React, Vite, TypeScript, Tailwind CSS, Framer Motion. This project is designed as both a learning resource and a practical template: it demonstrates reusable components, Context API, custom hooks, type-safe props, and animated UI. Use it to discover featured tours