**_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.
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📌 Note: Click on the arrow sign to expand to see each topics in details with link.
To clone this repository for your local use, use the following commands:
git clone https://github.com/Bloivating-Major/KODR.git
cd KODR- Documenting Daily Progress: Updates shared on GitHub, LinkedIn, and Twitter
- Goal-setting: Setting and reviewing goals every three days for accountability
Click to Expand Week 01 Details
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.
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.
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.
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.
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.
Click to Expand Week 02 Details
Topics Covered:Creating Fluid Layouts with Flex and Grids - Gained hands-on experience with Flexbox and Grid to create fluid and responsive layouts.
Topics Covered:JavaScript Basics - In today's session, we covered foundational concepts of JavaScript, including its history, basic features, data types, and memory operations.
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.
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.
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.
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.
Click to Expand Week 03 Details
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.
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.
Topics Covered:OOP and DOM Manipulation - Solved questions which improved logic making and implementation of javascript functions.
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.
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.
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.
Click to Expand Week 04 Details
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.
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.
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.
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.
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.
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.
Click to Expand Week 05 Details
Topics Covered:React Components and Data Structure Problem Solving - Dive deeper into React with props and state management. Tackle intermediate-level data structure problems.
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.
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.
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.
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.
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.
Click to Expand Week 06 Details
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.
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.
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.
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.
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.
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.
Click to Expand Week 07 Details
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.
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.
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.
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.
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.
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.
Click to Expand Week 08 Details
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.
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:
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.
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.
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.
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.
Click to Expand Week 09 Details
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.
**
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.
**
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!
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.
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.
Topics Covered:HTTP and HTTPS and DSA Revision - We did Backend Revision and Learned about Express in Backend.
Click to Expand Week 10 Details
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
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.
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!
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. 🚀
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. 🌟
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 |
