Understanding Software Architecture for Dashboard Bets Core

🚀 Learning by Building: Image Upload Feature in User Dashboard Recently, I’ve been working on a User Dashboard Profile section where users can upload and display their profile photos. At first, it looked like a simple feature… but once I started, I realized there’s a lot more happening behind the scenes — file handling, storage path, request parsing, security, etc. While researching ways to handle file uploads in Node.js, I came across Multer, and it genuinely made the whole process much cleaner and more efficient. 🔧 What I Learned 1. How to handle multipart/form-data in Node.js 2. How to configure storage paths dynamically 3.Validating uploaded image formats 4.Saving images safely on the server 5.Displaying uploaded images back in the UI 📦 Why Multer? • Easy middleware setup • Supports disk and memory storage • Handles file filtering & naming • Works seamlessly with Express 🧩 Key Takeaway Sometimes a small feature teaches you a big lesson: Understanding the backend flow is just as important as building the UI. If you’re working on profile uploads, I definitely recommend trying Multer — simple, stable, and beginner-friendly. Excited to keep building and learning! 🚀 #Nodejs #Expressjs #Multer #WebDevelopment #FullStackJourney #LearningByDoing

**New React Architecture Tutorial in the Gen Z JavaScript Series!** 🌳 To master React, you have to think like React! That means visualizing your application not just as a page, but as a **Component Tree**. In my latest video, "Understanding Your UI as a Tree," we simplify this fundamental concept. Grasping the parent-child hierarchy is the key to: * Successfully managing props and data flow. * Architecting reusable and scalable components. * Debugging state issues efficiently. If you struggle with knowing where to put state or how components relate, this video is a must-watch! **Learn to visualize your UI like a pro:** https://lnkd.in/g6KS27dF Do you always sketch out your component tree before coding? Let me know your workflow! 👇 #ReactJS #ReactArchitecture #ComponentTree #DataFlow #JavaScript #WebDevelopment #GenZJavaScript

🔥 Day 44 / #100Daysfrontendchallenge — JSON Tree Visualization Today’s challenge was all about turning raw JSON data into a beautiful, structured visual tree — just like you see in advanced developer tools! 💡 Goal: Build an interactive JSON Tree Visualizer where you can paste any JSON data, and it automatically displays a connected hierarchy of nodes — parents, children, arrays, and values — all structured visually. What I Built: A recursive React component system (Root → Parent → Node) Automatic detection for Objects and Arrays Hierarchical rendering with clear parent-child depth Dynamic color coding for nodes and values Smooth visualization layout using flex and spacing logic ⚙️ Tech Used: React + TailwindCSS (no external libraries — built fully from scratch 🚀) 🧩 Next Steps: Add search functionality that finds and auto-scrolls to any key/value in the tree Draw connector lines between nodes for even better visualization Add zoom-in/out transitions for large JSON structures 🎯 Key Learning: Recursion is the heart of tree visualizations — once you understand how to render components recursively, you can create anything from file explorers to org charts to visual data mappers. 💬 “Visualization isn’t about colors — it’s about clarity.” Super fun challenge, and probably one of the most visually satisfying builds so far in this 100-day journey! Source code : https://lnkd.in/gKQnyF5T #100DaysOfCode #FrontendDevelopment #ReactJS #WebDevelopment #LearningInPublic #JSON #Visualization #JavaScript

⭐ What I Learned Today: Environment Variables in NestJS vs Express Today I explored how environment variables work in NestJS compared to Express, and here’s what I learned: 🔹 Express We install and use dotenv manually: npm install dotenv Load env file: // require('dotenv').config(); Access using process.env. No built-in validation or structure — everything is developer-managed. 🔹 NestJS NestJS provides a more powerful and structured system using the @nestjs/config package. npm install @nestjs/config Key things I learned: Load .env globally: // ConfigModule.forRoot({ isGlobal: true }); Supports multiple environment files (dev, prod). Allows clean modular config using namespaced config files: * database.config.ts * auth.config.ts * app.config.ts Supports Joi validation for env variable type-checking, defaults, and required fields. Powerful advanced features: * ConfigModule.forFeature() → module-level configuration * registerAs() → create namespaced config * registerWhen() → load config conditionally * envVariablesLoaded() → ensure .env is loaded before reading variables ✅ Conclusion Express gives basic manual control with dotenv, while NestJS (using @nestjs/config) provides a cleaner, structured, scalable, and safer configuration system — especially for large enterprise applications. 📘 Docs for reference: NestJS Configuration Docs → https://lnkd.in/dWZmKvgM

Stop trapping business logic in your components. It kills testability, reuse, and migrations. Symptoms • 500-line components with handlers doing auth, validation, uploads, DB writes • Tests that need a full tree + 10 mocks just to check one rule • Hooks full of pricing/eligibility math that don’t need React at all The 15-minute fix Extract a pure function for the use case (e.g., replyToShout(input, deps)). Inject dependencies (getUser, saveImage, createPost) instead of importing singletons. Keep the component thin: read form values, call the function, render states. Test the function with simple mocks—no DOM, no rendering. Reuse the same logic on web + React Native. Rules of thumb • If it doesn’t need state/effects/DOM, make it a pure function. • Hooks orchestrate, they don’t calculate core business rules. • Services handle I/O (API, storage, analytics) behind small interfaces. • Prefer plain objects in/out for serialization and boundaries. What you get Faster unit tests (milliseconds). Smaller components. Clear ownership by layer. Easy portability between frameworks. #ReactJS #ReactNative #CleanArchitecture #TypeScript #WebDevelopment #Testing

⚛ React Hooks & State Management (#MERN_06 in MERN Series) Unlock the power of React Hooks to manage state, side effects, and reusable logic making your components cleaner, faster, and smarter 💡 What You’ll Learn ● useState useEffect and useContext basics ● Manage component and global state efficiently ● Optimize performance with useMemo and useCallback ● Build reusable logic with custom hooks ⚙ Key Highlights 🎯 Simplify logic with Hooks instead of classes 💻 Handle side effects and data fetching easily 🔄 Reuse logic across components 🚀 Foundation for React Routing and Context API Start mastering React Hooks today 👇 🔗 https://lnkd.in/gtQMp2P5 #MERNStack #ReactJS #WebDevelopment #Frontend #JavaScript #FullStack #Coding #LearnToCode

Level Up Your GraphQL API with Pothos: The Type-Safe Schema Builder Tired of the boilerplate and type-safety compromises in your code-first GraphQL development? It's time to explore Pothos, a plugin-based GraphQL schema builder for TypeScript that significantly enhances developer experience and application robustness. Pothos is designed for best-in-class type-safety without relying on code generation or experimental decorators.  It leverages TypeScript's powerful type inference to minimize manual type definitions. This approach allows for a crucial separation between the shape of your external GraphQL API and the internal representation of your data, which is essential for larger, evolving applications. 👉🏻 Key Technical Advantages: - Zero Overhead Core: The Pothos core is lightweight, adding 0 runtime overhead, with graphql as its only dependency. - Powerful Plugin Ecosystem: Pothos's unique plugin system provides deep integration for features like: | - Prisma/Drizzle: Dedicated plugins solve common issues like N+1 queries by integrating efficiently with ORMs. | - Dataloader: Simplify the definition of data-loaders directly alongside types and fields | - Relay:  Easy-to-use builder methods for defining Relay-style nodes and connections, supporting cursor-based pagination. - Code-First, Resolver-Driven: You start with your TypeScript types (your data model) and define your GraphQL types to consume them, leading to a single, consistent source of truth. For teams building scalable, type-safe GraphQL APIs on Node.js, Pothos is a powerful tool that makes complex schema design—from defining types to implementing authorization and efficient data fetching—feel integrated and intuitive. What is the most significant improvement you've seen using Pothos compared to other code-first GraphQL libraries? 💬 Ali N. #TypeScript #GraphQL #Pothos #SchemaBuilder #CodeFirst #WebDevelopment #nodejs

✅ Day 87 of #100DaysOfCode — Smart Property Assignment Logic 🏡⚙️ Today, I worked on adding and integrating the Assigned Property Design and Functionality in my Real Estate Management System. This was one of the most important logical features to ensure that property handling in the system behaves just like it would in a real-world scenario. 💡 What I Built Today I implemented a smart property assignment logic that ensures only available properties can be assigned to a client or user. Here’s how it works 👇 🏠 Only properties with status = “Available” will appear in the dropdown or list when assigning. 🚫 If a property is “Sold” or “Reserved”, it will not be visible for assignment. 🔄 Once a property is successfully assigned, its status automatically changes to “Reserved” in the main property list. This helps keep the data consistent and prevents duplicate or invalid assignments — just like a real real-estate platform where you can’t sell or assign the same property twice. ⚙️ What I Did Today Designed and integrated the Assigned Property UI. Connected the API integration with real data. Added logic-based checks for property availability. Tested multiple cases (available, reserved, sold) to ensure reliability. 🧠 Key Learning This task taught me how crucial data consistency and conditional logic are in large systems. It’s not just about showing or hiding data — it’s about enforcing real-world rules through code, so the application always behaves intelligently and accurately. #Day87 #100DaysOfCode #RealEstateProject #WebDevelopment #LogicBuilding #PropertyManagement #FullStackDev #NodeJS #ReactJS #ExpressJS #LearningByDoing #SmartCoding #DeveloperJourney

 Frontend:  - Angular 20 with zoneless change detection (cutting-edge architecture)  - TypeScript (strict mode) + Angular Signals for state management  - Apollo Client + GraphQL for efficient data fetching  - Chart.js & ApexCharts for data visualization  - SCSS + custom design system  - Lottie animations for smooth UX  Features:  - i18n support (English & Georgian)  - Advanced filtering & sorting  - Mobile-first responsive design frontendRepoUrl:https://lnkd.in/dEnMMhTp Backend:  Key Features:  • Advanced transaction management with filtering, sorting & pagination  • Budget tracking with real-time spending analysis  • Savings goals (pots) with progress tracking  • Multi-currency support (USD, EUR, GEO, RUB) with live exchange rates  • Comprehensive financial analytics & insights  Tech Stack:  • NestJS + TypeScript for type-safe backend  • GraphQL with Apollo Server for flexible API  • PostgreSQL + TypeORM for robust data management  • JWT authentication with Passport.js  • Kursi.ge API integration for real-time currency conversion backendRepoUrl: https://lnkd.in/d9wwJyiY #NestJS #Angular #TypeScript #GraphQL #PostgreSQL #TypeORM #Apollo #ApolloClient #FrontendDevelopment #ResponsiveDesign #SCSS #DesignSystem #LottieAnimations

I build a simple JSON Viewer and here's how it can help you. Many devs complain that they don't have a simple JSON viewer tool that can show them how their data is structured. I got tired of that too. Why I built this: Every developer I know (including me) deals with JSON daily. But we're all using random websites that: ❌ Send our data who-knows-where ❌ Have terrible UX ❌ Crash on large files So I built something just for that but better → https://lnkd.in/d8K7j3BT What it does: Paste messy JSON → Click Parse → Get beautiful formatted output → Copy it That's literally it. No ads, no tracking, nothing. If the data is missing a comma or } somewhere, it will return an error telling you the line so you can quickly adjust My solution runs 100% in your browser or you can use my live github page and your data never leaves your machine. Tech I used: React (because components) CSS3 animations (design focused 🌊 easy on the eyes) GitHub Pages (lite, simple and free hosting FTW - every developer knows it) The best part? I kept it simple. No feature creep. No "enterprise" bloat. Just one tool that does one thing really, really well. Try it → https://lnkd.in/d8K7j3BT Question for you: What's the most annoying dev tool you use regularly? Drop it below - maybe I'll build a better version 👇 P.S. It's open source. Star it, fork it, roast my code - I'm here for all of it 😄 #WebDevelopment #React #JavaScript #DevTools #BuildInPublic