This repository documents my complete learning and revision journey of React.js and Next.js through a structured, project-based learning approach.
The goal of this repository is to revise core concepts, practice modern workflows, and build real-world projects, including AI-powered applications.
Hi, I’m Kapil Sarkar 👋
A frontend developer focused on React, Redux Toolkit, and Next.js, currently strengthening my fundamentals and building production-ready projects.
🔗 GitHub Profile: https://github.com/kapilsarkar
- React fundamentals & advanced concepts
- Next.js (App Router, Routing, Data Fetching)
- Full-stack development patterns
- Authentication & database integration
- AI-powered features and projects
- Performance optimization & deployment
This repo serves as:
- 📚 Personal revision notes
- 🧪 Practice playground
- 🧱 Mini & full-scale projects
- 🧑💻 Future reference & portfolio proof
Frontend
- React.js
- Next.js
- JavaScript (ES6+)
- Tailwind CSS / CSS Modules
State & Data
- React Hooks
- Context API / Zustand
- Server & Client Components
Backend & Tools
- API Routes
- Authentication
- Database integrations
- AI APIs (OpenAI / Gemini – as per course)
Other Tools
- Git & GitHub
- VS Code
- npm / pnpm
| Folder Name | Purpose |
|---|---|
react-basics/ |
Core React concepts like JSX, components, props, state, and events |
react-hooks/ |
Practice and examples for hooks (useState, useEffect, useRef, useMemo, custom hooks) |
nextjs-fundamentals/ |
Next.js basics including routing, layouts, navigation, and SEO |
data-fetching/ |
Server & client data fetching, loading states, caching, and revalidation |
authentication/ |
Auth flows, protected routes, and backend integration |
ai-projects/ |
AI-powered features and experiments using APIs |
projects/ |
Mini projects and full-scale applications |
notes/ |
Personal notes, revision summaries, and interview points |
- ✅ Master React fundamentals and hooks
- ✅ Understand Next.js App Router deeply
- ✅ Build scalable, production-ready applications
- ✅ Integrate backend logic and databases
- ✅ Implement AI features in real projects
- ✅ Prepare for interviews and real-world work
- 🔹 React Mini Projects (Hooks, Components, State)
- 🔹 Next.js Routing & Data Fetching Apps
- 🔹 Authentication-based Applications
- 🔹 Full-Stack Dashboard
- 🔹 AI-Powered Chat / Tools
Each project focuses on real-world use cases and best practices.
- Rewatch → Code → Refactor → Document
- Practice concepts independently
- Add notes after every major topic
- Improve projects with better patterns
- Use as revision before interviews
🟡 In Progress
Each commit in this repository represents a specific concept, improvement, or learning milestone.
.
- GitHub: https://github.com/kapilsarkar
- Name: Kapil Sarkar
Happy Coding! 💻✨