75 DAYS OF CONSISTENT FULL-STACK LEARNING
75 Days | 75 Professional README Files | GitHub Documentation
DAY 01 — HTML & CSS Basics
Project: Live Demo
Focus: Semantic HTML, CSS fundamentals, box model, flex basics, pseudo-classes.
DAY 02 — CSS Layouts
Project: Live Demo
Focus: Flexbox, Grid, positioning, responsive layout concepts.
DAY 03 — Project 1
Project: Live Demo
Focus: Product UI, flex layouts, hover effects, absolute & relative positioning, icon usage.
DAY 04 — Projects 2 & 3
Project 2: Live Demo
Project 3: Live Demo
Focus: Project 2 — Fashion UI using flex & positioning
Project 3 — Horizontal scroll, image carousel, flex layouts
DAY 05 — Projects 4 & 5
Project 4: Live Demo
Project 5: Live Demo
Focus: Video backgrounds, overlays, carousel/marquee animations, interactive cards, advanced flex layouts, hover & scroll effects.
🔥 Day 06 — JavaScript Basics
- Variables (let, const, var)
- Data types (string, number, boolean, null, undefined, object)
- Operators (arithmetic, assignment, comparison)
- First mini problems solved 🧩
🔥 Day 07 — Control Flow & Loops
if/else, switch ✅- Loops:
for, while, for...in, for...of 🔁
- Practiced patterns & conditional logic
- 🛠️ Approach: Started with simple examples → debugged → built small programs
🔥 Day 08 — Functions Deep Dive
- Function declaration vs expression vs arrow function
- Default & Rest parameters
- Return values + scope concept
- 🧩 Solved problems with reusable functions
🔥 Day 09 — JavaScript Revision
- Covered everything till now 📚
- Arrays:
map, filter, reduce, includes
- Objects: creation, methods, destructuring, spread
- ES6 essentials (let/const, template literals, arrow fn, spread/rest)
- 🛠️ Approach: Revision via notes + practice problems
🔥 Day 10 — Advanced JavaScript Concepts
- Scope & Hoisting, Closures ⚡
- Async JS: Callbacks → Promises → Async/Await
- DOM Manipulation + Event Handling 🎛
- Error Handling (
try...catch)
- 🍪 Cookies & Sessions
- 💾 LocalStorage & SessionStorage
- 🌐 JSON & Fetch API (AJAX)
- 🛠️ Approach: Learned via mini projects (form storage, API fetch)
- Learned for loop,
prompt(), input validation using isNaN.
- Project → Sum of N natural numbers program.
- ⚡ Key Takeaway: Loops + conditionals = core logic builders.
✅ Day 12 – DOM Manipulation
- Practiced
querySelector, innerHTML, addEventListener.
- Built a Counter App (increment/decrement).
- ⚡ Key Takeaway: DOM bridges HTML structure with dynamic JS updates.
✅ Day 13 – GSAP Animations
- Learned GSAP timeline, stagger, ease.
- Project → Hero section animation.
- ⚡ Key Takeaway: GSAP makes animations smooth, professional, and reusable.
✅ Day 14 – Custom Cursor & Hover Effects
- JavaScript + CSS → tracked
mousemove events.
- Added hover-based highlight effects.
- ⚡ Key Takeaway: Small details like cursor effects improve user experience.
- Integrated locomotive-scroll for smooth scrolling.
- Designed portfolio structure (Hero → Work → About → Footer).
- ⚡ Key Takeaway: Combining animation + smooth scroll = modern UI.
✅ Day 16 – Tailwind CSS Basics
- Installed Tailwind (CDN).
- Explored utility classes (
flex, grid, text-xl, bg-*).
- Rebuilt hero section with Tailwind.
🚀 Days 17–22 Progress — #75DaysFullStackAI
📌 Day 17 — DOM & Events
- Practiced DOM selection, event listeners, and mini-toaster project
- Learned Encapsulation for reusable UI components
- DOM = foundation of interactive web pages
📌 Day 18 — Tailwind Deployment
- Explored Tailwind CLI vs CDN
- Deployed projects successfully:
- Took ~6 hrs of self-learning (with ChatGPT help)
- Clear difference: CLI = scalable projects, CDN = quick prototypes
📌 Day 19 — Website Clone (Animations)
- Cloned Significo.com frontend with animations
- Learned GSAP, Locomotive scroll, and theme switching
- Faced frustration but stayed consistent 💪
- Key Learning → Patience + small wins = growth
📌 Day 20 — Tailwind Clone Project
- Built Significo.com clone (UI only) with Tailwind CSS
- First real Tailwind project → took 7–8 hrs over 2 days
- AI-assisted debugging where stuck
- Key takeaway: Practical cloning teaches structuring & styling
📌 Day 21 — React Basics I
- Started with React setup (Vite, Node.js, npm)
- Learned:
- Components & reusability
- Key prop warning handling
- Fragments (
<>)
- Conditional rendering
- Event handling basics
- Built a Card component and reused multiple times
📌 Day 22 — React Basics II
- Continued React journey 🚀
- Explored deeper:
- Mutable vs Immutable
- Reference vs Primitive
- useState hook basics
- Spread operator & destructuring
- Import/Export (overview)
- Arrow functions & implicit returns
- Map & Filter in React
- Understood Virtual DOM & JSX and how files connect
- Built 2–3 small components linked in
App.jsx
🎯 Reflection (Days 17–22)
- Progressing from vanilla JS → Tailwind → React step by step
- Realized importance of deployment knowledge early
- Tailwind felt tough initially, but cloning projects gave confidence
- React is challenging but exciting → small progress daily adds up
🚀 Days 23–30 — 75 Days Full Stack AI Challenge
This README documents my learnings from Day 23 to Day 30 of my 75 Days Full Stack AI journey.
📅 Day 23 — React useState Deep Dive
useState basics in depth.- Practiced with arrays and objects.
- Advanced array updates (4 practice questions).
- Learned proper immutable state updates.
- Practiced media queries for multiple devices.
- Built first project focused on responsiveness.
- Learned how layouts adapt on different screen sizes.
- Still need more practice on responsive design.
- 🌐 Live Project
📅 Day 25 — React Hooks & Props
- Learned
useState basics.
- Props definition, usage, and importance.
- Props drilling across components.
- Event handling in React.
- Built card & navbar components with add/remove favorites feature.
- Controlled components in React forms.
- Practiced with
useRef and react-hook-form.
- Watched Sheriyans React One-Shot video → revision of:
- React Intro & setup with Vite.
- JSX, Virtual DOM, folder structure.
- useState, CSS handling, functions in React.
- Form handling, two-way binding, props drilling.
- Rendering JSON, Axios API integration.
- React Router DOM, Toastify.
- useEffect, useRef, Context API, Redux Toolkit.
- Framer Motion, Deployment.
- Practiced form handling with
useRef.
- Built cards & forms as components.
- Passed data via props from parent to child components.
- Added/removable data directly via UI.
📅 Day 28 — React Router DOM
- Routes and Route basics.
- React Router DOM properties.
Link and NavLink usage (className & span).- Dynamic routing with
useParams.
- Navigation using
useNavigate.
- Nested routing with
Outlet.
- 🌐 Live Project
📅 Day 29 — API Handling in React
- Practiced API calls:
fetch, ajax, axios.
- Learned GET & POST request handling.
- Faced difficulties staying consistent in study hours.
📅 Day 30 — Lifecycle & Context API
- Lifecycle methods implementation with
useState.
- Three types of
useState: update, rerender, specific component render.
- Reconciliation (Virtual DOM updates).
- Conditional rendering recall (loading states).
- Context API:
createContext, Provider, useContext.
- Implemented Context API in a separate folder.
- Revised dynamic routing with
useParams.
🎯 Final Reflection
From Day 23 to Day 30, I went through major React fundamentals (useState, props, form handling, routing, API calls, lifecycle methods, and Context API) while also practicing responsiveness with CSS.
- Faced challenges with consistency (study hours dropped some days).
- React concepts took longer to grasp, but repetition improved clarity.
- Realized the importance of patience, consistency, and practice.
- Projects and live links helped in solidifying concepts practically.
🚀 React E-Commerce Project (Day 31–36 | #75DaysFullStackAI)
This project is built as part of my 75 Days Full Stack Challenge.
From Day 31 → Day 36, I developed a mini E-Commerce app step by step with React, Routing, Context, API → LocalStorage, and Toastify.
📅 Day-Wise Progress (Short)
- Day 31: Setup with React + Vite, learned basics of components & props.
- Day 32: Fetched products via FakeStore API, Axios integration, basic routes.
- Day 33: Context API for global state, useState/useEffect practice.
- Day 34: React Router DOM –
useParams, useNavigate, nested routes.
- Day 35: Dynamic Nav (unique categories), filter logic, category colors.
- Day 36: Migrated API → LocalStorage, added CRUD + React-Toastify, final polish.
⚙️ Tech Stack
- React + Vite
- Tailwind CSS
- Context API
- React Router DOM
- Axios → LocalStorage
- React-Toastify
✨ Features
- Dynamic Product Listing & Details
- Category-based Filtering
- Global State with Context API
- LocalStorage CRUD (Add, Edit, Delete)
- Toast Notifications
🌐 Links
📝 Reflection
These 6 days taught me:
- How to move step-by-step from basics → CRUD.
- Debugging & persistence when API + LocalStorage failed.
- Coding builds skills, struggles build mindset. 💡
#ReactJS #WebDev #ContextAPI #LocalStorage #Toastify #75DaysFullStackAI
📘 Day 37–40 | Full Recap
This is a short summary of my #75DaysFullStackAI journey from Day 37 to Day 40.
🚀 Day 37 | React Project Clone
- Created Nav, Work Section, Stripes, Product Section, Marquee, Footer.
- Practiced component hierarchy → Parent → Children.
- Focus on reusability & props handling.
🔗 Repo
🔗 Live
🎨 Day 38 | Animations & UI Upgrade
- Added animations in Work & Marquee sections.
- Product → simple divs (plan: replace with videos).
- Footer redesigned.
- Learned: Store, Reducer, Actions,
useSelector, dispatch, payloads.
- Understood boilerplate setup & Redux data flow.
🌐 Day 40 | Redux Thunk + Async Redux
- Practiced async actions & API calls with Redux Thunk.
- Combined multiple reducers (counter + posts).
- Learned async flow with error handling.
🌟 Key Takeaways
- Day 37–38 → Frontend + animation focus.
- Day 39 → Redux state management basics.
- Day 40 → Async Redux + Thunk mastery.
🚀 Full-Stack Movie App — Development Log (Day 41–46)
This document tracks my progress from Day 41 to Day 45 in building the React Movie App Project.
Focus: Implementing advanced frontend features with API integration, infinite scrolling, and detailed pages.
📅 Day 41
Focus: Redux Setup + State Management
- Integrated Redux Toolkit for global state management.
- Created slices for movies, TV shows, trending, and persons.
- Connected Redux with API calls to centralize state.
- Improved data flow: categories (Movies/TV/Persons) now update dynamically.
- Debugged state re-renders to avoid unnecessary API calls.
📅 Day 42
Focus: Infinite Scroll + Sections
- Implemented infinite scrolling with react-infinite-scroll-component.
- Functionalities added for:
- 🔥 Trending
- ⭐ Popular
- 🎬 Movies
- 📺 TV Shows
- 👤 Persons
- Category dropdown → fetches correct data dynamically.
- Added ratings display for all sections.
📅 Day 43
Focus: UI Fixes + Item Details
- Fixed alignment issues in Topnav (search box).
- Trending section now supports all categories properly.
- Added item details view (Movies/TV/Persons).
- External links integrated: Wikipedia, IMDb, Official pages.
- Debugging session with GPT support made workflow smoother.
📅 Day 44
Focus: Movie & TV Details + Trailers
- Completed Movie Details Page:
- Title, IMDb Score, Tagline, Overview, Duration in minutes.
- Similar Movies section.
- Trailer layout (UI done but functionality pending).
- Completed TV Show Details Page:
- Seasons data integrated.
- Similar TV shows displayed.
- Episode details structured.
📅 Day 45
Focus: People (Persons) Section
Persons.jsx (People List Page)
- Dynamic page title →
FW | People Shows.
- Filters: Popular / Latest / Trending.
- Infinite scroll for loading more people.
- Responsive cards with fallback images.
- Dark theme + Loader animations.
PersonDetails.jsx (Single Person Page)
- Dynamic page title →
FW | Person Details.
- Full bio, profile, and personal info:
- Gender, DOB, Place of Birth, Aliases.
- External IDs & social links (Twitter, Instagram, Facebook).
- Biography formatted line-by-line.
- Known For Section (scrollable cards).
- Acting Credits categorized by Movie/TV.
- Loader + Back navigation.
⚡ Key Learning (Day 41–46)
- Component reuse is good, but blind copying causes bugs.
- Debugging is part of the journey—fixing PersonDetails took 1+ hr.
- Redux made state management cleaner & scalable.
- Infinite scrolling improved UX but required careful API handling.
- Consistency in dark theme + loaders makes UI professional.
✅ ** → Full Project Overview (Day 46).**
🗓️ Day 47–51 – React Deep Dive & Problem Solving Journey
Part of the #75DaysFullStackAI Challenge
Focus: React core concepts, async JavaScript, DOM manipulation, and revision.
📅 Day 47 – React State Management & Props Flow
🎯 Focus
- Deep dive into
useState, useEffect, and component props flow.
- Practiced multiple state updates and rendering behaviors.
- Understood data passing between parent and child components.
💡 Key Learnings
- Re-rendering happens whenever state or props change.
useEffect dependencies determine execution flow.- Importance of cleanup functions in avoiding memory leaks.
📅 Day 48 – Async JavaScript (Callbacks, Promises, Async/Await)
🎯 Focus
- Learned JavaScript asynchronous behavior.
- Covered: Callbacks → Promises → Fetch → Async/Await.
- Used Gemini & GPT live session (voice + camera) to understand execution flow — though recording failed, it helped conceptually.
💡 Key Learnings
- Async flow helps avoid blocking code.
- Error handling with
try/catch in async functions.
- Real-world practice using API calls with
fetch.
📅 Day 49 – DOM Manipulation Practice (1–50 Questions)
🎯 Focus
- Practiced basic to advanced DOM manipulation questions.
- Strengthened fundamentals of selectors, events, and updates.
- Realized gap between concept learning and UI design implementation.
🧠 Reflection
“Concepts are easy; design needs practice.”
So next 2 days dedicated to improving frontend design and visual layout implementation.
💡 Key Learnings
- DOM = direct link between logic and visuals.
- Small mistakes in query selectors lead to big rendering issues.
- Will now focus on converting logic into interactive UI.
📅 Day 50 – React Revision & Distraction Management
🎯 Focus
- Revised React core topics:
useState, useEffect, props, conditional rendering,- children, list & keys, inline styling,
- class-based vs functional components,
- error boundaries, and fragments.
- Faced distractions but continued with consistency.
💡 Key Learnings
- Revision helps connect scattered topics.
- Realized productivity decreases with distractions — focus > duration.
- Backend journey starts soon after React completion.
📅 Day 51 – React Revision Continues + Setup for Deployment
🎯 Focus
- Continued React core revision.
- Planned for final React project deployment (
FilmyWorld).
- Issue: GitHub mess and deployment failure (build errors on Netlify).
- Decided to reorganize repos and fix deployment next day.
💡 Key Learnings
- Case sensitivity matters in file imports during deployment.
- Local success ≠ deployment success.
- Every failure adds understanding to real-world dev workflow.
🧩 Summary (Code View)
```js
// Day 47–51 Summary
const learningPath = {
47: “React useState & useEffect deep dive, props flow”,
48: “Async JS – Callbacks, Promises, Fetch, Async/Await using Gemini+GPT”,
49: “DOM manipulation (1–50 questions), frontend design practice plan”,
50: “React revision & distraction control, preparing for backend”,
51: “React core revision + deployment prep for FilmyWorld project”
};
console.log(“Key Takeaway:”, “Learning consistency matters more than perfection!”);
#75DaysFullStackAI #ReactJS #WebDevelopment #LearningInPublic #Consistency #Frontend #FullStack #Persistence
🔗 Connect with Me
🌐 GitHub: Maheshkrsaw
💼 LinkedIn: maheshmahi07
🐦 Twitter (X): @kumarMahesh9304