Chunking Data with LeetCode Array Manipulation

Day 09 (Project) : Fetching Real-World Data with JavaScript! 🌐💾 I’m excited to share my latest project—a dynamic "User Data List" application built with HTML, CSS, and JavaScript! This project was a deep dive into how modern web applications communicate with external servers. Key features of this project: • 📡 Fetch API: Implemented asynchronous requests to retrieve user information from a REST API. • ⏳ Loading State: Added a "Loading..." indicator to improve user experience while data is being fetched. • 📊 Dynamic Table Generation: Used JavaScript to iterate through the retrieved data and populate a clean, organized HTML table. • 🎨 Responsive UI: Designed a simple and intuitive interface for seamless data viewing. Mastering the Fetch API is a major step in my journey toward building full-stack applications. It’s amazing to see how a few lines of code can connect a webpage to a world of data! #JavaScript #WebDevelopment #FetchAPI #CodingJourney #FrontendDeveloper #Programming #TechSkills #LearningByDoing #Amarjeet Sir Gravity Coding

#Day12 Map is a powerful built-in data structure that is often better than regular objects when you need to use non-string keys or maintain insertion order. In my ongoing Backend track in Mentorship for Acceleration, I learnt why Maps are such a powerful and useful data structure in modern JavaScript. While regular objects work for simple key-value storage, Maps give us more control and reliability. I practiced by creating a Phonebook contact list, and it really helped me understand how clean and efficient they are. Methods I used below : => .set () : I used this to add new contacts. => .get () : I used this to retrieve the actual value associated with a key. If the key exists, it returns the value; if not, it returns undefined. => .has () : Lastly, I used this to check if a particular key exists in the Map before trying to access it. It returns true or false, which helps prevent errors and makes the code safer. Maps also preserve insertion order and allow keys of any type. This makes them excellent for caching, session management, and building lookup tables. How often do you think a JavaScript developer needs to use maps ? #M4ACELearningChallenge #LearningInPublic #JavaScript

Difference between fundamental data structures used in JavaScript: - If you need to access items by index, you should probably be using an Array. - If you need to access items by key, you should probably be using an Object. - If you need to access items by value, you should probably be using a Map. - If you need to store unique items and perform operations on that collection, you should probably be using a Set. #javascript #concepts #developer #coding #engineer

🚀 Excited to share a project I recently worked on with my teammate Zyad Dorgham We developed a web-based platform designed to connect paper companies with customers through an organized and user-friendly system. 🔹 The platform allows companies to: Register as vendors Add and manage their paper products Control product descriptions and details Access a dashboard to track orders and monitor profits 🔹 And customers can: Register and browse products easily Place multiple orders Track their orders step-by-step Choose Cash on Delivery as a payment method 💻 Technologies used in this project: HTML CSS JavaScript Python (Flask) for backend APIs SQLite Database This project helped us gain strong hands-on experience in building a complete web application including frontend, backend, database integration, and dashboard management. 🔗 You can try the website here: https://lnkd.in/dKR_TX_r Special thanks to my teammate Zyad Dorgham for the great collaboration on this project! 🙌 #WebDevelopment #Flask #Python #JavaScript #SQLite #Backend #Frontend #SoftwareEngineering #Teamwork

🚀 Day 9| JavaScript Today I explored JavaScript Foundations: Primitive Data Types & Operations — the building blocks of programming. 📌 Key concepts I learned: 🔹 Primitive Data Types • Number & BigInt → Used for numeric values and large integers • Boolean → Represents true or false (used in decision making) • Null & Undefined → Represent empty or uninitialized values 🔹 Operations in JavaScript • Arithmetic operations (+, -, *, /) • Logical operations (&&, ||, !) • Comparison operations (==, ===, >, <) ⚙️ I also understood how JavaScript performs computational actions to process and manipulate data effectively. 💡 Learning these fundamentals is important to build strong problem-solving skills and write efficient code. Step by step, I’m strengthening my JavaScript basics and programming logic. 💻✨ #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #LearningInPublic #DeveloperJourney #ProgrammingBasics

𝗪𝗵𝗮𝘁'𝘀 𝗗𝗧𝗢𝘀 𝗶𝗻 𝗡𝗲𝘀𝘁 𝗷𝘀 In NestJS, a 𝗗𝗧𝗢 (Data Transfer Object) is an object that defines how data is sent over the network. Think of it as a contract or a blueprint that specifies exactly what data a client (like a mobile app or a browser) must send to your server. While DTOs are a general software pattern, NestJS uses them powerfully to handle validation and type safety. 𝟭. 𝗪𝗵𝘆 𝗱𝗼 𝘄𝗲 𝘂𝘀𝗲 𝗗𝗧𝗢𝘀? Without a DTO, your application wouldn't know if the incoming data is correct. If a user tries to register but sends a "username" as a number instead of a string, your database might crash. DTOs help prevent this by: 𝗩𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻: Ensuring the data has the right format, length, and type. 𝗗𝗮𝘁𝗮 𝗧𝗿𝗮𝗻𝘀𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻: Stripping away unwanted data that the client shouldn't be sending (e.g., trying to set their own isAdmin status). 𝗧𝘆𝗽𝗲 𝗦𝗮𝗳𝗲𝘁𝘆: Providing IntelliSense and auto-completion in your code so you know exactly what properties exist on the request body. 𝟮. 𝗖𝗹𝗮𝘀𝘀𝗲𝘀 𝘃𝘀. 𝗜𝗻𝘁𝗲𝗿𝗳𝗮𝗰𝗲𝘀 In NestJS, it is highly recommended to use Classes for DTOs rather than Interfaces. 𝗜𝗻𝘁𝗲𝗿𝗳𝗮𝗰𝗲𝘀 are removed during JavaScript compilation, meaning NestJS cannot check them at runtime. 𝗖𝗹𝗮𝘀𝘀𝗲𝘀 are preserved in the final code, allowing NestJS to use Pipe validation to check data as it arrives. #Programming #BackendDevelopment #TypeScript #NestJS

🚀 𝐃𝐚𝐲 𝟖/𝟏𝟓 𝐨𝐟 𝐌𝐲 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐋𝐞𝐚𝐫𝐧𝐢𝐧𝐠 𝐒𝐞𝐫𝐢𝐞𝐬 Today I learned about Objects in JavaScript 💡 👉 Objects are used to store data in key-value pairs 📌 Example: let person = { name: "Kanishka", age: 21, isStudent: true }; 👉 Access values: console.log(person.name); // Kanishka console.log(person["age"]); // 21 👉 Update values: person.age = 22; 👉 Objects help us represent real-world data easily 💻✨ 💬 Question: Do you prefer arrays or objects for storing data? Let’s learn together 🚀 #JavaScript #WebDevelopment #LearningInPublic #Day8 #FrontendDevelopment

#Day13 Set is a powerful built-in data structure in JavaScript that stores only unique values while maintaining insertion order. During my #Backend development track in Mentorship for Acceleration, I deepened my understanding of Sets and explored how to perform essential set operations. Union, Intersection, and Difference. While arrays are flexible, they allow duplicates and have slower lookup times for membership checks. Sets solve these limitations elegantly. Today, I practiced creating Sets and implementing the three core operations that are frequently used in real-world applications. Key Set Operations I Implemented: => Union: Merges all elements from two Sets while automatically removing duplicates, producing a single comprehensive collection. => Intersection: Extracts only the values that exist in both Sets, making it ideal for finding common elements between datasets. => Difference: Returns elements that are present in the first Set but not in the second, which is particularly useful for comparison and data filtering. Mastering Sets has encouraged me to think more intentionally about data structures. Choosing the right one, whether an Array, Object, Map, or Set — significantly impacts code performance, readability, and maintainability. This session reinforced that writing good code is not just about logic, but also about selecting the most appropriate tools for the job. How often do you find yourself using Sets in your JavaScript projects? #M4ACELearningChallenge #LearningInPublic #JavaScript

🚀 map() vs. forEach(): Do you know the difference? The Hook: One of the first things we learn in JavaScript is how to loop through arrays. But using the wrong method can lead to "hidden" bugs that are a nightmare to fix. 🛑 🔍 The Simple Difference: ✅ .map() is for Creating. Use it when you want to take an array and turn it into a new one (like doubling prices or changing names). It doesn't touch the original data. ✅ .forEach() is for Doing. Use it when you want to "do something" for each item, like printing a message in the console or saving data to a database. It doesn't give you anything back. 💡 Why should you care? 1. Clean Code: .map() is shorter and easier to read. 2. React Friendly: Modern frameworks love .map() because it creates new data instead of changing the old data (this is called Immutability). 3. Avoid Bugs: When you use .forEach() to build a new list, you have to create an empty array first and "push" items into it. It’s extra work and easy to mess up! ⚡ THE CHALLENGE (Test your knowledge! 🧠) Look at the image below. Most developers get this wrong because they forget how JavaScript handles "missing" returns. What do you think is the output? A) [4, 6] B) [undefined, 4, 6] C) [1, 4, 6] D) Error Write your answer in the comments! I’ll be replying to see who got it right. 👇 #JavaScript #JS #softwareEngineer #CodingTips #LearnToCode #Javascriptcommunity #Programming #CleanCode #CodingTips