Koding Kombat is an engaging educational coding platform tailored for adolescents, providing a fun and interactive way to learn coding skills, with a focus on Python. The platform incorporates gamified elements, featuring street-fighter-style beat 'em up combat animations in a unique medieval-themed setting with futuristic elements, including an AI-controlled robot opponent.
Embark on an adventurous coding journey designed for complete beginners. Quest Mode guides users through an interactive story, teaching Python programming basics along the way. Defeat enemies by correctly answering coding challenges, unlocking cool animations upon success.
Challenge yourself in this competitive mode where you combat an AI-controlled opponent in timed challenges. Answer questions correctly to unleash devastating attacks on your opponent, reducing their health points. The winner is the first to reduce their opponent's health to zero by answering more questions correctly.
- Leaderboard: Accumulate points and showcase your prowess on the leaderboard.
- Profile History: View your previous game history in the Fighting Mode.
Upon signup, personalize your avatar for an enhanced and unique experience. Your chosen avatar will be featured in both the story and fighting modes.
-
Clone the GitHub repository:
git clone https://github.com/jabz80/jabbascript
-
Navigate to the home directory::
cd jabbascript -
Install dependencies for the server:
cd server npm install -
Install dependencies for the client:
cd ../client npm install -
Run the frontend and backend servers:
# In the server folder npm run dev # In the client folder npm run dev
-
Create an instance of a PostgreSQL hosting platform (e.g., Elephant SQL) and add the relevant DB_URL to a .env file in the server folder. Define a localhost PORT environment variable.run dev
-
Initialize the database tables:
npm run setup-db
- HTML
- CSS
- Bootstrap 5
- React
- Express
- Vite
- Jest
- Supertest
- Nodemon
- Socket.io
- Bcrypt
- Axios
- Monaco-Editor
- React Router
- Vitest
- React Testing Library
Description: This is the landing page of Koding Kombat, where users can explore various features and navigate to different sections of the platform.
Description: In the Story Mode, users embark on an adventurous coding journey, facing coding challenges to progress through the interactive storyline.
Description: Experience the Fighting Mode, a competitive challenge where users combat an AI-controlled opponent by answering coding questions.
Description: Another view of the Fighting Mode, showing the intensity of the coding challenges and the interactive combat animations.
Description: View your profile page, showcasing your accumulated points, leaderboard position, and your avatar chosen during signup.
Description: Another perspective of the user profile, displaying additional details such as game history in the Fighting Mode.
Discover the joy of coding with Koding Kombat, where learning meets gaming! ⚔️🛡️👑🚀