Vadym Chernitsov’s Post

🚀 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

I built a dynamic quiz application using Next.js, TypeScript, and Redux Toolkit to manage state and persistence. The app features two main interfaces: an admin portal where users can add, review, and delete quiz questions with multiple-choice options, and a student page for taking the quiz with real-time scoring and progress tracking. Styled with CSS for a clean, responsive design, it demonstrates full-stack frontend skills in React ecosystem, including form handling, state management, and user experience optimization. Perfect for educational tools or interactive assessments! 🚀 #NextJS #TypeScript #Redux #WebDevelopment #React

Stop using useEffect for everything. These React hooks exist. Most devs forget them. useMemo — cache expensive calculations. You're recalculating on every render. useMemo only runs when dependencies change. Big performance win. useCallback — stable function references. Passing functions as props without this? You're creating a new function every render and breaking React.memo. useReducer — built-in state management. When useState gets messy with 3+ related values, useReducer brings order. Think Redux, but already in React. useRef — more than just DOM refs. Store any mutable value that persists across renders without triggering a re-render. Timers, previous values, flags. useId — SSR-safe unique IDs. Generating IDs for labels and inputs? useId handles unique IDs automatically, even with server-side rendering. Most devs reach for useState and useEffect for everything, then wonder why their app feels slow. The hooks are already there. You just have to use them. Which hook do you wish you'd learned earlier? Drop it below 👇 #React #JavaScript #WebDevelopment #Frontend #TypeScript

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day80 Project: MyShows – Movie Booking App (HTML + Tailwind CSS + JavaScript + TVMaze API) What I built Today I built a fully interactive movie booking web app called MyShows. It allows users to browse shows, view details, and book seats with a smooth and modern UI experience. Challenge I faced Managing seat selection state and ensuring booked seats don’t overlap or reset incorrectly while updating UI dynamically. How I solved it - Used a Set to track booked seats globally   - Managed selected seats with array state   - Separated UI update logic for cleaner rendering   - Improved event handling for dynamic elements  Live Demo: https://lnkd.in/dvz5cgjw Feedback is always welcome! Code Of School   Avinash Gour | Ritendra Gour  #JavaScript #WebDevelopment #100DaysOfCode #Frontend #MovieApp #API #FullStackDevelopment

🚨 React Hooks Mistake That Can Break Your App (And How to Fix It) Ever faced this error? 👇 💥 "Rendered more/fewer hooks than expected" Here’s a simple reason why it happens 👇 ❌ Wrong Approach if (condition) {  return null; } useEffect(() => {  // logic }, []); 👉 What actually happens: 🟢 1st render → condition = true → component exits early → useEffect NOT called 🔵 2nd render → condition = false → now useEffect IS called ⚠️ React sees: Render 1 → 0 hooks   Render 2 → 1 hook 💥 Boom → error 🤔 Quick Question Why does React care so much? 👉 Because React tracks hooks by position, not by name. ✅ Correct Approach useEffect(() => {  // logic }, []); if (condition) {  return null; } 👉 Now every render looks like: Render 1 → useEffect  Render 2 → useEffect ✔ Same order → No error 🧠 Golden Rule (remember this forever) 👉 Hooks must always run in the same order 👉 Always keep them at the TOP Think of hooks like seat numbers in a movie theatre 🎬 If someone randomly disappears from seat 2, everyone shifts — total chaos 😵 👉 Same with React hooks. 👇 Have you ever debugged this error before? #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactHooks #CodingTips

"useEffect" vs. "useLayoutEffect": Are you using the right React hook? 🤔 In React, both "useEffect" and "useLayoutEffect" manage side effects, but their timing is what sets them apart—and choosing the wrong one can impact your app's performance. Here's a quick breakdown: "useEffect" - Timing: Runs asynchronously after the component renders and the browser has painted the screen. Performance: Non-blocking. It won’t slow down the user interface, making it perfect for most side effects. Best For: Fetching data from an API Setting up subscriptions Managing timers "useLayoutEffect" - Timing: Runs synchronously after all DOM mutations but before the browser paints the screen. Performance: Can block the rendering process. Use it sparingly to avoid a sluggish UI. Best For: Reading layout from the DOM (e.g., getting an element's size or position). Making immediate visual updates based on those measurements to prevent flickering. The Golden Rule 🏆 Always start with "useEffect". Only switch to "useLayoutEffect" if you are measuring the DOM and need to make synchronous visual updates before the user sees the changes. Understanding this distinction is crucial for building performant and seamless React applications. #ReactJS #WebDevelopment #JavaScript #FrontEndDev #Performance #CodingTips #ReactHooks

#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

Is poor state architecture the real reason your React app is hard to scale? Full guide: https://lnkd.in/d9Ayg3gM ➤ In most codebases, yes. • Props: parent-to-child only • Local State: UI & form interactions • Context API: auth, themes, no prop drilling • Redux: large-scale apps only • Hooks: performance & global state access ➤ Golden rule: keep state as local as possible. ➤ Simplicity before premature complexity. #ReactJS #FrontendDevelopment #StateManagement #Redux #JavaScript

👩💻React confused me for 3 weeks straight. Props. State. Hooks. Components. Virtual DOM. I felt like everyone else understood it except me. Then I stopped watching tutorials and just BUILT something. Here are the 5 React concepts that finally made it click for me: 1. Component = A reusable Lego brick Everything in React is a component. Think in pieces. 2. Props = Data flowing DOWN Parent sends data to child. One direction. Always. 3. State = Data that changes When state changes, React re-renders. That’s the magic. 4. useEffect = Do something AFTER render Fetch data, set up listeners, run side effects here. 5. useState = The most used hook const [value, setValue] = useState(initialValue) That’s it. That’s 80% of React. Stop tutorial hopping. Build a todo app. Build a weather app. The concepts will stick when you BUILD. 🛠️ Which React concept confused you the most? 👇 #ReactJS #JavaScript #FrontendDev #WebDevelopment #ReactHooks #LearnReact #CodeNewbie #FresherLife #TechEducation #UIDesign #BuildInPublic #TechCareers

React is easy to start… But hard to master. At first, it’s just components and props. But then you realize the real game: 👉 State management 👉 Performance optimization 👉 Re-render control A small mistake in structure can slow down your entire app. What I’ve been focusing on: ✔ Writing reusable components ✔ Avoiding unnecessary re-renders ✔ Keeping logic clean and scalable Because good UI isn’t just about looks… It’s about performance + maintainability. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #UIUX