Frontend Capture the Flag Project

Welcome to the Frontend Capture the Flag Project!

Recently it has come to my attention that Frontend Capture the flag exists, and I thought it would be a really good way to help students understanding how important basic knowledge and foundations can be.

This project is based on a real capture the flag challenge seen in a job application, so hopefully practicing on this challenge can really help you in a future opportunity. 😄

Internationalization

If needed, here are the list of other languages supported on this documentation so far (few free to submit a PR with other languages)

• PT-BR: Brazilian Portuguese

Project Description

In this Capture the Flag (CTF) challenge, you'll need to complete various tasks to capture a flag and present it in a boilerplate React application.

Getting Started

Prerequisites

• Basic knowledge of HTML, CSS, and JavaScript
• Basic knowledge of ReactJS

Instructions

1. PLEASE DON'T LOOK AT THE PROJECT FILES. Inside the /blackbox folder are the information that you shouldn't have on a real challenge, so looking at them can ruin your experience on this casual challenge :P (remember, on a real capture the flag you wouldn't have access to the servers where they run the challenge)

2. All the information needed will be given on the challenge as you proceed, once you're ready with the configuration, just run npm run challenge:start or yarn challenge:start and good luck!

Configuration (how to start)

1. Install dependencies: Make sure you have NodeJS and NPM installed, then run either npm i or yarn on the root project

2. Check environment variables: Make sure you have the correct variables on the .env file (the default should fit most usages)

3. Start the challenge: To start, run npm run challenge:start or yarn challenge:start

4. Good luck and have fun! 😄

Hosting

If you want to host the challenge for a workshop, presentation or anything on that nature, use the .env.

• SERVER_PORT should be where you're running the project locally (say, http://localhost:4000)
• SERVER_URL is where you place the final URL generated by any tunnel service, like cloudflare, ngrok, or any of that nature. Here's an example on cloudflare: cloudflared tunnel --url http://localhost:4000

Contributing

We welcome contributions! Please fork the repository and create a pull request with your changes.

License

This project is licensed under the MIT License.

Contact

For any questions or feedback, please open an issue on GitHub.

---

Thank you for participating in our Frontend Capture the Flag challenge! Good luck and have fun!