Real-Time Chess.com Clone with Multiplayer Gameplay and WebSockets

🚀 Built a Mini Game Hub using React + TypeScript 🎮 Just wrapped up a fun side project where I developed a simple Game Hub featuring: 🟣 Snake – Classic gameplay with score tracking 🟣 Sudoku – Logic-based number puzzle 🟣 Chess – Strategy game with interactive board 🔧 Tech Stack: React (Vite + TypeScript) Redux Toolkit for state management React Router for navigation Chess.js + React Chessboard Sudoku generator library 💡 What I focused on: Clean and scalable component structure State management using Redux Reusable UI components Smooth user experience This project helped me strengthen my frontend architecture skills and improve handling of interactive game logic in React. 📽️ Sharing a quick demo video below (under 3 mins) Would love your feedback and suggestions 🙌 Open to collaborating on more interesting frontend projects! Github Repo : https://lnkd.in/g5GMhbjE #ReactJS #FrontendDeveloper #TypeScript #WebDevelopment #Redux #JavaScript #SideProject #GameDevelopment

🚀 Built a Real-Time Multiplayer Tic Tac Toe I recently worked on a small full-stack project — a multiplayer Tic Tac Toe game — mainly to explore how real-time systems work. Instead of building it as a simple UI game, I focused on syncing game state between players using WebSockets. The UI is built with a neo-brutalism-inspired design, which kept the interface simple, bold, and readable. 🔧 Features: • Real-time multiplayer (no polling) • Room-based system (create/join with IDs) • Dynamic board sizes (3×3 up to 8×8) • Server-side validation for moves and turns • Automatic win/draw detection ⚙️ Tech Stack: Frontend: React + TypeScript + Vite Backend: Node.js + WebSocket (ws) Styling: Tailwind CSS 📚 What I learned: • How WebSocket connections work in real-time apps • Managing shared state across multiple clients • Designing a simple room-based system • Handling edge cases like invalid moves and sync issues It’s a simple project, but it helped me understand the basics of building real-time applications beyond standard request-response setups. 🔗 Try it out: https://lnkd.in/gsWV4Pwz (You’ll need two players — or just open it in two tabs) 🔗 GitHub: https://lnkd.in/g5ezJib7 Would appreciate any feedback. #WebDevelopment #React #NodeJS #WebSockets #FullStack #LearningInPublic #TailwindCSS #TypeScript #Neobrutalism

Day 20 of #30Appsin30Days — and I built a multiplayer game. 🎮 FogClaim.io is a real-time territory capture game — think Paper.io — where up to 5 players race to claim as much of a 100×100 grid as possible while hunting each other's trails. Here's the constraint I set myself: no game engines, no frontend frameworks. Just HTML Canvas, vanilla JavaScript, Node.js, and WebSockets. One dependency. Zero build tools. The hardest problem wasn't the rendering or the UI — it was collision detection. In a game loop that processes players sequentially, Player A might walk through Player B's trail without dying — simply because B's trail didn't exist in the map yet when A was evaluated. The iteration order decided who lived and who died. The fix: restructure the entire tick into three phases. Phase 1: Move all players simultaneously. Phase 2: Evaluate all collisions against the same map state. Phase 3: Let survivors lay trail and capture territory. Separating state mutation from state evaluation made the collision logic fully order-independent. A lesson that applies well beyond game dev. A few other things I'm proud of: → Flood-fill territory capture using typed arrays (Int16Array) for performance on a 10,000-cell grid → Session token reconnection — refresh mid-game and your position is restored for 10 seconds → A "peakAlive" counter that prevents a solo player from farming wins before opponents join → Swipe controls on mobile that actually feel good 10 days left in the challenge. I've shipped 20 apps in 20 days — solo, from scratch, every single day. What I've learned most: the gap between "it works in my head" and "it works with two players simultaneously doing unexpected things" is where all the real engineering lives. If you want to see the code or try the game, link in the comments. Github: https://lnkd.in/ghtEDeSM #buildinpublic #30Appsin30Days #JavaScript #WebSockets #GameDev #NodeJS #IndieHacker #SideProject

Simple Lottery Game using React.js Built a fun and interactive Lottery Game using React.js, where users can try their luck by generating random numbers. Key Features: “Buy Ticket” button to generate a random number Random number logic using JavaScript Conditional rendering to display results “Congratulations” message when the winning condition is met Instant UI updates using React state What I Learned: React state management Handling events in React (onClick) Conditional rendering in React Working with random logic in JavaScript Building interactive UI components This project helped me understand how to create interactive and logic-based applications using React. #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #MiniProject #ReactProjects #LearningByDoing #CodingJourney

🎮 Mini Project: Blackjack Game (JavaScript, HTML, CSS) I developed a web-based Blackjack game as a mini project using HTML, CSS, and JavaScript. This project focuses on implementing game logic, DOM manipulation, and interactive user experience. 🃏 Key Features: Random card generation using JavaScript (Math.random) Real-time score tracking and updates Game logic for win (21), lose (>21), and continue (<21) conditions Interactive alerts for game status (win/lose) Dynamic card rendering using images Restart functionality to reset the game 💡 What I Learned: DOM manipulation and updating elements dynamically Handling user interactions and events Implementing loops and conditions for game logic Working with random number generation for simulations Improving UI behavior with JavaScript 🚀 This project helped me strengthen my problem-solving skills and understand how logic-driven games are built in the browser. Looking forward to enhancing it further with more advanced features! 👇 Github link here 👇 https://lnkd.in/gxstMtTD #WebDevelopment #JavaScript #Frontend #MiniProject #GameDevelopment #Coding

🚀 Just built: GameHub – A Browser-Based Gaming Platform A lightweight gaming hub built with HTML, CSS, and JavaScript — no backend, fully playable in the browser. 🎮 Features: • 8 mini-games (Tic-Tac-Toe with AI, Snake, 2048, Sudoku & more) • Achievements & leaderboard system • Persistent profiles (localStorage) • Sound system + PWA (offline support) 🧠 Clean architecture with iframe sandboxing & modular JS. 👉 Try the live demo: https://lnkd.in/g848_a57 🔗 GitHub: https://lnkd.in/gBezHW29 ✨ More updates coming soon. #JavaScript #WebDevelopment #Frontend #GameDev

Memory Card Game built with React 🧠🎴 I recently developed a fun and interactive Memory Card Game using React.js, where the main goal is to match pairs of cards while improving memory and focus. 🔧 Tech Stack Used: React (Functional Components) React Hooks (useState, useEffect) JavaScript (ES7+) CSS for styling and animations ✨ Key Features: Card flip animation 🎴 Randomized card shuffle 🔀 Move counter to track performance 📊 Win detection system 🏆 Responsive design for all devices 📱💻 This project helped me strengthen my understanding of React state management, component structure, and UI logic handling. I’m continuously working on improving my front-end development skills and building more interactive projects. 🔗 GitHub: https://lnkd.in/dRXZtVjK 🌐 Live: https://lnkd.in/dH_hAGXi Feedback and suggestions are always welcome! 🙌 #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #Coding #Projects #100DaysOfCode

I spent the past few weeks building an online multiplayer Ludo game in order to push beyond my current skill level. I initially considered chess, but quickly realized the complexity of move validation would've gotten in the way of what I actually wanted to explore: real-time multiplayer architecture. The game has two modes: 𝗣𝗮𝘀𝘀 & 𝗣𝗹𝗮𝘆 This was handled entirely on the client. I used useReducer to manage game logic, essentially acting as a lightweight game engine in React. 𝗢𝗻𝗹𝗶𝗻𝗲 𝗠𝗼𝗱𝗲 One player creates a room, others join with a room code, and the host starts the game when everyone's ready. Under the hood, Socket.io handles real-time communication (with built-in rooms), while Redis stores the shared game state for each room. I also used localStorage and reconnect events so players don't lose their session on refresh. The part I'm most proud of: I reused the same reducer function from the client on the server. It's a pure function, it takes the current state and an action, and returns a new state. On the server, instead of dispatching actions, the client emits WebSocket events containing those actions. The server runs them through the reducer and saves the result back to Redis. Clean separation. No duplicated logic. Tech stack: Frontend: React, TypeScript, Tailwind Backend: Node.js, Express, TypeScript, Socket.io, Redis (live game state), MongoDB (auth) As a bonus, I also containerized the server with Docker. This project made me noticeably more confident in my backend abilities — especially around designing systems beyond simple MVC. Big thanks to Eti-ini Effiong-Robert for the code review and Elochukwu Okafor for the help with server architecture. Live-Link: https://ludoly.vercel.app/ Github-link: https://lnkd.in/ef-xTK6d #buildinpublic #softwareengineering

#Day486 of #500DaysofCode 🚀 Built a Multi-Game React App from Scratch 🎮⚛️ Excited to share one of my recent frontend development projects — a Multi-Game Arcade Web App built with React.js. This project combines game logic, UI engineering, modular styling, and component architecture into one interactive platform. 🎯 Games Included ✅ Tetris ✅ 2048 ✅ Chinese Checkers 🛠️ What I worked on 🔹 Dynamic game selector dropdown for switching between multiple games 🔹 Reusable header and layout components 🔹 Complex Chinese Checkers board logic & move validation 🔹 Responsive Tetris UI with score and control panels 🔹 Smooth 2048 tile merge logic and animations 🔹 Modular CSS for scalable component styling 💡 Key Learnings This project helped me strengthen my skills in: React component architecture State management with hooks Game loop and movement logic CSS modules & responsive layouts UI animations and transitions Writing scalable frontend code The most exciting part was bringing multiple classic games into a single seamless React experience while keeping the code modular and maintainable. Would love to hear your thoughts on: 👉 Which game should I add next? I’m thinking Snake 🐍, Sudoku 🧩, or Chess ♟️ #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #GameDevelopment #CSS #UIUX #Programming #Coding #Projects #SoftwareEngineering

I've always loved playing those relaxing, daily puzzles like Wordle, Connections, and many more. It's gotten to the point where I thought to myself: "Why not make my own?" Introducing: Storydle! My first real project using React + Next.js + Tailwind. The aim of the game is to fill in the blanks of a story using ONLY words that can be formed by the letters provided in the Scrabble-like word bank on the right. When all blanks are filled, the story is complete and subsequently... you win! This showcase depicts a standard flow for a single game, how to interact with the UI, and how to utilize the three different hint systems. Ideally, this would be a daily game, but I decided to instead release just three stories of incrementing difficulty every week to lessen the burden and to ensure quality comes first in terms of the stories' content. I plan to release this in the near future when everything is polished, but I'm already very excited to share this to the world. Any feedback is appreciated, and I hope you'll enjoy my game! 😁