Capture the flag

Project overview

Introduction

This project is a capture the flag game. The goal is to complete as many challenges as possible. Each challenge has a flag that you need to find. Once you find the flag, you can submit it to the server and get points. The more points you have, the higher you are on the leaderboard.

Goals

My personal goal of this project is to learn about new tech stack. If this project works out, I wanted to submit it to my universites GDSC club and try to get it hosted on the university servers.

Technologies used

Frontend

• Angular
• TypeScript
• CSS
• HTML

Backend

• NestJS
• Prisma
• MySQL
• TypeScript

Features

Authentication

Authentication is done using JWT. The user can register and login. The user can also reset his password if he forgets it. Used bcrypt to hash the passwords while storing them in the database. Used HS256 algorithm to sign and verify the tokens.

• Used AuthGuard to protect the routes that require authentication.
• Nodemailer is used to send emails to the user when he requests a password reset, or when he registers.

Challenges

Challanges are made to cover different interestin topics like,

• Linux terminal commands
• Cryptography(classical and modern ciphers)
• Web Exploitation
• Forensics
• Steganography (steghide)
• Reverse Engineering
• Binary Exploitation
• Programming

There was also a secret hidden challenge that was not listed and is a total different pathway instead of a standalone challenge.

Development process

Frontend

When I started building the frontend of my project, I began with basic parts like the sign-up and registration forms. Gradually, I added more elements such as the menu bar, footer, login page, password reset option, challenges, leaderboard, and user profile.

What I really like about Angular is how easy it is to create these components. I use simple HTML and TypeScript to control how they work, and I can make them look nice using CSS. The two-way data binding feature in Angular is also really helpful because it keeps everything in sync.

As I make more components, I update the router so they become active and work properly. I also focus on making them responsive, so they look good on different devices and screen sizes.

Backend

I started with initilazing MySQL database then connecting it to the backend. I used Prisma to generate the models and the CRUD operations. I also used Prisma to generate the migrations and update the database schema.

Then i first configured the routes i need. then i started working on the controllers and the services. I used bcrypt to hash the passwords and jwt to sign and verify the tokens.

I also used nodemailer to send emails to the user when he requests a password reset, or when he registers. Once i completed the authentication part, i moved on to protect the routes that require authentication using AuthGuard. then to prevent brute force attacks i used rate limiting. Once everything was done, I integrated the frontend with the backend and tested the application.