How satishedu3/hackterminal works
HackTerminal is a themed browser-based hacking-terminal experience with mission content and a leaderboard. Visitors enter through the React app, explore the terminal and missions, and can view or submit leaderboard scores. The terminal’s commands are simulated client-side; the leaderboard uses React Query hooks and a generated canister actor interface. The README is minimal, so the mission implementation and backend details are only represented where supported by the tree or sampled code.
Main entry points: App.tsx App shell · useQueries.ts Leaderboard queries · useActor.ts Actor lifecycle · main.tsx Application entry
Components 12
User experience
- App shell
src/frontend/src/App.tsx - Simulated terminal
src/frontend/src/components/Terminal.tsx - Mission content
src/frontend/src/components/MissionsSection.tsx
Leaderboard
- Leaderboard UI
src/frontend/src/components/LeaderboardSection.tsx - Leaderboard queries
src/frontend/src/hooks/useQueries.ts
Identity and backend
- Actor lifecycle
src/frontend/src/hooks/useActor.ts - Internet Identity
src/frontend/src/hooks/useInternetIdentity.ts - Actor configuration
src/frontend/src/config.ts - Canister bindings
src/frontend/src/backend.ts - Backend canister
- Application entry
src/frontend/src/main.tsx
Other components
- Visitor
Connections 12
- Visitor → Application entry: opens app
- Application entry → Internet Identity: provides identity
- Application entry → App shell: renders
- App shell → Simulated terminal: renders
- App shell → Mission content: renders
- App shell → Leaderboard UI: renders
- Leaderboard UI → Leaderboard queries: requests and submits
- Leaderboard queries → Actor lifecycle: gets actor
- Actor lifecycle → Internet Identity: reads identity
- Actor lifecycle → Actor configuration: creates actor
- Actor configuration → Canister bindings: uses interface
- Leaderboard queries → Backend canister: calls leaderboard methods