Multi Player TicTacToe Game App using Flutter, Node, Express and Socket - Full Stack Development
46.7 هزار بار بازدید -
2 سال پیش
-
Learn to build an online
Learn to build an online dual tic-tac-toe game. This game uses Flutter, Node.js, Express, Socket.io, MongoDB and Mongoose. This Flutter tutorial is for beginners looking to get some experience in Node + Flutter. This xoxo game is multiplayer game allowing two users to play at the same time against each other. You will learn to create and join rooms, play realtime without having the need to refresh the screen, display points and create a glow themed UI in Flutter. We will build an app available for Android, iOS, Web, MacOS and Windows!
Prerequisite for this tutorial is just to have a basic knowledge of Flutter & Dart!
Discord Link: Discord: discord
Source Code: https://github.com/RivaanRanawat/flut...
Flutter Clones Playlist: Flutter Projects
TimeStamps:
(00:00:00) Introduction & Demo
(00:00:37) Flutter Project Setup
(00:17:07) Create Room Screen UI
(00:26:20) Join Room Screen UI
(00:28:43) Nodejs Intro
(00:33:58) Creating Nodejs Server
(00:45:33) Connecting to MongoDB
(00:51:33) Connecting to Socket.io
(00:57:53) Creating Rooms
(01:32:01) Adding Provider State Management
(01:39:50) Joining Rooms
(02:04:02) Waiting Lobby
(02:16:26) Scoreboard UI
(02:20:48) Tic-tac-toe Board UI
(02:26:16) Displaying X and O Realtime
(02:44:56) Playing According to User Turns
(02:48:06) Adding Animation
(02:48:57) Displaying Turn
(02:51:30) Checking & Displaying Winner of Round
(03:05:51) Clear Board
(03:08:30) Check Winner of Game
(03:14:25) End Game
(03:17:15) Conclusion
Resources:
DebugProfile.entitlements: https://github.com/RivaanRanawat/flut...
Regex for MongoDB ID Validation: /^[0-9a-fA-F]{24}$/
Connect With Me Here:
Instagram: Instagram: optimalcoding
GitHub: https://github.com/rivaanranawat
Linkedin: LinkedIn: rivaan-ra..
Facebook: Facebook: rivaan.ranawat
Mail: [email protected]
Medium: Medium: namanrivaan
Twitter: Twitter: RanawatRivaan
#flutter #nodejs #game
Prerequisite for this tutorial is just to have a basic knowledge of Flutter & Dart!
Discord Link: Discord: discord
Source Code: https://github.com/RivaanRanawat/flut...
Flutter Clones Playlist: Flutter Projects
TimeStamps:
(00:00:00) Introduction & Demo
(00:00:37) Flutter Project Setup
(00:17:07) Create Room Screen UI
(00:26:20) Join Room Screen UI
(00:28:43) Nodejs Intro
(00:33:58) Creating Nodejs Server
(00:45:33) Connecting to MongoDB
(00:51:33) Connecting to Socket.io
(00:57:53) Creating Rooms
(01:32:01) Adding Provider State Management
(01:39:50) Joining Rooms
(02:04:02) Waiting Lobby
(02:16:26) Scoreboard UI
(02:20:48) Tic-tac-toe Board UI
(02:26:16) Displaying X and O Realtime
(02:44:56) Playing According to User Turns
(02:48:06) Adding Animation
(02:48:57) Displaying Turn
(02:51:30) Checking & Displaying Winner of Round
(03:05:51) Clear Board
(03:08:30) Check Winner of Game
(03:14:25) End Game
(03:17:15) Conclusion
Resources:
DebugProfile.entitlements: https://github.com/RivaanRanawat/flut...
Regex for MongoDB ID Validation: /^[0-9a-fA-F]{24}$/
Connect With Me Here:
Instagram: Instagram: optimalcoding
GitHub: https://github.com/rivaanranawat
Linkedin: LinkedIn: rivaan-ra..
Facebook: Facebook: rivaan.ranawat
Mail: [email protected]
Medium: Medium: namanrivaan
Twitter: Twitter: RanawatRivaan
#flutter #nodejs #game
2 سال پیش
در تاریخ 1401/02/10 منتشر شده
است.
46,732
بـار بازدید شده