DEV Community: Nargis Khatun

Chess Meets Code: How I Created a Full-Stack Game Using React + MongoDB

Nargis Khatun — Sun, 22 Jun 2025 05:03:00 +0000

What if your next coding project could look sleek and challenge your logic? I set out to solve that by building Chess Master, a full-stack React + MongoDB chess game — featuring real AI battles and dark mode that devs want. Here’s how I did it.

I created Chess Master, a full-stack chess application built with React, Tailwind CSS, Node.js, and MongoDB, featuring:

AI battles (with Stockfish)
Puzzle solving
Light/dark theme toggle
Secure authentication
Fully responsive UI

In this post, I’ll walk you through the process: how I built it, the tech I used, and what I learned along the way.

💻 Project Overview

🔗 Live Demo: https://chess-frontend-dun.vercel.app
📦 GitHub (Frontend): [https://github.com/itxnargis/chess-frontend]
📦 GitHub (Backend): [https://github.com/itxnargis/chess-backend]

Tech Stack:

Frontend: React.js, Tailwind CSS, chessboard.js, Framer Motion
Backend: Node.js, Express.js
Game Logic: chess.js
Database: MongoDB
AI: Stockfish
Deployment: Vercel (frontend), Render (backend)

🛠️ Frontend – React + Tailwind

I structured the frontend using React functional components and chessboard.js for the visual board. Chess.js handled move validation, checks, legal moves, and FEN management.

Example: Handling Piece Movement

const handleMove = (source, target) => {
  const move = game.move({ from: source, to: target, promotion: 'q' });
  if (!move) return false;
  setGame(new Chess(game.fen()));
  return true;
};

🌐 Responsive Design with Tailwind

Used utility classes like flex, grid, p-4, md:w-1/2, etc.
Designed for desktop-first, then used breakpoints for mobile.

⚙️ Backend – Node.js + MongoDB

The backend handles:

User auth (bcrypt password hashing)
Puzzle score tracking
API endpoint to send FEN to Stockfish and return the best move

Sample API Endpoint:

app.post('/api/ai-move', async (req, res) => {
  const { fen } = req.body;
  const bestMove = await getStockfishMove(fen);
  res.json({ move: bestMove });
});

I used Express middleware for sessions, mongoose for DB schema, and CORS for frontend-backend connection.

🤖 Integrating AI with Stockfish

This was the most exciting and complex part.

I used Stockfish.js, a WebAssembly version of Stockfish
Sent the current board FEN to the engine
Got back the best move suggestion
Updated frontend board accordingly

Sample AI Request Flow:

Player makes move → send new FEN to backend
Backend runs Stockfish with that FEN
AI move returned → applied to board

🚧 What I Learned

Real-world state management with React (chess logic is complex!)
Hands-on practice with game loop & user input handling
Styling faster & cleaner with Tailwind CSS
Integrating an external AI engine
Secure backend session handling
Better understanding of project planning, deployment & testing

🚀 What’s Next

Real-time multiplayer using Socket.IO
Saving games to the DB for history tracking
Leaderboard & ranking system
Share puzzles via link

🙌 Final Thoughts
This project helped me grow as a full-stack developer. If you’re a developer looking to sharpen your skills, I highly recommend building games like this — they combine UI, logic, networking, and UX into one challenge.

💬 Let’s Connect

If you're a dev, a recruiter, or someone who loves chess + code, I’d love to hear from you!

🧠 Have feedback? Want to collaborate? Need help with a React or Node project?

👉 DM me on LinkedIn | 🌐 Portfolio

♟ Discover the Ultimate Chess Experience with Chess Master!

Nargis Khatun — Fri, 14 Feb 2025 13:25:33 +0000

♟ Chess Master – Play, Learn, and Compete!

Chess isn’t just about memorizing moves – it’s about strategy, adaptation, and growth.

Welcome to Chess Master! This web app is designed for chess lovers of all levels. Whether you're a beginner or a grandmaster, our platform helps you refine strategies and elevate your game.

🚀 Play Chess Now!

Click here to play and start your journey!

🎮 Game Modes Like Never Before!

Chess Master offers a diverse range of game modes to keep you engaged:

🌍 Global Multiplayer – Compete against players worldwide in real-time battles.

👥 Local Multiplayer – Play with a friend on the same device.

🤖 AI Challenge – Face off against Stockfish AI, featuring multiple difficulty levels.

🔎 Daily Puzzles – Solve carefully crafted chess puzzles to enhance your tactics.

🎲Random Play Mode – Play an unpredictable game for extra excitement!

👤 Personalized Chess Experience

Enjoy a suite of features designed for an immersive chess journey:

🔐 Secure Authentication – Sign up or log in to access all features.

📊 Game History Tracking – Analyze your past games and improve your performance.

🧠 Puzzle-Solving Stats – Monitor your puzzle progress and mastery level.

🎨 Stunning & Interactive Chess Gameplay

Experience chess with a visually appealing and interactive board:

✅ Real-Time Move Validation – Ensure legal and strategic moves.

🔊 Sound Effects – Enjoy engaging audio feedback for moves and captures.

📱 Responsive Design – Play seamlessly on desktop or mobile.

✨ Animated Transitions – Smooth UI animations for an enjoyable experience.

🎥 Puzzle Video Solutions – Learn from expert analyses and tutorials.

🛠 Built with Cutting-Edge Technologies

Chess Master is developed using modern web technologies for seamless gameplay:

Frontend: React.js + Vite

State Management: Redux Toolkit

Chess Logic: chess.js

Board Rendering: chessboard.js

Styling: Tailwind CSS

Animations: Framer Motion

Audio Effects: Howler.js

API Client: Axios

🔧 Getting Started

Want to run Chess Master locally? Follow these steps:

Clone the repository:

git clone https://github.com/yourusername/chess-master.git
cd chess-master

Install dependencies:

npm install

Configure environment:

REACT_APP_BASE_URL=your_api_base_url

Start the development server:

npm run dev

Open http://localhost:3000 in your browser and start playing!

🤝 Join the Chess Master Community!

Chess Master is an open-source project, and we welcome contributions from developers and chess enthusiasts. Want to improve the platform? Follow these steps:

Fork the repository
Create a feature branch:

git checkout -b feature/AmazingFeature

Commit your changes:

git commit -m 'Add some AmazingFeature'

Push the branch:

git push origin feature/AmazingFeature

Submit a Pull Request – Contribute to the future of online chess!

📜 License

Chess Master is distributed under the MIT License. Feel free to use, modify, and share it!

Chess Master is more than just a game—it's an immersive chess experience designed for players of all levels. Whether you're competing globally, challenging AI, or solving puzzles, Chess Master is the perfect place to refine your chess skills.

🎯 Checkmate awaits! Play now: Chess Master Live

Winter Wonderland Dreams: CSS Art for December

Nargis Khatun — Sun, 29 Dec 2024 04:16:35 +0000

This is a submission for Frontend Challenge - December Edition, CSS Art: December.

Inspiration

When I think of December, I envision serene snowfalls, moonlit nights, and the warm charm of a snowman standing in a frosted wonderland. This artwork captures the dreamy essence of winter—blending the magic of snowfall with the peaceful glow of a starry night.

Demo

Check out the demo below! View the live version and explore the code here: CodePen Demo.

https://codepen.io/itxnargis/pen/raBzPbx)

Journey

Creating this piece was an enjoyable challenge. I focused on blending gradients and radial effects to bring the snow, stars, and moon to life. Key elements include:

Responsive Design: Ensuring the snowman and background elements adapt beautifully to various screen sizes.
Animation Details: Added twinkling stars and falling snow for a dynamic, whimsical feel.
Layering Textures: Radial gradients were used to give depth to the snowman and create realistic frosted textures.

What I Learned

The power of radial gradients for creating soft, glowing effects.
Fine-tuning CSS animations to simulate realistic snowfall.
Combining responsive techniques with visual effects to enhance accessibility.

Next Steps

Adding interactive elements, like hover effects or dynamic snowfall intensity.
Enhancing the responsiveness further for ultra-small devices.
Exploring more intricate winter-themed objects, such as pine trees or cozy cabins.

Feel free to fork the code and experiment! Let me know your thoughts or ideas in the comments.

Happy holidays and happy coding!

Trendz-An Ecommerce Site Using Wix

Nargis Khatun — Sat, 13 Jul 2024 14:52:46 +0000

This is a submission for the Wix Studio Challenge .

What I Built

Trendz is a comprehensive eCommerce website featuring sections such as Home, About, Services, and Products. The site is designed to provide users with a seamless and personalized shopping experience. Utilizing Wix Stores and Wix Member Area for login and signup, Trendz ensures secure and efficient user management.

Demo

Demo: https://itxnargiskhatun.wixstudio.io/trendz

Development Journey

Trendz focuses on providing a seamless shopping experience for users, featuring a variety of products. Creating Trendz was a fulfilling journey, especially since I started with no prior knowledge of Wix. My first task was to create the header and footer sections. I focused on making these sections clean and user-friendly to ensure easy navigation. The website includes a dynamic homepage with sections for Home, About, Services, and Products, as well as a robust user authentication system through the Wix Member Area for login and signup.

Wix Stores API: Integrated to manage product data and display information on the website. This allowed for easy addition, categorization, and management of products, as well as the creation of dynamic product pages.

Wix Member Area API: Implemented to facilitate user login and signup, enabling users to create accounts, save preferences, and track orders.

One Byte Explainer: Web Storage

Nargis Khatun — Thu, 28 Mar 2024 07:05:09 +0000

Explainer

Web Storage is a browser feature that allows websites to store data locally on a user's device. It provides a way to persistently store data across sessions, enabling applications to cache information, save user preferences, and maintain state. With Web Storage, developers can utilize two types of storage mechanisms: localStorage, which stores data with no expiration date, and sessionStorage, which stores data for the duration of the page session.

Additional Context

This demo website, using local storage is created by me. It demonstrates the implementation of Web Storage in a practical scenario. I built this website to showcase the functionality and benefits of Web Storage firsthand. Feel free to explore and test its features. Whether it's storing user preferences for a customized experience or caching frequently accessed data for faster loading times, Web Storage plays a crucial role in enhancing the performance and usability of web applications.

How I Glam Up My Markup

Nargis Khatun — Mon, 25 Mar 2024 10:28:37 +0000

What I Built

I enhanced a set of HTML code provided by the challenge with custom CSS to create a visually appealing website focused on camp activities. The website showcases various outdoor activities such as hiking, fishing, and camping, utilizing clean and modern design elements to improve user experience. By applying CSS styling, I aimed to make the content more engaging and visually appealing without altering the underlying HTML structure.

Demo

Source Code: github.com/itxnargis/camp-activities
Live Demo: itxnargis.github.io/camp-activities/

Journey

I've always been excited about front-end development, so diving into this project was a no-brainer for me. It was a real challenge, though. Making the website responsive and finding the right color combinations? Yeah, that wasn't easy. At first, I didn't even know what the website should look like, but I just took it step by step. Eventually, I figured it out and got it done.

Then, I decided to spice things up a bit. I started with a simple form, something you see everywhere. But I thought, why not make it visually appealing? I hesitated at first, thinking it might be overkill for just a form. But I took a leap of faith and decided to
experiment.

I even tried adding animations, but after countless Google searches and failed attempts, I realized it wasn't working out. I needed to add a in my HTML, but couldn't because of limitations. Frustrated, I almost gave up. But then, I stumbled upon the idea of adding a border, and it turned out to be a game-changer. It added that extra touch of style I was looking for, and suddenly, the form looked amazing.

After finishing up the form, I felt inspired to make it even more interactive and user-friendly. That's when I decided to add light and dark theme options for all types of users. In JavaScript,
Honestly, I wasn't sure what to add because everything seemed fine without it. But hey, it turned out great anyway. I ran into some issues with adding HTML, but in the end, it all came together. I also attempted to add an alert message if the user didn't select anything, but it didn't quite look right. So, I made the fields required instead, which was a much cleaner solution.

Overall, it was an AMAZING experience. From starting with a simple form to designing it and then adding light and dark themes, not to mention diving into JavaScript—it wasn't easy, but I thoroughly enjoyed pushing my boundaries and embracing new challenges. And you know what? It was all worth it. The journey of growth and learning, the satisfaction of overcoming hurdles—I wouldn't trade it for anything. Can't wait to see what other challenges lie ahead. Bring it on!

How I Transformed My Favorite Snack into CSS Art

Nargis Khatun — Sat, 23 Mar 2024 10:37:55 +0000

Introduction:

In this submission, I'll be showcasing my CSS art inspired by my favorite snack.

Inspiration

"I chose to create CSS art for this challenge because I enjoy the creativity and technical aspects of designing with CSS.

Demo

Source Code: github.com/itxnargis/cup-cakes
Live Demo: itxnargis.github.io/cup-cakes/

Journey

You know, I've always been curious about working with CSS. There's something magical about turning thoughts into styles and seeing them come to life on the screen. When I decided to embark on this CSS challenge, I knew exactly what I wanted to make – the beloved cupcake, my absolute favorite.

At first, I aimed for simplicity. As I delved into the world of CSS, I had to deal with many sorts of problems – getting things in the right place, making colors blend nicely, and shaping stuff up.

Along the way, I made a rookie mistake: my cupcake was horizontally centered, but vertically... well, let's just say it took a while to get it right. I had to tweak and twirl many lines of code until, finally, it all fell into place.

After all this, the background color was white, but white was just too boring for me. So, I played around with some colors. After a bit of mixing and matching, I found the perfect backdrop – simple but eye-catching.

In the end, I realized that sometimes less truly is more. So, I just kept it simple and, at last, seeing my cupcake come together brought me joy.

This whole experience has been a revelation. Normally, you'd just grab an image for something like this, but there's something about crafting it yourself. It's like adding a pinch of your own magic to the mix. Overall, it was an AMAZING experience.