Codewars 2025 Final Round DevStack

Frontend

React Vite TaiwindCSS React3Fiber Drei

• Vite + React The project is built using Vite as the build tool and React for the user interface. Vite provides fast development startup, hot module replacement, and optimized production builds, while React enables a component-based and scalable frontend architecture.
• Tailwind CSS
  Tailwind CSS is used for styling the application. It is a utility-first CSS framework that allows rapid UI development, ensures design consistency, and provides responsive layouts across different screen sizes. React Three Fiber
• React3Fiber Used for rendering 3D graphics in the application. It is a React renderer for Three.js that enables building and managing 3D scenes declaratively using React components, simplifies complex WebGL logic, and integrates seamlessly with the React ecosystem for better performance and maintainability.
• Drei Drei is used as a helper library for React Three Fiber. It provides a collection of ready-made, reusable abstractions (such as controls, loaders, lights, and helpers) that reduce boilerplate, speed up 3D development, and simplify common Three.js tasks while maintaining clean and readable code.

Backend

Postgress Node Crypto

• PostgreSQL PostgreSQL is used as the application’s database. It is a powerful, open-source relational database system that ensures reliable data storage, supports complex queries and relationships, and provides high performance, scalability, and data integrity for backend operations.
• Node.js Crypto Node.js Crypto is used for cryptographic operations in the application. It provides built-in utilities for secure hashing, encryption, and decryption, enabling safe handling of sensitive data such as passwords, tokens, and keys while ensuring strong security standards on the backend.

Start up

Requirments:

• Node.js
• Postgres

1. Install dependencies

npm i

2. In the frontend folder:

npm run dev

3. In the backend folder:

npm run run

Project description

App.tsx

App.tsx is the main routing component of the React application.  
It uses React Router to define navigation paths for the entire application,  
including routes for a welcome page, main panel, five mission panels (mission1-mission5),  
a navigation page and logs viewer.  
Each route maps to its corresponding component and supports dynamic routing with parameters  
(e.g., `/main/:id`).  

MainPanel.tsx

MainPanel.tsx is the primary interface component that renders the command center dashboard.  
It uses React Three Fiber to display a 3D starfield background with an animated spaceship model.  
The component manages mission status states (missions 1-5) and dynamically navigates to mission pages based on URL parameters.  
It features a draggable window system with three main sections: a mission status tracker, a 3D ship viewer, and a terminal debug interface.  
The layout uses Tailwind CSS for styling with a dark cyberpunk aesthetic, including cyan and green accent colors, glassmorphic panels, and real-time system status indicators.   MainPanel.tsx is the primary interface component that renders the command center dashboard. It uses React Three Fiber to display a 3D starfield background with an animated spaceship model. The component manages mission status states (missions 1-5) and dynamically navigates to mission pages based on URL parameters. It features a draggable window system with three main sections: a mission status tracker, a 3D ship viewer, and a terminal debug interface. The layout uses Tailwind CSS for styling with a dark cyberpunk aesthetic, including cyan and green accent colors, glassmorphic panels, and real-time system status indicators.

WelcomePage.tsx

WelcomePage.tsx is the entry point component that displays an immersive 3D welcome screen with a spaceship model.  
It features a custom loading screen that displays initialization progress, a rotating camera that orbits around the spaceship, and an authentication form for team login.  
The component manages zoom animations triggered by user interaction with the spaceship, handles session establishment via API calls to store credentials, and navigates to the main panel upon successful authentication.  
It uses React Three Fiber for 3D rendering, Drei utilities for effects like floating and stars, and Tailwind CSS for the futuristic UI styling with glassmorphic panels and cyberpunk aesthetics.  

Missions 1-5

The main way of starting the different levels. is by running their coresponding .exe from the terminal. For more information the terminal has /help function, /clear for clearing and autocomplete by pressing tab.

1. Mission 1 is solved using a reverse cesar cipher
2. Mission 2 is solved using bit arithmetic
3. Mission 3 and 5 are solved using node:crypto
4. Mission 4 is solved using weight object

Window

The Window component is a reusable React component that renders a draggable, resizable terminal-style window with a retro console aesthetic. It supports customizable titles, accent colors (cyan, amber, red, green, purple), and features like drag-to-move, close buttons, and min/max sizing constraints. The component includes animations for opening/closing, scan-line overlays, and a Windows 98-inspired beveled border design with themed glow effects.

Terminal

The Terminal component is a React functional component that simulates a command-line interface. It maintains a history of terminal lines, allowing users to input commands and receive outputs. The component supports command autocompletion and handles various commands such as /help, /clear, and specific mission executions. It utilizes hooks like useState for managing input and history, and useEffect for auto-scrolling and suggestion handling. The terminal's UI is styled using CSS to create a visually appealing and interactive experience, with different text colors for input, output, errors, and informational messages. The component also includes a focus mechanism for the input field and handles keyboard events for command execution and suggestion insertion.