Online-Learning-Journey

Exploring Every Day 🌱: My Ongoing Online Learning Adventure! 🚀 (It is for my understanding and my progress)

Day-1

This first day i learned like how you open - source and i also contributed to that project and learned and how can we contribute i went on freecode camp and i have got a blog that "How to Contribute to Open Source Projects – A Beginner's Guide": link is : "https://www.freecodecamp.org/news/how-to-contribute-to-open-source-projects-beginners-guide/" 🚀 Embrace the open-source universe! 🌐 In this ultimate guide, journey through the inner workings of open-source projects. 🌟 Unearth the fascinating ways to contribute and soak in the incredible benefits. From refining documentation ✍️ to crafting code 🛠️, brace yourself for a thrilling step-by-step tutorial leading up to your very first pull request. 🎉 Let the magic of open source amplify your skills, ignite your network, and supercharge your career! 💼🔥

Day-2

Hey there! 🚀 Today, I embarked on an exciting journey and rolled up my sleeves to create a fantastic website! 🌐 Using the dynamic trio of HTML, CSS, and JavaScript, along with a touch of Bootstrap magic, I've whipped up a cool online space called "LosAngles Montanies." 🏞️ Can't wait to showcase this masterpiece on GitHub once it's ready for the spotlight! But hey, no rush for now – I'm about to treat you to a sneak peek of what I've crafted so far. 😎 So, here's the web page I've designed, complete with stunning visuals and interactivity, all brought to life through code wizardry! ⚡

I've been bitten by the React bug too, and I'm gearing up to recreate this awesomeness using React. But for now, let's bask in the glory of what I've accomplished with my trusty trio. 🎉 Stay tuned, as the next stop is GitHub town! 💻🛤️

Day-3

Hey there! 🌟 Today was quite a productive day as I delved into some fascinating Java topics, including servlets and JDBC. 🚀 I learned how to establish a seamless connection between a database and Java, which is like connecting puzzle pieces to form a bigger picture! 🧩 And guess what? I even explored the realm of frontend development using React, adding a cool user interface to my Java applications. 🌐 The learning journey was a mix of tutorials, not a mountain of them, but enough to feel like a well-rounded explorer. 🌄 Telsuko's YouTube channel was my go-to, as their tutorials clicked well with me. 📺 I sprinkled practical knowledge on top of theoretical insights, giving me that "aha" moment when things really clicked! 💡 Here's to more exciting learning adventures ahead! 🚀📚💡

Embarking on a Java learning adventure—mastering servlets, JDBC, and even adding a splash of React frontend flair, all while riding the Telsuko tutorial wave! 🚀🌊

Day-4

🌟 Today has been an exhilarating journey through the realms of coding! I delved into the captivating world of LeetCode challenges, where my mind danced with algorithms like a virtuoso pianist on a grand stage. 😎💻

But that's not all! I also embarked on a quest into the mystical lands of Data Structures and Algorithms (DSA). 🧙‍♂️ My focus was on the ancient art of array manipulation and crafting. 🛠️ With each line of code, I felt like an architect, shaping arrays like a sculptor shapes clay into magnificent structures. 🏛️💬

Day-5

Today, I dove into the world of MongoDB and its CRUD operations, and let me tell you, it's been quite the adventure! 🚀 I started off by learning how to create new documents in the database. It felt like planting seeds in a digital garden 🌱, watching my data take root and flourish.

Then came the read part, where I got to retrieve information from the database. 📖 It was like being a detective in a virtual world, gathering clues and piecing together the story of my data. 🕵️‍♂️ Each document I fetched was like opening a treasure chest of information, and I couldn't help but feel a rush of excitement each time.

But wait, there's more! Update was the next stop on my MongoDB journey. 💡 Imagine being able to give your data a makeover with just a few clicks. It's like having a magic wand 🪄 that transforms your documents into something even more amazing. I tweaked fields here and there, and each change was like adding a new layer of paint to a canvas.

Last but not least, the delete operation. 🗑️ It might sound sad, but it's actually quite liberating! It's like clearing out the old to make way for the new. Saying goodbye to a document was a bit like bidding farewell to an old friend, but it also opened up space for fresh adventures and possibilities.

So there you have it – my day with MongoDB, full of emoji-powered excitement and discovery. It's like having a playground where I can create, explore, and shape my data like a virtual sculptor. 🎨 Can't wait to see what other emoji-filled escapades await on my coding journey! 🌟

Day-6

🌟 Today has been an exciting adventure in the world of coding! I embarked on a journey through LeetCode challenges, tackling problems that revolved around the intriguing realms of linked lists and the enchanting dance of binary search trees. 🌳✨

🔗🌐 As I delved into the mysteries of linked lists, I felt like a digital archaeologist uncovering hidden treasures of data connections. The thrill of maneuvering through nodes, stitching together intricate pathways, and unraveling the secrets these structures held was truly exhilarating! 🕵️‍♂️💼

🌿🔍 And then, the enchanting forest of binary search trees beckoned! 🌲🍃 The art of arranging nodes in perfect harmony, where every choice mattered in maintaining the delicate balance of order, was like tending to a digital garden. 🌱🌼 The dance of the branches and leaves, guided by the rhythm of "less than" and "greater than," was a mesmerizing spectacle. 🍂💃

💡 Armed with newfound knowledge and a determined spirit, I took on LeetCode challenges that tested my grasp of these captivating concepts. Each problem was like a puzzle piece, fitting snugly into the grand picture of coding mastery. 🧩🖼️ As I witnessed my solutions fall into place, I couldn't help but feel a sense of accomplishment and growth. 🌱🚀

So here's to a day well spent, in the company of linked lists and binary search trees, forging a path toward greater coding prowess! 🚴‍♂️🌟

Day-7

Today, I dove into the fascinating world of operating systems! 🖥️ I got the lowdown on how systems work, played around with command lines, and even dipped my toes into the mystical realm of vim. ✨ It's like I've unlocked a secret door to the tech universe!

And hold onto your hats, because I also delved into some seriously cool topics. 😎 I cracked the code on hashing, which is like creating a digital fingerprint for data. 🕵️‍♂️ And get this, I also got the 411 on SSH keys – those nifty little codes that open doors to secure connections. 🔑 I learned how to generate them and how they amp up our digital security. 🔐

But wait, it gets even juicier! 🤩 I stumbled upon this magical place called DigitalOcean, where I can create my very own server using the power of the cloud. ☁️✨ Yep, I'm basically a tech wizard now, waving my virtual wand and conjuring servers out of thin air. 🧙‍♂️✨ I even signed up for an account there to unlock even more digital adventures!

So, buckle up, because I'm on a quest to make tech my new best friend. 🚀 From command lines to SSH keys, I'm turning techno-lingo into my own personal playground. And you betcha, I'll be sharing every step of this exciting journey! 🌈🚀🤖

Day-8

Hello there! 😄 Today, I discovered something fascinating - SSH keys and Namecheap! 🌟 Imagine never having to remember those long strings of numbers like 103.52.63.23 for different websites. With Namecheap, you can create your own unique domain names, making things much easier to remember. 🌐✨

Think of it as magic ✨ - you can link that tricky number sequence (like 103.52.63.23) to something memorable, like your favorite website. So, when you type in "google.com," Namecheap works its wizardry and whisks you away to that numerical realm. 🧙‍♂️🔮

No more mental gymnastics trying to recall numbers! 🤸‍♀️ With Namecheap, you're the master of your own domain (name)! 🏰🌍 Say goodbye to the numbers game and hello to the world of simplicity and convenience. 🚀🎉

Day-9

Hey there! 🌟 Today, I delved back into the world of GitHub fundamentals. It's like revisiting an old friend but discovering new secrets! 💼🔍 Learning is a journey, and even though I knew the basics, today I added some extra tools to my toolkit. 🛠️🧰

Putting theory into practice is where the magic happens. ✨💡 It's like turning a dusty book into an exciting adventure! 📚🏞️ As the pieces fell into place, I realized how practical and impactful this knowledge can be.

It's like leveling up in a video game - I knew the path, but now I'm mastering the tricks and shortcuts. 🎮🚀 So, here's to diving deeper into GitHub and making my coding journey even more thrilling! 🌊👩‍💻

Day-10

Hey, that sounds awesome! 🌟 Today, I stumbled upon a course that teaches you how to create your own AI chatbot, just like ChatGPT, using APIs. It's like stepping into the shoes of a web developer magician! 🎩👩‍💻 The concept is seriously cool – you're breathing life into lines of code. ✨🤖

Sure, the API might be a bit pricey, but the doors it opens are worth every penny. 💰💼 I dabbled in the basics and got a taste of the magic – generating responses like a chatbot wizard! 🧙‍♂️💬

Imagine asking a question and getting an instant answer, just like with ChatGPT. It's like having your own pocket genie! 🧞‍♂️🌟 Playing around with APIs and crafting string-to-string magic is like painting with code. 🎨🔮

So, cheers to the thrilling world of AI-driven web development and crafting virtual companions that can chat up a storm! 🌐🗣️ Who knows, your chatbot might just be the next digital superstar! 🌟🤖

Day-11

Sure thing! 🌟 Imagine you're the captain of a spaceship called the "Code Voyager," and you're about to embark on an adventure into the vast galaxy of coding styles. But fear not, because you have two trusty companions on board: Prettier, the Cosmic Formatter, and ESLint, the Intergalactic Linter!

Prettier: The Cosmic Formatter 🚀

Prettier is like the spaceship's interior designer. It takes your messy code and turns it into a stunning masterpiece. Picture this: as you type away, Prettier sneaks in, arranging everything perfectly. Your code becomes as neat as a tidy space station. And the best part? You don't even have to tell Prettier what to do – it knows exactly how to make your code look its best.

ESLint: The Intergalactic Linter 🌌

Meet ESLint, the vigilant guardian of code quality. Think of it as your spaceship's onboard inspector. It scans your code for any signs of trouble, like space debris that could cause bugs or crashes. ESLint points out these issues with flashing lights and beeping alerts, guiding you to make sure your code is safe and ready for any coding adventure.

Day-12 useState()

Today's coding adventure was all about useState in React! 🎉 Imagine you're a wizard summoning magical creatures into your digital realm. With the wave of your coding wand, you conjure the useState spell, creating these enchanting little creatures called "state variables." These creatures hold onto special pieces of information you want to use in your spells (uh, I mean components). And the best part is, you can talk to them and change their information anytime you want! It's like having a bunch of playful pets that help you keep track of important stuff while you sprinkle your code with a touch of coding fun and flair! 🪄🐉✨

like that you can create a use state and store values and use for your applications.

I have also learned map() in react check this

you're on a treasure hunt through a magical forest of data, and you've got a trusty map called map() in your React toolkit. This map helps you explore arrays (lists) of information, like a collection of sparkling gems from an API.

Imagine you have a chest full of shiny gems (data) that you've fetched from an ancient treasure trove (API). Now, you want to inspect each gem one by one. Here's where your map() spell comes in. You wave your wand (well, your code) and chant, "Map-ius Explorium!" This spell takes each gem (item) from the chest (array), lets you examine it, and then moves on to the next one.

For example, let's say you're holding a bunch of magical crystals (data objects) with names. You use the map() spell to summon a magical magnifying glass for each crystal. As you loop through each crystal, the magnifying glass (your code) lets you see its name and other details. You can even do things like create sparkles around the crystals or sort them by their magical properties. And just like that, you've turned a pile of gems into a dazzling showcase of information using the power of map()!

So there you have it! map() is like your personal assistant that helps you go through a bunch of treasures (data items) one by one, letting you cast spells (write code) on each of them. With a little magic and the map() spell, you're the master of arrays and APIs, exploring and making use of the data you find on your coding quest! 🧙‍♂️💎🌳

this is the trusty map

this is the shiny gems (data)

this is the function you get all the data from the arrays like json format and you can use

also a simple example is you declared as cont numbers = [1,2,3] then you have to multiple with 2 now the easy method is to map through the array {numbers.map(num => num * 2)}

you get output [2,4,6]

Day-13 useEffect()

useEffect in React with a fun twist! 🪄 Imagine you're a caretaker of a digital garden, and your job is to water the plants whenever something special happens. Well, that's exactly what useEffect does – it's like having a magical watering can for your React components!

You see, each time you use useEffect, you're telling the garden (your component) to watch out for a certain condition or event. Just like a magical plant whisperer, you're saying, "Hey, if this specific thing happens – like a raindrop falls or the sun comes out – go ahead and do something!"

like this it will render only once and it will do again when it is rendered why we empty array ? So, the empty list is like saying, "Hey robot, just do your task when you're born and then take a rest. You don't need to worry about anything changing later." It keeps things simple when we only want something to happen once at the beginning.

in the above screen shot you can see i have created a function inside use effect i am teeling that run this function and i have given function to fetch data into sjon format so that i can render in the web application and storing in use state

we preventDefault because the when you use preventDefault() with something like a button click, you're making sure that the button doesn't rush off and do its regular thing right away. Instead, you're giving yourself a chance to decide what should happen next – just like you deciding whether to take a cookie at the party or listen to the party organizer first.

simple useeffect example:

Day-14

Here i am confused of useeffect so i have created some examples to tackle that like this is the code where we keep a two arugemnt in useeffect a sepecific like "we are telling that only if count is changed then only u change the header on the wedpage remaining button dont change"

now we see if we give nothing in second arugemnt it will change every time when you click on something like this

React Router

Here i have created a basic understand of how the link and routing works like when we click on something how other page will open without realoding like "✨ When we click a link, it's like a magical portal! Instead of reloading the whole page, the link whispers to the browser, "Hey, take me to this cool place!" 🚀🔗 Then, like a smooth navigator, the browser fetches just the new stuff needed and updates the page, giving us a seamless journey without any interruption! 🌈🌟"

useParams()

Absolutely! 🕵️‍♂️🔍 Imagine your website as a detective who can extract secret clues from the website address 🕵️‍♀️🌐. With the superpower called useParams(), your website can listen to the whispers of the URL and pull out these special codes or arguments that were hidden there 🎩📜. Then, like a mastermind, your website can showcase these codes, turning them into something meaningful or exciting for your visitors to see or interact with 🎉👀. It's like turning a mysterious address into a treasure map and revealing the hidden gems to your users without them ever knowing the behind-the-scenes magic ✨🗺️! here is the example:

this is where we can see using params

this is the dynamic way of using a url

this we can see we get the id and you can also check i react dev tools also

in react dev tools

Day - 15 React Query from ("https://react-v8.holt.courses/lessons/react-capabilities/react-query")

I think it is very cool to use react query compare to useeffect where i guess use effect is complicated like if we fetch api we need to aysnc and awit and like that it will run every time coming to query it is very use useful like we can save the previous fetch in cache and again when we need it will fetch from cache and it is so much cool SEE this Above we can see i imported QueryCLinet and gave stale time and cache time like infinity(it will store once you fetch and again if you want it will fetch from cache) or time like 10 min in milli seconds and again after that time it will fetch again until then it will fetch from cache.

we have created query and fetch api it is more easy compare to useeffect and above we fetch from apiRes and we check if apiRes status is ok or not then we return apiRes.json();

above we use useQury it takes parameters so we give the id and details an if this not there we feth from fectPet then it is a promise we dont need to write a await there and we get data and then we can return

Day-16 React query in place of Useeffect:

In Above code we can see we want to fetch data so we using react query and in apiRes and return in json format and exports

In above code we imported useQuery and store in results using query this will make easy fro caching like above.

Day - 16

Today, I delved into the fascinating world of error boundaries and modals in React! 🚀 Error boundaries are like safety nets for our React applications, helping to catch and gracefully handle errors that might otherwise crash our entire app. They provide a way to enclose a section of our component tree, acting as a shield against unexpected errors that can occur during rendering, lifecycle methods, or event handlers. With error boundaries, I can ensure that my app remains stable and user-friendly even when things go awry. 😅

On the other hand, modals are like little pop-up windows that allow me to display content or actions without navigating to a new page or disrupting the current user flow. They're perfect for displaying alerts, forms, or any kind of additional information that shouldn't clutter the main interface. Learning how to create and manage modals in React opened up a world of possibilities for creating cleaner and more interactive user interfaces. 🌟

I'm excited to continue exploring these concepts and see how error boundaries and modals can enhance the user experience in my React applications. 😄👩‍💻

Day - 17

Today i have started a project Chat App using react and firebase i have done the login page and register page yet to done the remaining part

Day-18

today i haved created a google firebase accout and added auth and storage and database for my chat app

Day-19

Today i have learned how to create dark mode in next js using next-themes first i installed themes and In the _app.js file, wrap your component with the ThemeProvider from next-themes. Set the attribute prop to class to allow the library to apply the theme to the HTML element. We can add some global styles to global.css. Here we set the background of the body to white in light mode and dark gray in dark mode. We use the useTheme hook to know what the current theme is, change the current theme using the setTheme method, and the system theme. Initially, we set the theme to the system theme. The onclick event on the button toggles between the themes. We add some individual class using the dark: variant for the button. We add the toggle button to index.tsx. you can follow "https://www.linkedin.com/pulse/implement-dark-mode-tailwindcss-nextjs13-app-5-simple-lucas-los-arcos" or "https://dev.to/chinmaymhatre/implementing-dark-mode-in-nextjs-with-tailwind-css-and-next-themes-a4e" you can get the output

Day-20

Today i have learned about NextJs data fecthing like same as react but it is more easy

you can see first we need fetch the api and then it return a promise so we use await for that we async the function and get the data now we got the data now how to keep in the screen like your webisite we can store in a varible with json format and get the data like that in next js we use interface and create if you want a selected variable and link the interface to the constant you are assigned to json and then we can map the data i the users api and see every name should be diifferent so we give key and then we show the users name In nextjs caching is present in default soo it is easy if you want to stop the cache you can by using then the cache will stop it will retrive every time. you can add time also like revalidate for this time then it will revlaidate every 10 sec as below img Rendering types

Day-21

Today like i am learning about node js and how the modules works and export and import purely node

Day-22

Today, I learned about different data structures like arrays, lists, and linked lists. It was fascinating to understand how searching works in these data structures. In an array, searching is like looking for something in a neatly organized line-up. Since all the elements are stored in consecutive memory locations, I can quickly find what I need by knowing its position. A list is similar, but it's like searching for items in a bag. It's not as organized as an array, so I might need to go through each item one by one until I find what I'm looking for. Linked lists, on the other hand, are like a chain of clues. Each element points to the next one, so I follow the trail until I reach the desired item.

Day-23

Today, I learned about some fundamental data structures like queues, stacks, and binary trees. It was fascinating to understand how these data structures work and how they can be used in various algorithms and problem-solving scenarios. Queues are like waiting lines, where the first person who enters is the first to leave. It's a linear data structure with two main operations: enqueue (adding an element to the back) and dequeue (removing an element from the front). This concept helps in managing tasks in a first-in, first-out (FIFO) manner. Stacks, on the other hand, are like a stack of plates. The last plate you put on the stack is the first one you take off. It's also a linear data structure but operates on a last-in, first-out (LIFO) principle. You can push elements onto the stack and pop them off the top. Binary trees are hierarchical data structures that consist of nodes connected by edges. Each node has at most two children, typically referred to as the left child and the right child. This structure is widely used in searching, sorting, and organizing data efficiently. I applied what I learned by tackling some LeetCode problems related to these data structures. It was challenging but rewarding to see how these concepts could be used to solve real-world problems. In summary, today's exploration of queues, stacks, and binary trees deepened my understanding of fundamental data structures and how they play a crucial role in efficient data management and problem-solving.