KS|Shop: My Personal Gaming Top-Up Project

Documenting how I built a platform for gamers—just as a personal project.

Why I Built KS|Shop

As someone who plays games like Mobile Legends, Genshin Impact, and Valorant, I noticed topping up in-game currency could be slow and confusing. I wanted to experiment with building a platform that could make the process smoother—not for commercial purposes, just to challenge myself.

KS|Shop became a playground to explore full-stack development, real-time updates, and secure payment integration, all in one project.

My Approach

I focused on building a platform that works, looks clean, and is secure—without worrying about competing with existing services.

Frontend

• React 18 + TypeScript for a robust framework
• Tailwind CSS for fast styling
• Framer Motion for smooth animations
• React Router & Context API for state and navigation

Backend

• Node.js + Express.js for server logic
• MongoDB with Mongoose for data
• JWT for authentication
• PayMongo API for safe testing of payments
• Socket.io for real-time updates

Features I Experimented With

Game Catalog

I built a simple catalog with:

• Server selection
• Flexible denominations
• Live inventory updates
• Images and descriptions

Supported games are Mobile Legends, Genshin Impact, Valorant, and a few others—just for practice.

User Authentication

I explored:

• JWT-based authentication
• Role-based access (user/admin)
• Email verification
• Bcrypt password hashing

It was a good way to practice security concepts.

Checkout Flow

The purchase flow I implemented was basic but functional:

1. Choose game & server
2. Select denomination
3. Choose a payment method
4. Confirm order
5. Mock top-up completion

Payments

I integrated multiple payment methods in a sandbox environment, focusing on secure handling rather than real transactions.

Admin Dashboard & Blog

I experimented with an admin panel to manage orders and game data, and a blog system to post updates and guides. Features included:

• CRUD operations for posts
• Rich text formatting
• Image and video embedding
• Code block support for tutorials

This helped me practice content management and learn full-stack integration.

Lessons Learned

• How to structure a full-stack project
• Basics of real-time updates
• Implementing secure authentication
• Handling mock payments and cart flow
• Organizing a personal project end-to-end

Conclusion

KS|Shop is a personal project and a sandbox for learning. I didn’t build it to compete in the market—it exists solely to test ideas, learn new skills, and document my development journey.

I’m proud of the experience, and it will help me in future projects.