How We Built Real Brave 🚀Learn Tech with Ryan & Richard
👂 Tap 🔊 on any bubble to hear it read aloud — or press the button to listen to the whole story!
👋 The Story Begins
🧑💻
Ryan Brito · Age 15
Hey Richard! Ready to tell everyone how we actually built Real Brave? I think kids would love to know the real story behind it.
👾
Richard Bryan · Age 12
Absolutely Ryan! It's actually a great story. Two kids, a laptop, and a big idea — and now it's a real live game platform! Let's start from the very beginning.
🌐 HTML — Building Webpages
👾
Richard Bryan
The very first thing we learned was HTML — HyperText Markup Language. HTML is like the skeleton of a webpage. Every heading, every paragraph, every button you see on a website? That's HTML doing the work!
HTMLCSSJavaScript
🧑💻
Ryan Brito
And we pair HTML with CSS — Cascading Style Sheets — that's what makes everything look pretty! Colours, fonts, rounded corners, the dark background you see right now — all CSS. Then JavaScript makes it move and respond when you click things.
👾
Richard Bryan
💡 Fun Fact!
Every game on Real Brave — every scoreboard, every button — was made with just HTML, CSS, and JavaScript. No special app download needed. Just open a link in your browser!
Every game on Real Brave — every scoreboard, every button — was made with just HTML, CSS, and JavaScript. No special app download needed. Just open a link in your browser!
🧑💻
Ryan Brito
The 3D worlds inside the games use a library called Three.js — it's JavaScript that draws 3D graphics right inside the browser. So when you walk around in Real Brave, that's Three.js drawing every tree, road, and building in real time!
⚙️ Node.js — The Server Brain
🧑💻
Ryan Brito
So HTML and JavaScript run inside your browser — on your own computer. But we also needed a brain running on a server somewhere. That's where Node.js comes in!
Node.js
👾
Richard Bryan
Node.js lets you run JavaScript on a server — not just in a browser! Think of it like this:
🖥️ Your browser = the TV screen showing the game
⚙️ Node.js = the game console in the back — keeping score, remembering who you are, and connecting everyone together
⚙️ Node.js = the game console in the back — keeping score, remembering who you are, and connecting everyone together
🧑💻
Ryan Brito
Our Node.js server handles logins, hero profiles, leaderboards, multiplayer rooms, and chat — all in one. The best part? We use the same programming language — JavaScript — on both the front end and the back end. So we only needed to learn one language!
📡 WebSockets — Talking in Real Time
👾
Richard Bryan
Here's something super cool — how do players see each other moving in real time? Normal websites ask the server a question and wait for an answer, then the connection closes. But that's way too slow for a game!
🧑💻
Ryan Brito
That's what WebSockets solve! A WebSocket is like a phone call that never hangs up. Once your browser connects to our server, the line stays open. The server can push updates to you instantly — like where other players are — without you having to ask every time.
WebSocket
👾
Richard Bryan
⚡ Wow Fact!
When you see another player move in Real Brave, that movement travelled from their browser → up to our AWS server → back down to your browser — in less than one tenth of a second. That's faster than a blink! 👁️
When you see another player move in Real Brave, that movement travelled from their browser → up to our AWS server → back down to your browser — in less than one tenth of a second. That's faster than a blink! 👁️
☁️ AWS — Our Cloud Computer
🧑💻
Ryan Brito
Now here's a big question — where does our game server actually live? It's not on my laptop at home! We use AWS — Amazon Web Services — which is a cloud server.
AWS EC2Cloud
👾
Richard Bryan
A cloud server is just a powerful computer inside a big building called a data centre — owned by Amazon. Instead of buying one, we rent it. It runs our Node.js game server 24 hours a day, 7 days a week. Even when we're asleep, the server is on!
🏢 AWS EC2 stands for Elastic Compute Cloud. "Elastic" means you can make it bigger or smaller anytime, just like stretching elastic! Amazon has data centres all around the world.
🧑💻
Ryan Brito
We installed Ubuntu Linux on our cloud server — Linux is a free operating system that runs most of the internet. Then we put Apache on top, which is a web server that handles HTTPS — the secure padlock 🔒 you see in your browser — and directs visitors to the right place.
🤖 AI — Our Smart Helper
👾
Richard Bryan
Now the most exciting part — we used Artificial Intelligence, or AI, while building this platform. AI is software that can understand language, reason about problems, and even help write code!
AIClaudeLLM
🧑💻
Ryan Brito
We used an AI called Claude, made by a company called Anthropic. Think of Claude like a super smart study buddy. We describe a problem, and Claude helps us think through the solution. We still write the code and make every decision — Claude just helps us learn and go faster.
👾
Richard Bryan
AI is not magic though! It's a special type of computer program trained on billions of words and code examples. It's called a Large Language Model — or LLM. It's really good at language — explaining, summarising, and writing. But it can still make mistakes, so you always check its work!
🤔 Think About It: AI is a tool — like a calculator. A calculator helps you do maths faster, but you still need to understand the maths. AI helps you code faster, but you still need to understand what you're building!
🧑💻
Ryan Brito
The really cool thing is that AI is going to be a huge part of every career in the future — doctors, teachers, engineers, artists. Learning to work with AI now, while you're young, gives you a massive head start! 🌟
🗺️ OpenStreetMap — Real World Roads
👾
Richard Bryan
Here's something that blew my mind when we first used it — the race tracks in Brave Racers are based on real city roads! We use a free map database called OpenStreetMap.
🧑💻
Ryan Brito
OpenStreetMap is like Wikipedia but for maps. Millions of volunteers around the world add roads, buildings, and places. It's completely free to use. So when you race in Brave Racers, you're driving on actual real-world street layouts from real cities!
🌍 Real World Learning: Real Brave uses OpenStreetMap so players learn real place names, real road layouts, and real geography — while having fun!
⭐ The Full Stack — Everything We Used
🧑💻
Ryan Brito
So here's the complete list of everything we used to build Real Brave:
HTML / CSS / JS
Three.js
Node.js
WebSockets
AWS EC2
Apache
AI — Claude
OpenStreetMap
👾
Richard Bryan
And the most important thing — Ryan is 15 and I'm 12. We are kids, just like you. If we can build a real multiplayer game platform with cloud servers and AI, so can you.
🌟 Start Here:
1️⃣ Learn HTML first — it's the easiest start
2️⃣ Then add CSS to make things look great
3️⃣ Then JavaScript to make things interactive
4️⃣ Then Node.js for servers
5️⃣ Then cloud + AI — you'll be building platforms too!
1️⃣ Learn HTML first — it's the easiest start
2️⃣ Then add CSS to make things look great
3️⃣ Then JavaScript to make things interactive
4️⃣ Then Node.js for servers
5️⃣ Then cloud + AI — you'll be building platforms too!
🧑💻
Ryan Brito
The portal is live right now at games.hi4.in. Jump in, pick a game, make a hero profile, and play! See you in the arena! 🚀⚔️
🎮 Ready to Play?
Ryan and Richard built this entire platform — HTML, Node.js, WebSockets, AWS, AI and all.
Jump in and see it for yourself. It's free!