Just built a full-stack Note-Taking App from scratch — Java backend + Web frontend, zero frameworks! Pinnacle Lab Task 2 After working on my Quiz Game project, I decided to level things up. This time I built a complete Note-Taking Application where Java does the heavy lifting as a real HTTP server — and the browser talks to it through a REST API I designed myself. Here's what I made: Java Backend (NoteApp.java) → Built using com.sun.net.httpserver — no Spring, no external libraries → Full CRUD REST API: GET / POST / PUT / DELETE → Thread-safe in-memory note store with file persistence (notes.json) → CORS handling, MIME-type routing, and static file serving — all from one file Web Frontend (HTML + CSS + Vanilla JS) → Real-time search with debounce → Category filters: Work 💼 Personal 🙂 Ideas 💡 Urgent 🔥 → Auto-save on every keystroke — syncs to Java backend silently → Pin notes, delete with confirmation modal, word/character count → Fully responsive layout UI Design →Aurora Light theme → Playfair Display (serif) for headings + Inter for body — because typography matters → Soft cream backgrounds, coral orange accents, warm paper shadows → Smooth micro-animations throughout What I learned building this: How Java's built-in HTTP server works at the socket level. Writing a hand-rolled JSON parser without any library. Thread synchronization for concurrent API requests, how fetch() communicates with a backend in real time. That great UI design is as important as great code The entire project runs by compiling one Java file and opening a browser. No Maven. No Node. No Docker. Just javac and java. 💡 This is part of my Pinacle Lab Projects series where I'm challenging myself to build real, working apps that connect core Java concepts to modern web interfaces. Pinnacle Labs #Java #WebDevelopment #FullStack #REST #API #HTML #CSS #JavaScript #JavaDeveloper #Programmin #SoftwareEngineering #Learning #BuildInPublic #PinacleLabProjects

🚀 Day 3 & 4 – Web Application As part of my Java Full Stack journey with Frontlines EduTech (FLM) & Fayaz S, here’s what I explored over the last two days 👇 🔹 Server vs Servlet Server: A system that handles client requests and sends responses. Servlet: A Java program that runs on the server and processes requests to generate dynamic responses. In simple terms, the server acts as a container that manages servlets. 🔹 Servlet Life Cycle (3 Phases) 1️⃣ Initialization (init) Called only once when the servlet is created Used for initial setup/configuration 2️⃣ Service Handles client requests Based on request type, it calls: doGet() → Fetch data doPost() → Send data doPut() → Update data doDelete() → Delete data doPatch() → Partial update 3️⃣ Destruction (destroy) Called when the server shuts down or servlet is removed Used for cleanup activities 🔹 Web Technologies Overview HTML 🏗️: Structure of a web page CSS 🎨: Styling and layout JavaScript ⚙️: Adds interactivity and dynamic behavior Frameworks 🚀: Help build scalable applications faster with reusable components #Java #JavaFullStack #Servlets #WebDevelopment #FullStackDeveloper #JavaDeveloper

Hi JavaScript developers 👋 A few months back, I released an npm package called html-to-pdf-headless. Since then, I’ve received valuable feedback and also identified some issues myself. I’ve been working on improving it and I’m excited to share that the package is now more efficient and stable. 🔧 Release Notes: - Fixed table box length issue - Fixed color rendering issues (previously some colors were not picked correctly) - Fixed dashed border issue - Added missing fonts - Fixed item alignment issues ✨ New Feature: Added a powerful new method to generate DOCX files directly from HTML This update focuses on better rendering accuracy, improved consistency across outputs, and enhanced developer experience. If you're working with server-side document generation, this might save you a lot of time and headaches. 👉For more details you can check it out here: https://lnkd.in/dkTA4Tjk I’d really appreciate your feedback, suggestions, or contributions to make this even better 🙌 #javascript #nodejs #npm #webdevelopment #opensource #developers #programming #coding #softwaredevelopment #frontend #backend #devtools #productivity #html #pdf #docx

What is SOLID? SOLID is a set of 5 design principles that help write clean, maintainable, and scalable code. • S - Single Responsibility Principle A class should have only one reason to change. Example: One class should handle only one responsibility like UserService or PaymentService. • O- Open/Closed Principle Classes should be open for extension but closed for modification. You should add new functionality without changing existing code. • L - Liskov Substitution Principle Subclasses should be replaceable with their parent class without breaking the application. • I- Interface Segregation Principle Do not force a class to implement methods it does not use. Create smaller, specific interfaces instead of one large interface. • D - Dependency Inversion Principle Depend on abstractions, not concrete implementations. Example: new. Use interfaces instead of directly creating objects with & Quick Summary • S → One responsibility • O → Extend without modifying • L → Replace without breaking • | → Small interfaces • D → Depend on abstraction * Interview Tip SOLID principles are widely used in frameworks like Spring Boot and help you design scalable backend systems. #Angular #RxJS #JavaScript #FrontendDevelopment #WebDevelopment #AngularDeveloper #SoftwareDeveloper

🚀 **Understanding JavaScript Variables Like a Pro (var vs let vs const)** If you're working with JavaScript, choosing the right keyword — `var`, `let`, or `const` — is more important than you think. Here’s a simple breakdown 👇 🔸 **var** * Function scoped * Can be re-declared * Can be re-assigned * Hoisted with `undefined` 👉 Mostly avoided in modern JavaScript due to unexpected behavior. --- 🔹 **let** * Block scoped * Cannot be re-declared in same scope * Can be re-assigned * Hoisted but in Temporal Dead Zone (TDZ) 👉 Best for variables that will change. --- 🔒 **const** * Block scoped * Cannot be re-declared * Cannot be re-assigned * Must be initialized at declaration 👉 Best for constants and safer code. --- 💡 **Pro Tip:** Always prefer `const` by default → use `let` when needed → avoid `var`. --- 📊 The attached diagram explains: * Scope hierarchy (Global → Function → Block) * Memory behavior * Key differences visually --- 🔥 Mastering these fundamentals helps you: ✔ Write cleaner code ✔ Avoid bugs ✔ Crack interviews easily --- #JavaScript #WebDevelopment #Frontend #Coding #Programming #Developers #LearnToCode #Tech #SoftwareEngineering #NodeJs #Json

Dev Notes #06 JavaScript feels like a breath of fresh air. For the past several months, my focus has been almost entirely on Java and Spring Boot: annotations, dependency injection, bean lifecycles, REST API design. Backend development is deeply rewarding, but it demands a particular kind of discipline. Everything is structured, strongly typed, and explicit by design. So when I began picking up JavaScript and React last week, my first reaction was genuine surprise at how different the experience felt. No type declarations. Components as functions. UI that responds to state. Coming from Java, it initially felt almost too flexible. But as I moved beyond the syntax and started reasoning about how things actually work, the depth became apparent. One concept that stood out early was memoization, specifically React's useMemo hook. The premise is straightforward: cache the result of a computation and only recalculate when its dependencies change. What made it click for me was recognising the intent behind it. While working through a component that parsed and tokenized text at the word level, re-executing that logic on every render would have been unnecessary and wasteful. useMemo made the computation deliberate, run once, reuse until something meaningful changes. That mindset, being intentional about what executes and when is not unfamiliar. It is the same principle that drives query optimization and efficient API design on the backend. The layer is different; the thinking is the same. JavaScript offers flexibility that Java does not. But flexibility without understanding is just unpredictability. The more I explore the frontend, the more I find that strong fundamentals transfer across the stack. #JavaScript #React #WebDevelopment #Java #DevNotes

🚀 Understanding MVC Architecture in Web Development MVC (Model-View-Controller) is one of the most important design patterns every developer should master before working with modern frameworks like Laravel. 🔹 Model – Manages data and database logic 🔹 View – Handles the user interface 🔹 Controller – Processes requests and connects Model & View 💡 This separation makes applications: ✔️ More organized ✔️ Easier to maintain ✔️ Scalable for real-world projects 📌 Example: When a user clicks “Login”, the Controller handles the request, the Model checks the data, and the View displays the result. Mastering MVC is a key step toward becoming a better full-stack developer. #Laravel #WebDevelopment #MVC #Programming #SoftwareEngineering #FullStack #Coding #Developers

🚀 **ReactJS Project Structure – Standard Folder Setup (2026 Guide)** A clean and scalable folder structure is the foundation of every successful React application. Here’s a quick breakdown 👇 📁 **Root Level** * `node_modules/` – Project dependencies * `public/` – Static files (HTML, favicon) 📁 **src/ (Core Application)** * `components/` – Reusable UI components * `pages/` – Route-level views * `assets/` – Images, fonts, icons * `hooks/` – Custom React hooks * `context/` – Global state management * `App.js` – Root component * `index.js` – Entry point 📁 **Additional** * `tests/` – Test cases * `styles/` – Global styling ⚙️ **Config Files** * `.env` – Environment variables * `package.json` – Dependencies & scripts * `README.md` – Documentation 💡 **Best Practices** ✔️ Keep components reusable ✔️ Separate business logic (hooks/services) ✔️ Maintain clean and scalable structure 📌 A well-structured project = Better performance + Easy maintenance + Faster team collaboration #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #SoftwareArchitecture #CodingBestPractices #100DaysOfCode #Java #Nodejs #python #DotNet #Csharp

If you're using JavaScript and still confused between "var", "let", and "const"... you're not alone 😅 But this is something every developer must get right 👇 🔹 var - Function scoped - Can be redeclared ✅ - Can be reassigned ✅ - Hoisted (initialized with "undefined") ⚠️ Can cause unexpected bugs → Avoid in modern JS 🔹 let - Block scoped "{}" - Can be reassigned ✅ - Cannot be redeclared ❌ 👉 Best choice when value needs to change 🔹 const - Block scoped "{}" - Cannot be reassigned ❌ - Cannot be redeclared ❌ 👉 Best for fixed values (recommended by default) 💻 Quick Example: var a = 10; var a = 20; // ✅ allowed let b = 10; b = 20; // ✅ allowed // let b = 30; ❌ error const c = 10; // c = 20; ❌ error 🚀 Pro Tip: Use "const" by default → switch to "let" only when needed. Avoid "var" completely. 💬 What do you use most in your projects — "let" or "const"? #javascript #webdevelopment #mern #developers #coding