KODR
KODR Bootcamp - MERN Stack, DSA, System Design & Collaboration
**_KODR 🚀 by Sheriyance Coding School. Welcome to the **KODR Bootcamp** repository! This repo documents the 180-day journey in mastering MERN Stack Development, Data Structures & Algorithms (DSA), System Design, and collaboration skills for full-stack development. Each phase of the bootcamp is documented, with regular updates, assignments, and resources for easy reference.
🔥 Clone this Repository 💫
Write the following commands on your terminal to clone this repository, so that you can run this project locally.
git clone https://github.com/Bloivating-Major/KODR.git
📂 Table of Contents
📌 Note: Click on the arrow sign to expand to see each topics in details with link.
🚀 Getting Started
To clone this repository for your local use, use the following commands:
git clone https://github.com/Bloivating-Major/KODR.git
cd KODR
📈 Progress and Goals
- Documenting Daily Progress: Updates shared on GitHub, LinkedIn, and Twitter
- Goal-setting: Setting and reviewing goals every three days for accountability
React
Backend
Week 01 - Basics of Git and Github and Collaboration
Click to Expand Week 01 Details
## 📚 [ Week 01 - Basics of Git and Github and Collaboration](./Week%201/) ### 💻 [**1.1 - Git and Github**](./Week%201/Week%201.1/) > **`Topics Covered:` Git and Github Basics -** Installation of Git and Github, Setting username and useremail, Initializing a repository, Making commits, Pull requests, Collaboration, Git status, Push. - 👨💻 [**Lecture Codes**](./Week%201/Week%201.1/Lecture%20Code/notes.txt) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%201/Week%201.1/Notes-Slides-Video_Links/README.md) ### 💻 [**1.2 - Git Conflicts and Git Branching**](./Week%201/Week%201.2/) > **`Topics Covered:` Git Conflicts and Git Branching -** Revision of Previous Class and then creating a conflict and resolving those conflicts manually using Accept Incoming, Accept Current, Accept Both, Ignore and then Git Branching. - 👨💻 [**Lecture Codes**](./Week%201/Week%201.2/Lecture%20Code/README.md) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%201/Week%201.2/Notes-Slides-Video_Links/README.md) ### 💻 [**1.3 - CSS Responsive Design: Units**](./Week%201/Week%201.3/) > **`Topics Covered:` CSS Responsive Design: Units -** CSS Units: Percentage (%), rem, em. Introduction to responsive layouts using CSS units. Hands-on project: Flutter Dev Landing Page. - 👨💻 [**Lecture Codes**](./Week%201/Week%201.3/Lecture%20Code/Task1/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%201/Week%201.3/Notes-Slides-Video_Links/Readme.md) ### 💻 [**1.4 - CSS Responsive Design: Functions**](./Week%201/Week%201.4/) > **`Topics Covered:` CSS Responsive Design: Functions -** CSS Functions: min, max, and clamp. Applying CSS functions for better responsiveness. Restyling and refining the Flutter Dev Landing Page project. - 👨💻 [**Lecture Codes**](./Week%201/Week%201.4/Lecture%20Code/Readme.md) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%201/Week%201.4/Notes-Slides-Video_Links/Readme.md) ### 💻 [**1.5 - Awwwards Website: Building and Responsiveness**](./Week%201/Week%201.5/) > **`Topics Covered:` Awwwards Website: Building and Responsiveness -** CSS Functions: min, max, and clamp. Applying CSS functions for better responsiveness. Restyling and refining the Flutter Dev Landing Page project. - 👨💻 [**Lecture Codes**](./Week%201/Week%201.5/Lecture%20Code/Landing%20Page/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%201/Week%201.5/Notes-Slides-Video_Links/Readme.md)Week 02 - JavaScript Language and DOM with Responsiveness and SCSS.
Click to Expand Week 02 Details
## 📚 [ Week 02 - JavaScript Language and DOM with Responsiveness and SCSS.](./Week%202/) ### 💻 [**2.1 - Creating Fluid Layouts with Flex and Grids**](./Week%202/Week%202.1) > **`Topics Covered:` Creating Fluid Layouts with Flex and Grids -** Gained hands-on experience with **Flexbox** and **Grid** to create fluid and responsive layouts. - 👨💻 [**Lecture Codes**](./Week%202/Week%202.1/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%202/Week%202.1/Readme.md) ### 💻 [**2.2 - JavaScript Basics**](./Week%202/Week%202.2/) > **`Topics Covered:` JavaScript Basics -** In today's session, we covered foundational concepts of **JavaScript**, including its history, basic features, data types, and memory operations. - 👨💻 [**Lecture Codes**](./Week%202/Week%202.2/Session%201%20JavaScript%20The%20Language/index.js) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%202/Week%202.2/Readme.md) ### 💻 [**2.3 - JavaScript Intermeddiate and Advanced Concepts**](./Week%202/Week%202.3/) > **`Topics Covered:` JavaScript Intermeddiate and Advanced Concepts -** 1. Mastery of **conditionals**, **loops**, and **functions** lays the foundation for JavaScript programming. 2. Arrays and objects are indispensable for structuring and manipulating data. 3. Understanding **synchronous vs. asynchronous** execution is vital for handling modern web development tasks. 4. Prototypes and inheritance streamline behavior sharing in object-oriented programming. 5. ES6 introduced modern syntax to enhance readability, performance, and scalability. - 👨💻 [**Lecture Codes**](./Week%202/Week%202.3/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%202/Week%202.3/Readme.md) ### 💻 [**2.4 - JavaScript DOM and Event Handling**](./Week%202/Week%202.4/) > **`Topics Covered:` JavaScript DOM and Event Handling -** DOM is essential for dynamic interaction in web applications. Event handling bridges the gap between static content and user interactions. With DOM manipulation and event listeners, we can create highly interactive web experiences. - 👨💻 [**Lecture Codes**](./Week%202/Week%202.4/Session%201%20OOP/Readme.md) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%202/Week%202.4/Readme.md) ### 💻 [**2.5 - Mini Tasks on JavaScript DOM**](./Week%202/Week%202.5/) > **`Topics Covered:` Mini Tasks on JavaScript DOM -** In today’s session, we tackled several mini tasks related to the **JavaScript DOM Model**. These tasks were designed to enhance our understanding of DOM manipulation, event handling, and dynamic interaction with HTML elements. - 👨💻 [**Lecture Codes**](./Week%202/Week%202.5/Session%201%20JavaScript%20DOM%20Tasks/script.js) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%202/Week%202.5/Readme.md) ### 💻 [**2.6 - Advanced DOM Manipulation with Search Functionality**](./Week%202/Week%202.6/) > **`Topics Covered:` Advanced DOM Manipulation with Search Functionality -** Today, we created a dynamic **User Search Interface** using **HTML**, **CSS**, and **JavaScript**. This task enhanced our understanding of DOM manipulation, filtering arrays, and building a responsive layout. Users can search for names dynamically, and the list updates in real-time as they type. - 👨💻 [**Lecture Codes**](./Week%202/Week%202.6/Session%201%20Advance%20DOM%20Manipulation/script.js) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%202/Week%202.6/Readme.md)Week 03 - DSA, Object Oriented Programming and JavaScript DOM
Click to Expand Week 03 Details
## 📚 [ Week 03 - DSA, Object Oriented Programming and JavaScript DOM](./Week%203/) ### 💻 [**3.1 - OOP and DOM Manipulation**](./Week%203/Week%203.1) > **`Topics Covered:` OOP and DOM Manipulation -** I explored and implemented today, focusing on JavaScript Classes, Objects, Constructors, and Dynamic Frontend Development using DOM Manipulation and JSON Data Handling. - 👨💻 [**Lecture Codes**](./Week%203/Week%203.1/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%203/Week%203.1/Readme.md) ### 💻 [**3.2 - OOP and DOM Manipulation**](./Week%203/Week%203.2/) > **`Topics Covered:` OOP and DOM Manipulation -** I explored and implemented today, focusing on JavaScript Classes, Objects, Constructors, and Dynamic Frontend Development using DOM Manipulation and JSON Data Handling. - 👨💻 [**Lecture Codes**](./Week%203/Week%203.2/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%203/Week%203.2/Readme.md) ### 💻 [**3.3 - OOP and DOM Manipulation**](./Week%203/Week%203.2/) > **`Topics Covered:` OOP and DOM Manipulation -** Solved questions which improved logic making and implementation of javascript functions. - 👨💻 [**Lecture Codes**](./Week%203/Week%203.3/Session%201%20DSA/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%203/Week%203.3/Readme.md) ### 💻 [**3.4 - OOP and DOM Manipulation**](./Week%203/Week%203.4/) > **`Topics Covered:` OOP and DOM Manipulation -** Explored JavaScript object-oriented programming concepts and implemented interactive DOM-based tasks such as a progress bar and social media post feed. - 👨💻 [**Lecture Codes**](./Week%203/Week%203.4/Readme.md) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%203/Week%203.4/Session%202%20DOM/Readme.md) ### 💻 [**3.5 - OOP and DOM Manipulation**](./Week%203/Week%203.5/) > **`Topics Covered:` OOP and DOM Manipulation -** Explored JavaScript object-oriented programming concepts and implemented interactive DOM-based tasks such as like feature and social media post feed. - 👨💻 [**Lecture Codes**](./Week%203/Week%203.5/Readme.md) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%203/Week%203.5/Session%201%20DSA/Readme.md) ### 💻 [**3.6 - DOM Manipulation**](./Week%203/Week%203.6/) > **`Topics Covered:` OOP and DOM Manipulation -** Explored JavaScript object-oriented programming concepts and implemented interactive DOM-based tasks such as like feature and social media post feed. - 👨💻 [**Lecture Codes**](./Week%203/Week%203.6/Readme.md) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%203/Week%203.6/Readme.md)Week 04 - JavaScript DOM and React Intro
Click to Expand Week 04 Details
## 📚 [Week 04 - JavaScript DOM and React Intro](./Week%204/) ### 💻 [**4.1 - Advance DOM Manipulation and Logic Building**](./Week%204/Week%204.1/) > **`Topics Covered:` Advance DOM Manipulation and Logic Building -** The first session focused on solving **JavaScript logic-building questions**, while the second session delved into **JavaScript DOM interactions** to enhance front-end development skills. - 👨💻 [**Lecture Codes**](./Week%204/Week%204.1/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%204/Week%204.1/Readme.md) ### 💻 [**4.2 - DOM Manipulation Bubble Game**](./Week%204/Week%204.2/) > **`Topics Covered:` DOM Manipulation Bubble Game -** This project is a fun and interactive **Bubble Pop Game** where players aim to score as many points as possible within a 60-second time frame by clicking on the correct target number. The game is built using vanilla JavaScript, HTML, and CSS. - 👨💻 [**Lecture Codes**](./Week%204/Week%204.2/Session%202%20DOM/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%204/Week%204.2/Readme.md) ### 💻 [**4.3 - DOM Manipulation Analog Clock with Continuous Movement**](./Week%204/Week%204.3/) > **`Topics Covered:` DOM Manipulation Analog Clock with Continuous Movement -** This project showcases the implementation of an **animated analog clock** using **JavaScript**. It replicates the smooth movement of the hour, minute, and second hands, ensuring accurate time representation while dynamically updating the clock hands in real time. - 👨💻 [**Lecture Codes**](./Week%204/Week%204.3/Session%202%20DOM/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%204/Week%204.3/Readme.md) ### 💻 [**4.4 - Creating a Responsive Website with Tailwind CSS**](./Week%204/Week%204.4/) > **`Topics Covered:` Creating a Responsive Website with Tailwind CSS -** This session was centered around building a **responsive website** using **HTML**, **Tailwind CSS**, and **JavaScript**. The primary objective was to create a visually appealing, user-friendly, and fully responsive web layout. The session also emphasized learning how to leverage Tailwind CSS utilities and responsive design principles. - 👨💻 [**Lecture Codes**](./Week%204/Week%204.4/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%204/Week%204.4/Readme.md) ### 💻 [**4.5 - Creating Components in React**](./Week%204/Week%204.5/) > **`Topics Covered:` Creating Components in React -** This session focused on learning the fundamentals of **React components** by building a **Navbar** and a **Hero Section** for a responsive shoe store website. The session introduced **React functional components**, the **JSX syntax**, and how to use **Tailwind CSS** for styling. - 👨💻 [**Lecture Codes**](./Week%204/Week%204.5/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%204/Week%204.5/Readme.md) ### 💻 [**4.6 - UI/UX and Logic Building using JavaScript**](./Week%204/Week%204.6/) > **`Topics Covered:` UI/UX and Logic Building using JavaScript -** This session provided a comprehensive introduction to **UI/UX Design** principles, focusing on typography, color theory, and modern design trends. It emphasized the importance of creating visually appealing and user-centric designs. - 👨💻 [**Lecture Codes**](./Week%204/Week%204.6/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%204/Week%204.6/Readme.md)Week 05 - React and DSA using JavaScript
Click to Expand Week 05 Details
## 📚 [Week 05 - React and DSA using JavaScript](./Week%205/) ### 💻 [**5.1 - React Components and Data Structure Problem Solving**](./Week%205/Week%205.1/) > **`Topics Covered:` React Components and Data Structure Problem Solving -** Dive deeper into React with props and state management. Tackle intermediate-level data structure problems. - 👨💻 [**Lecture Codes**](./Week%205/Week%205.1/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%205/Week%205.1/Readme.md) ### 💻 [**5.2 - Nested Components in React**](./Week%205/Week%205.2/) > **`Topics Covered:` Nested Components in React -** This exercise demonstrated the power of React's component-based architecture. By dividing the UI into independent components, we achieved better code organization and reusability, paving the way for scalable applications. - 👨💻 [**Lecture Codes**](./Week%205/Week%205.2/React%20Nested%20Components/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%205/Week%205.2/Readme.md) ### 💻 [**5.3 - JSX (JavaScript XML)**](./Week%205/Week%205.3/) > **`Topics Covered:` JSX (JavaScript XML) -** In today's session, we dived into the fundamentals of **JSX (JavaScript XML)** and practiced creating a basic React component to render content dynamically in our app. - 👨💻 [**Lecture Codes**](./Week%205/Week%205.3/React%20JSX/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%205/Week%205.3/Readme.md) ### 💻 [**5.4 - JSX Rules**](./Week%205/Week%205.4/) > **`Topics Covered:` JSX Rules -** In today's session, we focused on understanding and applying the fundamental **rules of JSX** while creating a new React component. - 👨💻 [**Lecture Codes**](./Week%205/Week%205.4/React%20JSX%20Rules/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%205/Week%205.4/Readme.md) ### 💻 [**5.5 - Dynamic Content in JSX**](./Week%205/Week%205.5/) > **`Topics Covered:` Dynamic Content in JSX -** In today's session, we explored how to use **dynamic content with curly braces `{}` in JSX** to make React components more interactive and data-driven. - 👨💻 [**Lecture Codes**](./Week%205/Week%205.5/React%20Embedding%20Dynamic%20Content/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%205/Week%205.5/Readme.md) ### 💻 [**5.6 - Rendering Lists in React**](./Week%205/Week%205.6/) > **`Topics Covered:` Rendering Lists in React -** Today, we focused on **rendering lists in React** using the powerful `.map()` method. This approach makes it simple to dynamically display collections of data in your components. - 👨💻 [**Lecture Codes**](./Week%205/Week%205.6/React%20Rendering%20List%20of%20Data/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%205/Week%205.6/Readme.md)Week 06 - React and DSA using JavaScript
Click to Expand Week 06 Details
## 📚 [Week 06 - React and DSA using JavaScript](./Week%206/) ### 💻 [**6.1 - Using Props in React Components**](./Week%206/Week%206.1/) > **`Topics Covered:` Using Props in React Components -** Today, we learned about **props** in React, their purpose, and how to pass dynamic data to components to make them reusable. Additionally, we explored the use of **props.children** for nesting custom content within components. - 👨💻 [**Lecture Codes**](./Week%206/Week%206.1/React%20Props/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%206/Week%206.1/Readme.md) ### 💻 [**6.2 - Conditional Rendering in React**](./Week%206/Week%206.2/) > **`Topics Covered:` Conditional Rendering in React -** Today, we explored **Conditional Rendering in React**, a crucial concept that allows us to display different UI elements based on specific conditions. Here's a summary of the exercise, where we practiced various ways to implement conditional rendering. - 👨💻 [**Lecture Codes**](./Week%206/Week%206.2/React%20Conditional%20Rendering/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%206/Week%206.2/Readme.md) ### 💻 [**6.3 - DSA Binary Search**](./Week%206/Week%206.3/Session%202%20DSA-JS/) > **`Topics Covered:` DSA Binary Search -** In today's **DSA Session**, we explored the **Binary Search** algorithm, a fundamental concept for efficiently searching elements in sorted arrays. This algorithm significantly reduces the time complexity compared to linear search by halving the search space at every step. - 👨💻 [**Lecture Codes**](./Week%206/Week%206.3/Session%202%20DSA-JS/script.js) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%206/Week%206.3/Readme.md) ### 💻 [**6.4 - Styling Components in React**](./Week%206/Week%206.4/) > **`Topics Covered:` Styling Components in React -** Today, we explored various methods for styling React components. This session demonstrated how to apply **inline styles**, **style objects**, and **React icons** to make components visually appealing. - 👨💻 [**Lecture Codes**](./Week%206/Week%206.4/React%20Styling/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%206/Week%206.4/Readme.md) ### 💻 [**6.5 - Form Handling in React**](./Week%206/Week%206.5/Session%201%20React%20Form%20Handling/) > **`Topics Covered:` Form Handling in React -** A modern React application featuring dynamic form management with a responsive navigation system, powered by React Router and Context API. - 👨💻 [**Lecture Codes**](./Week%206/Week%206.5/Session%201%20React%20Form%20Handling/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%206/Week%206.5/Readme.md) ### 💻 [**6.6 - Array Manipulation with JavaScript**](./Week%206/Week%206.6/) > **`Topics Covered:` Array Manipulation with JavaScript -** This project demonstrates various operations on arrays, showcasing fundamental concepts in JavaScript. Each function represents a unique problem and its solution, providing practical examples of array manipulation and logic building. - 👨💻 [**Lecture Codes**](./Week%206/Week%206.6/Session%202%20DSA-JS/index.js) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%206/Week%206.6/Readme.md)Week 07 - React and DSA using JavaScript
Click to Expand Week 07 Details
## 📚 [Week 07 - React and DSA using JavaScript](./Week%207/) ### 💻 [**7.1 -React API Integration using Axios**](./Week%207/Week%207.1/Readme.md) > **`Topics Covered:`React API Integration using Axios -** In today's **DSA Session**, we explored the **Binary Search** algorithm, a fundamental concept for efficiently searching elements in sorted arrays. This algorithm significantly reduces the time complexity compared to linear search by halving the search space at every step. - 👨💻 [**Lecture Codes**](./Week%207/Week%207.1/Readme.md) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%207/Week%207.1/Readme.md) ### 💻 [**7.2 -JavaScript Practice Session and React useState**](./Week%207/Week%207.2/Readme.md) > **`Topics Covered:`JavaScript Practice Session and React useState -** We revisited the problems solved during the previous day. Reviewed and discussed **optimal solutions** and **different approaches** for the same problems. - 👨💻 [**Lecture Codes**](./Week%207/Week%207.2/Readme.md) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%207/Week%207.2/Readme.md) ### 💻 [**7.3 - React - `useEffect` and `useRef` Hooks**](./Week%207/Week%207.3/) > **`Topics Covered:`React API Integration using Axios -** We revisited the problems solved during the previous day. Reviewed and discussed **optimal solutions** and **different approaches** for the same problems. - 👨💻 [**Lecture Codes**](./Week%207/Week%207.3/Session%201%20React%20Use%20Effect/README.md) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%207/Week%207.3/Readme.md) ### 💻 [**7.4 - React with LocalStorage and JavaScript String Manipulation**](./Week%207/Week%207.4/) > **`Topics Covered:`React with LocalStorage and JavaScript String Manipulation -** Today’s sessions were packed with learning and implementation. We focused on enhancing skills in React and JavaScript, exploring advanced topics like theme switching in React and efficient string and array manipulations in JavaScript. - 👨💻 [**Lecture Codes**](./Week%207/Week%207.4/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%207/Week%207.4/Readme.md) ### 💻 [**7.5 - JavaScript Practice: Character Frequency and Anagram Check**](./Week%207/Week%207.5/) > **`Topics Covered:`JavaScript Practice: Character Frequency and Anagram Check -** Today's session focused on understanding character frequency in strings and efficiently checking if two strings are anagrams. Below is a detailed summary of the concepts covered and the code implementations. - 👨💻 [**Lecture Codes**](./Week%207/Week%207.5/Session%202%20DSA/script.js) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%207/Week%207.4/Readme.md) ### 💻 [**7.6 - Revision Session: Strings in JavaScript**](./Week%207/Week%207.6/) > **`Topics Covered:`Revision Session: Strings in JavaScript -** Today's session was dedicated to revising **string manipulation** techniques in JavaScript. We revisited key concepts such as traversing strings, iterating over characters, and reversing a string. Here's a summary of what we covered, with detailed explanations and code snippets. - 👨💻 [**Lecture Codes**](./Week%207/Week%207.6/Session%201%20String%20Revision/script.js) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%207/Week%207.6/Readme.md)Week 08 - Advance React Concepts and DSA
Click to Expand Week 08 Details
## 📚 [Week 08 - Advance React Concepts and DSA](./Week%208/) ### 💻 [**8.1 - Nike Project With React and DSA LeetCode Questions**](./Week%208/Week%208.1/) > **`Topics Covered:`Nike Project With React and DSA LeetCode Questions -** Today, we worked on two exciting areas: 1. Building components for the **Nike Project with React**. 2. Solving **LeetCode Problem 2357 - Minimum Operations to Make the Array Zero**. - 👨💻 [**Lecture Codes**](./Week%208/Week%208.1/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%208/Week%208.1/Readme.md) ### 💻 [**8.2 - Understanding Context API in React**](./Week%208/Week%208.2/) > **`Topics Covered:`Understanding Context API in React -** Today, we learned how to use the **Context API** in React to manage and share state across multiple components without prop drilling. Here's a detailed overview of what we accomplished: - 👨💻 [**Lecture Codes**](./Week%208/Week%208.2/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%208/Week%208.2/Readme.md) ### 💻 [**8.4 - Exploring 2D Arrays and React Tasks**](./Week%208/Week%208.4/) > **`Topics Covered:`Exploring 2D Arrays and React Tasks -** Today, we studied **Redux Toolkit**, a powerful tool to manage global state in React applications efficiently. Below is a summary of the steps we followed and concepts we covered. - 👨💻 [**Lecture Codes**](./Week%208/Week%208.4/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%208/Week%208.4/Readme.md) ### 💻 [**8.5 - Exploring Redux ToolKit**](./Week%208/Week%208.5/) > **`Topics Covered:`Exploring Redux ToolKit -** Today, we studied **Redux Toolkit**, a powerful tool to manage global state in React applications efficiently. Below is a summary of the steps we followed and concepts we covered. - 👨💻 [**Lecture Codes**](./Week%208/Week%208.5/React%20Redux%20Toolkit/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%208/Week%208.5/Readme.md) ### 💻 [**8.6 - DSA Revision Class**](./Week%208/Week%208.6/) > **`Topics Covered:`Exploring Redux ToolKit -** Today, we revised key **Data Structures and Algorithms (DSA)** concepts through practical problems and solutions. Below is a detailed summary of the questions solved in the session. - 👨💻 [**Lecture Codes**](./Week%208/Week%208.6/Session%201%20DSA%20Revision/script.js) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%208/Week%208.6/Readme.md) ### 💻 [**8.7 - Shopping Cart Feature**](./Week%208/Week%208.7/) > **`Topics Covered:`Shopping Cart Feature -** This repository contains a **Shopping Cart Feature** implemented using **React**, **Redux Toolkit**, and **TailwindCSS**. This feature was created during **Week 8, Day 7** of the project development timeline. The application allows users to toggle between light and dark modes, view product listings, and manage a shopping cart. - 👨💻 [**Lecture Codes**](./Week%208/Week%208.7/Shopping%20Cart%20Redux/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%208/Week%208.7/Readme.md)Week 09 - BackEnd and DSA Revision
Click to Expand Week 09 Details
## 📚 [Week 09 - BackEnd and DSA Revision](./Week%209/) ### 💻 [**9.1 - Intro to Backend and DSA LeetCode Questions**](./Week%209/Week%209.1/) > **`Topics Covered:`Intro to Backend and DSA LeetCode Questions -** Welcome to Day 1 of Week 9! Today, we explored some exciting problem-solving exercises across two sessions. Here’s a structured breakdown of everything we covered. - 👨💻 [**Lecture Codes**](./Week%209/Week%209.1/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%209/Week%209.1/Readme.md) ### 💻 [**9.2 - Theory of Internet and DSA LeetCode Questions**](./Week%209/Week%209.2/) > **`Topics Covered:`Theory of Internet and DSA LeetCode Questions -**Today's session combined theoretical and practical learning. From understanding how the internet works to solving challenging coding questions, it was a productive day! Looking forward to continuing this momentum tomorrow. - 👨💻 [**Lecture Codes**](./Week%209/Week%209.2/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%209/Week%209.2/Readme.md) ### 💻 [**9.3 - React Test**](./Week%209/Week%209.3/) > **`Topics Covered:`React Test -**This exciting React app challenge was to create an **Image to Text Generator** application. The project involved uploading an image, analyzing it using Google Generative AI, and generating a descriptive text based on a user-provided prompt. It pushed our React and API integration skills to the next level! - 👨💻 [**Lecture Codes**](./Week%209/Week%209.3/React%20Test/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%209/Week%209.3/Readme.md) ### 💻 [**9.4 - FS Node Modules and DSA Revision**](./Week%209/Week%209.4/) > **`Topics Covered:`React Test -**## **🌟 Learning Highlights**- 🗂️ **FS Module**: Manage files and directories efficiently in Node.js. - 💡 **Dirent Objects**: Differentiate between files and directories during traversal. - 🌐 **HTTP Module**: Essential for building and handling web servers in Node.js. - 👨💻 [**Lecture Codes**](./Week%209/Week%209.4/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%209/Week%209.4/Session%201%20Backend/Readme.md) ### 💻 [**9.5 - HTTP and HTTPS and DSA Revision**](./Week%209/Week%209.5/) > **`Topics Covered:`HTTP and HTTPS and DSA Revision -** We learned about HTTPS and HTTP and also did revision of DSA learning about BLOCK Swap Algorithm. - 👨💻 [**Lecture Codes**](./Week%209/Week%209.5/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%209/Week%209.5/) ### 💻 [**9.6 - Backend Revision and Express**](./Week%209/Week%209.6/) > **`Topics Covered:`HTTP and HTTPS and DSA Revision -** We did Backend Revision and Learned about Express in Backend. - 👨💻 [**Lecture Codes**](./Week%209/Week%209.6/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%209/Week%209.6/)Week 10 - BackEnd and DSA Revision
Click to Expand Week 10 Details
## 📚 [Week 10 - BackEnd and DSA Revision](./Week%2010/) ### 💻 [**10.1 - Backend Development and DSA and JS Sets**](./Week%2010/Week%2010.1/) > **`Topics Covered:`Backend Development and DSA and JS Sets -** Welcome to Day 1 of Week 10. We revised earlier concepts of Backend and now started with Express - 👨💻 [**Lecture Codes**](./Week%2010/Week%2010.1/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%2010/Week%2010.1/Readme.md) ### 💻 [**10.2 - Building a Backend Server with Express.js**](./Week%2010/Week%2010.2/) > **`Topics Covered:`Building a Backend Server with Express.js -** In today's session we learned about creating a server using Express and then creating middlewares and routes. In DSA Session we learned about sets and maps and solved questions regarding Sets and Maps. - 👨💻 [**Lecture Codes**](./Week%2010/Week%2010.2/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%2010/Week%2010.2/Readme.md) ### 💻 [**10.3 - Introduction to Databases**](./Week%2010/Week%2010.3/) > **`Topics Covered:`Introduction to Databases -** In today’s session, we explored the fundamentals of **databases** and connected our **Express server** to a **MongoDB database** using Mongoose. Let’s break down everything we learned! - 👨💻 [**Lecture Codes**](./Week%2010/Week%2010.3/Session%201%20BackEnd%20Server/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%2010/Week%2010.3/Readme.md) ### 💻 [**10.4 - Connecting Mongoose to MongoDb & DSA Maps**](./Week%2010/Week%2010.4/) > **`Topics Covered:`Connecting Mongoose to MongoDb -** Today's sessions were jam-packed with learning! We explored Maps in JavaScript during the first session and practiced some challenging DSA problems. Later, in the second session, we delved into the world of backend development, specifically learning how to connect the backend to a database using Mongoose. 🚀 - 👨💻 [**Lecture Codes**](./Week%2010/Week%2010.4/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%2010/Week%2010.4/Readme.md)Week 11 - BackEnd and DSA Revision
Click to Expand Week 11 Details
## 📚 [Week 11 - BackEnd and DSA Revision](./Week%2011/) ### 💻 [**11.1 - DSA & Backend Adventures**](./Week%2011/Week%2011.1/) > **`Topics Covered:`DSA & Backend Adventures -** Today, we delved into two exciting domains: **Recursion in DSA** and **User Models & Schemas in Backend Development**! Here's a detailed and creative breakdown of everything we learned. 🌟 - 👨💻 [**Lecture Codes**](./Week%2011/Week%2011.1/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%2011/Week%2011.1/Readme.md) ### 💻 [**11.2 - DSA Recursion and Backend Database Connection**](./Week%2011/Week%2011.2) > **`Topics Covered:`DSA Recursion and Backend Database Connection -** 🌈 **Recursion is like peeling layers of an onion—each step brings you closer to the core solution.** Keep practicing, and you'll master it in no time! 🚀 - 👨💻 [**Lecture Codes**](./Week%2011/Week%2011.2/) - 📖 [**Notes/Slides & Articles/Blogs Link**](./Week%2011/Week%2011.2/Readme.md)🔥 Live Links
This table summarizes the live demos for various tasks and features implemented during the Bootcamp.
| Task/Feature | Description | Live Link |
|---|---|---|
| Base Habitation | Created Awwards Website Nominee Landing Page | Live Demo |
| Marvel Theme Cards | Used array of objects to manipulate the data and changed HTML. | Live Demo |
| User Cards | Added Dynamic Data in Frontend using JavaScript. | Live Demo |
| Cursor Follower | Manipulated HTML Element using JavaScript to dynamically follow cursor | Live Demo |
| Keyboard Event Game Creation | Used JavaScript to handle Keyboard Events and change HTML Dynamically | Live Demo |
| Dynamic Card Data Manipulation | Changes the Status of a person when button is clicked and Database also changes! | Live Demo |
| Download Button Progress Bar | Created a download button and progress bar theme. | Live Demo |
| Instagram FrontEnd Clone | Created landing page of Instagram | Live Demo |
| Refocus PortFolio Section Effect | JavaScript DOM Manipulation With a project to create interactive and dynamic web sections. The features included hover effects, video displays, and progress animations. | Live Demo |
| Bubble Game Using JavaScript | This project is a fun and interactive Bubble Pop Game where players aim to score as many points as possible within a 60-second time frame by clicking on the correct target number. The game is built using vanilla JavaScript, HTML, and CSS. | Live Demo |
| Analog Clock Using JavaScript | It replicates the smooth movement of the hour, minute, and second hands, ensuring accurate time representation while dynamically updating the clock hands in real time. | Live Demo |
| Portfolio Website using Tailwind with Responsive Design! | This project was centered around building a responsive website using HTML, Tailwind CSS, and JavaScript. | Live Demo |
| Nike Website Hero Section | This session focused on learning the fundamentals of React components by building a Navbar and a Hero Section for a responsive shoe store website. The session introduced React functional components, the JSX syntax, and how to use Tailwind CSS for styling. | Live Demo |
| KODR Registration Form | A modern React application featuring dynamic form management with a responsive navigation system, powered by React Router and Context API. | Live Demo |
| Employee Management System | The Employee Management System is a web application designed to manage tasks for employees. It features separate pages for admin and employee users. Admins can create new tasks for employees, and these tasks are reflected on the employee’s page. | Live Demo |
| Shopping Cart Redux Toolkit | A Shopping Cart Feature implemented using React, Redux Toolkit, and TailwindCSS. This feature was created during Week 8, Day 7 of the project development timeline. The application allows users to toggle between light and dark modes, view product listings, and manage a shopping cart. | Live Demo |
| Image to Text Generator | An Image to Text Generator application. The project involved uploading an image, analyzing it using Google Generative AI, and generating a descriptive text based on a user-provided prompt. It pushed our React and API integration skills to the next level! | Live Demo |
| NIKE | Welcome to my latest project! 🚀 This is a React-based web application styled with Tailwind CSS for sleek responsiveness and modern design. Let’s dive into the details! 🌈 | Live Demo |
🤝 Connect with the Community
