Build Responsive Typeracer Clone using Flutter & Node.js and learn about Socket.io, Express, MongoDB, Singleton Pattern Implementation along with Provider to manage the state of the build!
Source Code: github.com/RivaanRanawat/typeracer-flutter-clone
Features:
1. Create/Join Room with validation
2. Copy Room Code
3. Displaying Typed Words, Current Word & Words to be Typed
4. Real Time Progress of Users in Same Room
5. Leaderboard displaying User's WPM
6. Responsive UI
Time Stamps:
(00:00:00) Demo
(00:02:29) Tech Used & Prerequisites
(00:02:42) Flutter Set up
(00:05:03) Home Screen UI
(00:20:41) Create Room UI
(00:29:37) Join Room UI
(00:32:18) About Node.js
(00:39:06) About NPM
(00:41:42) About Packages We Will Use
(00:54:47) Creating & Listening to Server
(01:01:51) Connecting to MongoDB
(01:11:31) Connecting to Socket.io
(01:13:42) Connecting Frontend Socket to Backend
(01:17:33) Singleton Pattern
(01:26:31) Creating Rooms
(02:19:56) Joining Rooms
(02:31:51) Timer
(03:35:31) Copy Game Code
(03:42:21) Handling User Input
(03:52:32) Displaying Sentence
(04:06:57) Calculating WPM
(04:25:03) Displaying Scoreboard
(04:28:52) Typing Speed Progress Bars
(04:35:01) Deploying Node.js Server
Links:
Client Side Socket: pub.dev/packages/socket_io_client
NodeJS Official Website: nodejs.org/en/
MongoDB Official Website: www.mongodb.com/
Express: expressjs.com/
Axios: www.npmjs.com/package/axios
Http: www.npmjs.com/package/http
Socket.io: www.npmjs.com/package/socket.io
Mongoose: www.npmjs.com/package/mongoose
Nodemon: www.npmjs.com/package/nodemon
Pubspec Assist: marketplace.visualstudio.com/items?itemName=jeroen…
#flutter #nodejs #socket
コメント