#Multiplayer Tic-Tac-Toe Game

Step into a whole world of real-time fun in this Online Multiplayer TicTacToe game! Get paired and Connect with players across the globe and challenge them to thrilling matches in a dynamic, interactive environment. Here's what makes the experience fun:

🎮 Real-Time Gameplay: Match up with players instantly and dive into seamless, fun TicTacToe battles.

💬 Integrated Chat & Reactions & Notifications: Keep the fun alive with a built-in chat system...send your messages, emojis, and playful reactions during your matches.

🦸 Epic Avatars from Your Favorite Franchises: Express yourself with unique avatars! Choose from characters inspired by anime, DC heroes, Marvel icons, and more to represent your style in every match.

⚙️ Customizable Game Settings: Set up your game just the way you like—Choose background Themes, Add Sound, and more for a personalized experience.

👥 Player Profiles & Statuses: Browse through all players, check their availability, and track their game statuses in real time.

Whether you're looking to test your strategies, connect with friends, or make new ones, This Online Multiplayer TicTacToe is the perfect mix of classic gameplay and modern multiplayer features. Ready to outsmart your opponents? Let the games begin! 🎉

Demo

https://realtime-tictactoe.netlify.app/

Screenshots

Tech Stack

NextJs 14, Firebase, Tailwind, ShadCn, Redux, Framer Motion, React Query

Features

• Real-Time Multiplayer Gameplay
• Integrated Player Chat.
• Send Reactions In chats.
• Receive Notifications on new messages.
• Dynamic Game Settings.
• View Player Profiles.
• Avatar Selection (Anime, DC, Marvel, Avatar etc.)
• View All Players and Their Status.
• Change from Light mode or Dark Mode.
• Customize Notifications background.
• Added Sound for a Better Game Experience.
• Smooth Interactive Game animations for better gaming experience and feel.
• Smooth Page Transitions.

License

MIT

Optimizations

Next.js Framework: Leveraged Next.js, a lightweight and fast frontend framework, for its built-in optimizations like server-side rendering and static generation.

Custom Reusable React Hooks: Designed custom hooks to encapsulate common logic, making the codebase cleaner and more maintainable.

Performance-Oriented Hooks:

Utilized useCallback to memoize functions and prevent unnecessary re-renders.

Used useMemo to memoize computed values, ensuring expensive calculations are performed only when necessary.

Reusable Components for Animations: Built modular and reusable components to handle animations efficiently, ensuring smooth gameplay without compromising performance.

Lazy Loading: Implemented lazy loading for components, ensuring only the required parts of the app are loaded when needed, reducing initial load time.

Image Optimization: Used Next.js's next/image for image optimization, lazy loading, and responsive resizing.

Use CSS transitions instead of JavaScript-based animations where possible for GPU-accelerated rendering.

Support

For support, email mayorfalomo@gmail.com or contact me via any platform.

Deployment

To deploy this project run

 yarn run dev

🛠 Skills

Javascript, HTML, CSS...

React, Next Js, Typescript, Vue js...

Css, Scss , Tailwind, Shadcn, Chakra Ui, Styled Components, Material UI

Node Js, Express, MongoDb, GraphQL, Apollo server...

Firebase.

Redux

Run Locally

Clone the project

  git clone https://link-to-project

Go to the project directory

  cd my-project

Install dependencies

  yarn install

Start the server

  yarn run dev