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

There are list of Learning project build using React application

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

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 simple React Todo List application designed for learning React fundamentals.

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

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

React Learning Repo contain many hooks method

The library for web and native user interfaces

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

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