Hi everyone,

Are you tired of playing tic tac toe on your own? Playing with random strangers instead of your fellow cousins, friends? You want a game that you and your friends can start right away just by entering some numbers?

Better Tic-Tac-Toe is the way to go 🎉 🎉

💙 Link demo: (Look best on mobile device, but it still looks good on desktop though)

betterttt.com

💙 Github Repo:

github.com/anhduy1202/better-tic-tac-toe-cl.. (Client)
github.com/anhduy1202/better-tic-tac-toe-se.. (Server)

👨‍🎓 About me

I'm a Computer Science sophomore studying in the United States and I'm recently learning web development on my own. My goal is to become a software engineer working in Silicon Valley one day

💡 Inspiration

I've been working as a teacher assistant for a middle school Math class and we always play online tic tac toe in during break time. However, the problem is that we have to send game link to other so we can play 1v1 with the students, and we don't want to grab other social media to send the link. Also, those online games are too easy since it's just a 3x3 grid.

Therefore, I decided to make Better Tic-Tac-Toe to solve those problems, you don't need to send any links to their social media in order to join game with your fellow cousins, children,...

🏆 Features

🔑 User Authentication
🎨 Create Room
🔎 Join Rooms through Room ID
⚔️ Compete with other people by joining their room in real time
⚡ Kick you out if Room ID doesn't exist or the room is full
🌙 Dark Mode !!!

📚 Tech Stacks

Auth0: User Authentication (Auth0 also helps me with avoiding similar username)
ReactJS: FrontEnd
SCSS: Styling
Socket.io: Real-time connecting
Real-time database Firebase: Update games + available/full rooms in real-time
Toastify: Pop-up notifications when the rooms isn't available/ full or doesn't exist
Netlify: Client hosting
Heroku: Server hosting

🎮 App Insight ( Light + Dark Mode )

Login page

Desktop - 2login (1).png

This is how the users going to see when they access the web at the first time through their mobile devices, in order to get full access to the game, they must log in through Auth0 in order to see other features

Home page (After Login)

Desktop - 2after-login.png

Now users will be able to see other features after they sign in, they can click on the log out button and they'll be redirect to the login page above

🌞 Friendly Mode (Play with friends)

Create Room

Desktop - 2create.png

If users choose to create a room, a random ID number will be generated so that they can send those number for their friends to join, then they can click join to make the rooms active to play

In-game

Desktop - 2game.png

After the user create the room and click Join, they will be sent to the room and wait until there's another player to join the room

Find Rooms

Desktop - 2find.png

Then other player can simply type in the Room ID to join the same room, player can't join a room that doesn't exist or if it's already full and they'll receive a pop-up notifications in that case.

Desktop - 2warning.png

Gameplay

Desktop - 2gameplay.png

After the other player join, it'll show their name on both player's screen and they can start playing tic-tac-toe turn by turn

The game will end when the first player makes a 4 in a row/column/diagonal

Game Ended

Desktop - 2win.png

A win/lose/draw overlay will be displayed and user can choose New Game to Create/Join another games

🔥 Compete Mode (Play with random people)

If users click the Compete option from the Navigation bar, they will see all of the active rooms in real time that are created by other players, these rooms will be labels either available or full depends on the number of players inside the room.

Desktop - 2room.png

Then user can join which rooms is available and they'll be sent into that room, if they join a full room, they'll get kicked out and a pop up will be displayed

Desktop - 2full.png

If no one creates room at the moment, there'll be a message display that there're no rooms to play :(

Desktop - 2empty.png

Buy danieltruong a coffee

About danieltruong

Making apps that can change the world

Hey 👋 I'm a Computer Science sophomore studying in the US with the goal to become a software engineer

👾 Introducing Better Tic-Tac-Toe: It's tic-tac-toe but better !!