44/100 React-JS projects Hard challenge 🌗 Light & Dark Theme Personal Portfolio React A modern, responsive personal portfolio built with React , featuring light/dark theme, smooth animations, Sliders, EmailJs intigrate and many other things and a clean UI to showcase projects and skills. Key Features Light & Dark theme toggle Fully responsive layout, Smooth animations using Framer Motion Project slider with react-slick Clean, minimal, and modern UI. EmailJs intigration for receiving email from ( yahoo, gmail etc ) The useEffect hook manages side effects such as theme handling and slider setup Remix Icons are used for navigation, theme icons, and social links etc Theme preference is handled dynamically for better user experience. Check out the project and let me know what you think # #TailwindCSS #Ecommerce #FrontendDevelopment #WebDevelopment #Coding #ProjectShowcase #ReactJS #100DaysOfCode #100DaysOfReactProjects #JavaScript #FrontendDevelopment #WebDevelopment #CoderLife #Programming #SoftwareEngineer #DevCommunity #OpenSource #TechJourney #CodeNewbie #Developer #FrontendEngineer #ReactDeveloper #JSDeveloper #WebDevCommunity #DailyCoding #CodeChallenge #ModernWeb #CodingChallenge

I recently built my portfolio site as a side project using React and Three.js. I’ve noticed that most companies prefer a website link even for backend or full-stack roles, I used it as a chance to explore how 3D animations work in the browser while building something practical. The site includes an interactive starfield, an animated astronaut with physics-based motion, and smooth transitions. Building these features was a great way to explore rendering, scene management, and performance optimization in Three.js. Built with React, Three.js, TypeScript, Framer Motion, and Tailwind CSS. Would appreciate any feedback 👀 Link below 👇 https://lnkd.in/gG9vMqU6 #Portfolio #WebDevelopment #ReactJS #ThreeJS #FrontendDevelopment #FullStackDeveloper #SoftwareEngineering

Ever dived into a codebase only to find a spaghetti of identical, yet distinct, @keyframes definitions? It's a frustratingly common scenario, leading to "animation chaos" – wasted development time, confusing global scope conflicts, and an inconsistent user experience. This isn't just about aesthetics; it's a deep-seated architectural challenge that can cripple front-end maintainability. The elegant solution lies in standardizing animations with "Keyframes Tokens." By centralizing dynamic @keyframes using CSS custom properties, we transform a source of chaos into a predictable, scalable system. This approach means consistent user interfaces, reduced maintenance overhead, and robust front-end architecture. In the complex Laravel and React applications I build, adopting this early ensures animations are predictable, performant, and accessible from day one, drastically cutting down on future refactoring efforts. For example, a simple yet powerful token like this cleans up countless duplicates: /* kf-tokens.css */ @keyframes kf-fade-in { from { opacity: 0; } to { opacity: 1; } } How do you tackle animation consistency and maintainability across your projects? #WebDevelopment #FrontendDevelopment #CSS #Animations #SoftwareEngineering #TechConsulting #BangladeshTech

𝐃𝐨𝐧'𝐭 𝐭𝐫𝐞𝐚𝐭 `𝐮𝐬𝐞𝐑𝐞𝐟` 𝐥𝐢𝐤𝐞 `𝐮𝐬𝐞𝐒𝐭𝐚𝐭𝐞` — 𝐢𝐭'𝐬 𝐧𝐨𝐭 𝐠𝐨𝐢𝐧𝐠 𝐭𝐨 𝐫𝐞-𝐫𝐞𝐧𝐝𝐞𝐫 𝐲𝐨𝐮𝐫 𝐜𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭, 𝐚𝐧𝐝 𝐭𝐡𝐚𝐭'𝐬 𝐩𝐫𝐞𝐜𝐢𝐬𝐞𝐥𝐲 𝐢𝐭𝐬 𝐬𝐮𝐩𝐞𝐫𝐩𝐨𝐰𝐞𝐫! I recently helped a junior dev debug an animation issue where they were trying to trigger a re-render by updating `myRef.current`. It's a common misconception. `useRef` is designed to hold mutable values that persist across renders but don't trigger new renders themselves. This makes it perfect for: 1. Accessing DOM elements directly: `const inputRef = useRef(null); <input ref={inputRef} />` 2. Storing a mutable value that doesn't need to be reactive: Think timeouts, interval IDs, or previous state values. `const countRef = useRef(0); countRef.current++; // updates without re-render` The key takeaway: `useRef.current` updates synchronously, but React won't re-render unless state or props change. If you need UI updates, `useState` is your friend. If you need a persistent, mutable reference without the render cycle overhead, `useRef` is your ace in the hole. What's your most clever use case for `useRef`? Or a time it totally stumped you? #React #Frontend #JavaScript #WebDevelopment #ReactHooks

I set myself a challenge: Build an Awwwards-level experience with React 🏆 ⏱ Built in 2 weeks as a solo project We all know those stunning, cinematic websites on Awwwards. They feel less like "web pages" and more like interactive stories. I wanted to stop just admiring them and start building one The Mission: My goal was to engineer a Digital Garden—a space that feels organic, fluid, and alive. This project sharpened my skills in animation architecture, performance profiling, and creative frontend engineering The Experiment: I pushed the boundaries of the modern frontend stack to bridge the gap between creative design and technical performance 🚀 The Stack: Motion: orchestrated complex timelines with GSAP (GreenSock) to create smooth, scroll-driven storytelling Core: Built on React to leverage the latest concurrent rendering features Style: Styled with Tailwind CSS v4 for a zero-runtime, high-performance UI The Result: Turning a static design into a 60fps interactive experience taught me that performance is a feature. Managing micro-interactions without blocking the main thread was the real engineering puzzle here 👇 Check out the result below. I’d love to hear your feedback on the animations #reactjs #gsap #awwwards #frontend #webdesign #creativecoding #javascript #tailwindcss

⛄️ I just built an interactive talking snowman using React and pure CSS! ⛄️ I wanted to challenge myself to create a fun, character-driven UI component without relying on heavy external animation libraries. The result is a lightweight, responsive component that brings a bit of winter magic right to the browser. 🛠️ How it works under the hood: • Built with React 19 and Vite 7 • Uses React state to dynamically manage the snowman's behaviour and synchronise the interactive elements. • Powered completely by pure CSS Keyframes for the fluid animations and character movements, keeping the main thread completely free! ⚡ I’ve attached a quick 10-second video below to show off the effect, but you can also see it for yourself! 👀 Try the live demo: https://lnkd.in/eT2XDdYQ 💻 Check out the source code: https://lnkd.in/ev47WNdQ #ReactJS #CSS #WebDevelopment #Frontend #WebAnimation #JavaScript

🥁 Built an Interactive Drum Kit Using JavaScript DOM! I recently built a Drum Kit Web App to strengthen my understanding of DOM manipulation and event handling in JavaScript. You can play the drums by: 🎵 Clicking the buttons ⌨️ Pressing keys on your keyboard Each key triggers a unique sound along with a button animation effect. 💡 What I Practiced: 1.DOM Selection (querySelectorAll) 2.Event Listeners (Click & Keypress) 3.JavaScript Audio Object 4.Switch Statements 5.Class Manipulation 6.setTimeout() for animations 💻 GitHub Repository: 👉 https://lnkd.in/gfRUffKN This project helped me understand how JavaScript interacts with HTML & CSS in real time. Small project. Big learning. 🚀 If you're learning frontend development — build projects. That’s where real understanding happens. 💡 #JavaScript #WebDevelopment #Frontend #DOM #100DaysOfCode #LearningInPublic #FrontendDeveloper

🚀 Decoding the Matrix: Cyberpunk Glitch Text Effect 🟢 Experimenting with DOM manipulation and CSS animations to create "glitch" effects is always fun! 💻✨ I recently built a dynamic, hacker-style text scramble using pure HTML, CSS, and JavaScript. No external libraries or frameworks—just vanilla web tech! 💡 Key Learnings & Features: ✅ Dynamic Scrambling: Used setInterval and array mapping to rapidly cycle through random characters before locking the correct text in place from left to right. ✅ Neon Glow Aesthetic: Leveraged layered CSS text-shadow properties to create a vibrant, realistic glowing terminal effect. ✅ DOM Manipulation: Seamlessly updating the UI character by character for that satisfying decode illusion. Building these mini-projects is a fantastic way to solidify core frontend concepts and understand how things work under the hood. One line of code at a time! 🌱 👇 Check out the code and try it yourself! 🔗 Live Demo: https://lnkd.in/gpQaG8ek Would love to hear your thoughts or feedback! 🙌 #WebDevelopment #JavaScript #CSS #Cyberpunk #Frontend #CreativeCoding #LearningJourney #SheryiansCodingSchool #Projects

🐍 Snake Game – JavaScript Grid-Based Arcade Game A classic Snake Game built using HTML, CSS, and JavaScript. The game logic is implemented using arrays and coordinate-based objects, where the snake is stored as an array of positions and food is generated randomly on a dynamic grid. It includes real-time movement, collision detection, score tracking, high score storage using localStorage, and a restart feature. 💻Technical Implementation: Snake stored as an array of {x, y} objects Food stored as a coordinate object 2D grid mapped into a 1D array for efficient rendering Game loop managed using interval control Modular structure separating logic, rendering, and state management 🎨 UI Design: Grid-based board layout Styled snake and food elements Score panel with high score display Minimalist dark theme design #JavaScript #FrontendDeveloper #WebDevelopment #HTML #CSS #GameDevelopment #CodingProject #OpenToWork #PortfolioProject #LearningInPublic

I've been building a pixel character creator in React + TypeScript It originally started as a vertical slice from another project I was experimenting with, but I pulled it out into its own thing so I could spend more time exploring the rendering and asset systems. The character is rendered by compositing sprite layers on a canvas, with a config object controlling the selected parts and colours. One of the main goals was to make the system asset-driven. New sprite assets can be added to the project and automatically picked up by the app without extra configuration. Assets are now basically drag-and-drop, which makes me happy. Things I focused on while building it: - Reducer-driven config state for predictable updates - Build-time asset discovery using `import.meta.glob` - Layered sprite composition with validation for asset pairings - Image preloading/caching so switching configs feels instant Demo: https://lnkd.in/eFNSnQca Repo: https://lnkd.in/eSYd8Tpb Still a WIP, but have a play around with it. Keen to hear what you think. Also, my niece and nephew designed a few of the assets, so I can't take all the credit for those 🙂 #webdevelopment #reactjs #typescript #frontend #gamedev