Nikhil PC’s Post

Picking the wrong JavaScript game engine early can cost you weeks. From Phaser's battle-tested 2D toolkit to Babylon.js pushing into WebGPU territory, the landscape has real tradeoffs worth understanding before you write your first line of game code. This practical comparison breaks down five actively maintained engines by dimension, workflow, and TypeScript support — so you can start building, not second-guessing.

Just built something cool while learning React Three Fiber 🌍✨ I created an interactive Seven Wonders globe using React + Three.js (react-three/fiber + drei). 👉 Features: • Rotating 3D globe with smooth motion • Click on any wonder → camera animates + globe rotates • Clean transition from globe view → info panel This is one of my first steps into 3D on the web, and honestly… it was 🔥 seeing it come alive. Took help from AI + lots of trial & error 😅 Check it out: https://lnkd.in/deUHAHFx Still learning, still building. More crazy stuff coming soon 🚀 #React #ThreeJS #WebDevelopment #Frontend #LearningInPublic #JavaScript

🎬 Movie Search Application (React) Developed a responsive movie search web application using React that allows users to search and explore movies in real time. The application integrates with an external movie API to fetch dynamic movie data such as title, poster, year. Implemented core React concepts including state management using hooks like useState and useEffect, along with event handling for search functionality. Added features like instant search, Enter key search, conditional rendering for error handling, and sorting movies by release year. Designed a clean and responsive UI using Flexbox and styled-components, including dark mode support for better user experience. 🔗 Live Demo https://lnkd.in/g2X-_Ken 💻 GitHub Repository https://lnkd.in/gczd-9bY #ReactJS #JavaScript #APIIntegration #RESTAPI #StyledComponents #ResponsiveDesign #FrontendDevelopment #WebDevelopment #MovieApp #FrontendProject #Coding #WebApp #Netlify #GitHub #OpenSource

🚀 Just built a Number Guessing Game using JavaScript! This project helped me practice: ✅ DOM Manipulation ✅ Event Handling (click & Enter key) ✅ Conditional Logic ✅ Game State Management 🎮 Features: - Random number between 1–100 - Limited attempts - Feedback (Too High / Too Low) - Win counter & restart option I’m currently improving my JavaScript skills and building small projects daily to get better 🚀 Next step: Moving towards React and building more interactive apps! 💻 Feedback is welcome 🙌 #JavaScript #WebDevelopment #Frontend #CodingJourney #100DaysOfCode

Junior me: "Why is my React component randomly resetting?" Senior me: "Did you touch the DOM directly?" Junior me: "...maybe" Here's the lesson that took me longer than I'd like to admit: React owns the DOM. You don't. When you do this 👇 document.querySelector('.box').style.display = 'none'; React has no idea. On the next re-render, it overwrites you. Silently. Mercilessly. The right way? ✅ Use useEffect to run side effects after render ✅ Use useRef for safe, controlled DOM access ✅ Use state to drive UI changes — not DOM calls useEffect(() => {  inputRef.current.focus(); }, []); This is React-aware. It survives re-renders. It cleans up after itself. The mental shift that changes everything: You're not telling the DOM what to do. You're telling React what the UI should look like. React does the rest. Took me a while to get this. Hope it saves you some debugging hours. 🙌 #React #useEffect #JavaScript #FrontendDevelopment #WebDev #ReactJS #Programming #DeveloperLife #TechTips #CodeNewbie

🚀 Day 36 — #React_Refs Today I learned about React Refs 🔗 Ref means reference. Since React is a frontend library, sometimes we need to directly interact with the DOM elements. Refs provide a way to access DOM nodes or React elements created in the render method. 🧠 Why Refs are Useful 🔹 Managing focus 🔹 Text selection 🔹 Media playback 🔹 Triggering animations 🔹 Integrating third-party DOM libraries ✅ Important Notes 🔹 Refs directly interact with the DOM 🔹 They work imperatively, not declaratively 🔹 They bypass normal React state updates 🔹 Overusing refs is not recommended because it may affect performance 💡 Refs are powerful for special DOM-related tasks where state-based rendering is not enough. 🔥 Another important step toward mastering advanced React concepts. #React #ReactRefs #FrontendDevelopment #JavaScript #WebDevelopment #10000 Coders

React journey continues — and today's lesson was all about Components. 🧱 A few days ago I talked about JSX. Then the DOM and Virtual DOM. Today? Components made my brain light up in the best way. Here's what I learned: A component is just a JavaScript function that returns JSX. That's it. ```jsx function AnimalFacts() {  return <p>Fun fact about animals!</p>; } ``` But what surprised me the most? You can use it like an HTML tag: ```jsx <AnimalFacts /> ``` That one line renders your entire component. Mind = blown. 🤯 The analogy that made it all click for me? LEGO bricks 🧱 Each component is its own brick — built separately, snapped together to make something bigger. And the best part? They're REUSABLE. One component can work for a dolphin, a lobster, and a starfish! Self taught, learning in public, and taking it one concept at a time. 💪 If you're on a similar journey, let's connect! And if you're experienced — what's YOUR favourite analogy for explaining components? Drop it below 👇 #React #JavaScript #Frontend #Components #LearningInPublic #100DaysOfCode #SelfTaught

Just shipped my new portfolio — built from scratch with Next.js 15, TypeScript, Tailwind CSS, and Framer Motion 🚀 Took it from a 3,000-line static HTML file to a proper component-driven Next.js app over a weekend. Server-side email handling, custom domain, fully responsive, dark/light mode — the whole package. A few things I picked up along the way: • Data separation matters — moving content to typed config files made everything 10x easier • Animation libraries (Framer Motion) beat hand-rolled CSS keyframes for maintainability • Proper architecture > clever tricks • Ship > perfect — iterate after going live Live: usamazafar.me #WebDevelopment #NextJS #TypeScript #Portfolio #SoftwareEngineering #FullStackDeveloper

✨ 𝗗𝗮𝘆 𝟳 𝗼𝗳 𝗠𝘆 𝗥𝗲𝗮𝗰𝘁 𝗝𝗼𝘂𝗿𝗻𝗲𝘆 ⚛️🚀 Today I learned about the `𝘂𝘀𝗲𝗥𝗲𝗳` 𝗵𝗼𝗼𝗸, and it felt a bit different from other hooks. Unlike state, updating a ref doesn’t trigger a re-render. That makes it useful for storing values that need to persist between renders without affecting the UI. I also learned how `useRef` can directly access DOM elements, which is helpful for things like focusing inputs, managing scroll, or interacting with elements when needed. What stood out to me is how React gives controlled ways to interact with the DOM without breaking its flow. #ReactJS #JavaScript #WebDevelopment #LearningJourney #FrontendDevelopment

💡 Mastering Closures in JavaScript! Today I explored one of the most powerful concepts in JavaScript — Closures 🔥 Built a small utility function makeTextSizer() that dynamically changes font size using closures. The inner function remembers the size even after the outer function has executed — and that’s the magic! ✨ 🧠 Key Learnings: 🛠️ Example use case:Click a button → dynamically update UI → clean & efficient code This is why JavaScript feels so powerful once you understand what’s happening behind the scenes. 🚀 On to deeper concepts next! #JavaScript #WebDevelopment #Frontend #Closures #CodingJourney #LearnInPublic #100DaysOfCode