Hack The Future — Engineering

CURRENT STAGE

A serious system, at an early stage.

Hack The Future has been built as a complete technology ecosystem from the ground up. The current focus is on building the product, validating the experience and bringing the ecosystem to students.

01

Product

AI-powered career and skill-development ecosystem.

02

Stage

Early-stage and recently started.

03

Revenue

Current revenue generated: ₹0.

04

Development

Approximately ₹2.50 lakh invested in development.

BACKEND ENGINEERING

What happens behind every click.

Hack The Future does not treat the browser as a trusted environment. Client interfaces request operations, while authentication, validation, authorization and sensitive database mutations happen through the server architecture.

01

UI

User action

A student clicks a button, submits a form, completes a challenge or requests AI assistance.


                onSubmit()

→

02

R

React

The React component collects the required values and invokes the corresponding server function.


                function()

→

03

SV

Server Function

The operation enters a server-only createServerFn function.


                createServerFn()

→

04

Z

Validation

Input is validated before the server performs any trusted operation.


                Zod.parse()

→

05

AUTH

Authentication

Protected requests carry the authenticated user's bearer token.


                user.id

→

06

RLS

Authorization

PostgreSQL Row Level Security determines which records the authenticated user can access.


                policy()

→

07

DB

PostgreSQL

The database performs the permitted operation and returns the result to the server.


                SELECT / INSERT / UPDATE

RESPONSE PATH PostgreSQL → Server → React → User

The server returns only the data required by the application. Sensitive credentials and protected database information never become part of the browser bundle.

BACKEND LOGIC

Six boundaries. One trusted system.

01 · REQUEST

The client asks.

The browser never decides what it is allowed to modify. It only requests an operation through the application layer.

02 · VALIDATE

The server checks.

Server functions validate incoming parameters before they reach business logic or the database.

03 · IDENTIFY

The user is known.

Authentication middleware attaches the authenticated identity to protected operations.

04 · AUTHORIZE

RLS decides.

PostgreSQL policies determine whether that particular user can read or modify the requested record.

05 · EXECUTE

Trusted logic runs.

Rewards, grades, achievements, wallet operations and coupon redemption use server-authoritative operations.

06 · RESPOND

Only the result returns.

The browser receives the application result instead of receiving database credentials, AI provider secrets or other private infrastructure information.

AI QUESTION GENERATION ENGINE

How Hack The Future creates coding problems.

The question system is designed around a shared problem bank. Questions can be generated on demand for practice, while the hardest-tier daily and weekly challenges can be regenerated automatically by the backend.

QUESTION GENERATION PIPELINE PROMPT → GENERATE → VALIDATE → STORE → SERVE

AI ENGINE

01

User configuration

The learner selects the desired topic, difficulty and problem style.

topic
difficulty
language
constraints

→

02

Server request

The browser calls a protected server-side generation function.

createServerFn
+ validation

→

03

Prompt builder

The backend converts the request into a structured generation instruction.

schema
difficulty
constraints

→

04

AI model

The server-side AI gateway sends the generation request to the configured model.

GPT
server-only

→

05

Question object

The generated result is converted into the platform's expected problem structure.

title
statement
constraints
examples

→

06

Problem bank

The generated problem is stored in the shared question repository.

PostgreSQL
problem bank

QUESTION QUALITY PIPELINE

Structure Required fields exist

Difficulty Requested level preserved

Testability Problem can be evaluated

Storage Saved to shared bank

PRACTICE ENGINE LEETCODE / HACKERRANK-STYLE WORKFLOW

CODE LAB

01 Problem

Student opens a generated or curated challenge.

02 Editor

Code is written directly inside the browser.

03 Execute

The submitted solution is executed against the configured evaluation process.

04 Test

Test cases determine whether the solution produces the expected output.

05 Result

The learner receives the execution result and can iterate on the solution.

AUTOMATED CHALLENGES

The weekly challenge runs without a manual button.

A scheduled backend process can regenerate the hardest-tier challenge on a weekly cycle. The scheduled process calls a signed public endpoint, which triggers the protected generation workflow.

01 pg_cron Scheduled trigger

→

02 Signed endpoint Request verification

→

03 AI generation Hardest tier

→

04 Problem bank New challenge

→

05 Students Live challenge

SERVER

COMPLETION INTEGRITY

The client cannot simply award itself points.

Challenge completion is recorded through trusted server routines. This means the browser can report an attempted completion, but valuable reward state is controlled by backend logic rather than arbitrary client-side values.

AUTHENTICATION ENGINE

How the Email OTP system works.

OTP authentication is deliberately server-controlled. The browser requests an OTP, but the valid OTP itself is never exposed to the browser. Generation, hashing, storage and verification happen on the trusted side.

01

@

Enter email

The student enters an email address and requests a one-time login code.


                email@example.com

→

02

SV

Server receives request

The request enters the authentication backend. The browser does not generate the trusted OTP.


                createServerFn()

→

03

#

Generate OTP

A one-time verification value is generated on the server.


                RANDOM OTP

→

04

H

Hash

The server stores a hash rather than exposing the valid OTP to the client.


                OTP → HASH

→

05

✉

Gmail API

The email is delivered through the authorised Gmail infrastructure and the platform's email template.


                GMAIL API

SECOND PHASE OTP VERIFICATION

06 User enters OTP The value received in email.

→

07 Server hashes input The submitted value is processed server-side.

→

08 Compare Submitted hash vs stored hash.

→

09 Valid Continue authentication.

VALID OTP Authentication continues

The authenticated session becomes available to the application and the user's profile can be created or loaded.

INVALID OTP Authentication stops

The server rejects the verification attempt rather than allowing the client to decide whether the OTP is valid.

PRIVATE

SECURITY BOUNDARY

The browser never receives the valid OTP.

AI credentials, Gmail credentials, webhook secrets and other private infrastructure values are also read inside server handlers and never exposed to the browser bundle.

DATA ARCHITECTURE

The database is not just storage.

AUTHENTICATED USER user.id

↓

PROFILE education skills experience roles

PROBLEMS questions constraints difficulty tests

PROGRESS attempts completion streaks XP

COURSES lessons enrollment quizzes attendance

USER ROLES admin HR manager scoped access

OTP hashed value verification auth state

↓

DATABASE SECURITY LAYER ROW LEVEL SECURITY

Every protected operation is evaluated against the authenticated user's permissions and the database policies.

END-TO-END DATA FLOW

What happens after a user clicks?

The interface is only the beginning. A typical protected operation moves through the application layer, server functions, validation, authentication and database security before the response reaches the user again.

REQUEST / RESPONSE PIPELINE

● LIVE ARCHITECTURE

01 · CLIENT User Mobile / Desktop

02 · UI React React 19 + TypeScript

03 · APP TanStack Routing + SSR

04 · SERVER Function createServerFn

05 · TRUST Validation Zod + Auth

06 · DATA RLS Row Level Security

07 · STORAGE PostgreSQL Trusted data layer

AI BRANCH

AI Gateway

Server-side AI handles tutoring, career analysis, resume processing, roadmaps and coaching.

COMPUTE BRANCH

Pyodide Worker

Python executes inside a browser Web Worker without blocking the main interface.

MEDIA BRANCH

YouTube IFrame

Lessons and Sparks use controlled video playback through the YouTube IFrame API.

EDGE BRANCH

Cloudflare Workers

Server-side execution and rendering can happen close to the user at the edge.

THE TECHNOLOGY STACK

Every layer has a job.

The architecture combines a modern React application, edge execution, a relational data layer, server-side AI, browser computation and progressive-web-app capabilities.

FRAMEWORK TanStack Start v1 File-based routing, SSR and server functions.

FRONTEND React 19 + TypeScript Typed component architecture and application UI.

STYLING Tailwind CSS v4 Design tokens, responsive styling and visual system.

UI PRIMITIVES shadcn/ui Accessible reusable interface primitives.

MOTION Framer Motion Transitions, reveals and interaction feedback.

BUILD Vite 7 Development, HMR and production bundling.

EDGE Cloudflare Workers Edge execution for server-side workloads.

DATABASE PostgreSQL Relational storage and protected application data.

SCHEDULING pg_cron Scheduled regeneration of recurring AI challenges.

AI GPT via Server Gateway AI tutoring, coaching, analysis and generation.

PYTHON Pyodide + Web Worker Client-side Python computation and notebooks.

OFFLINE Workbox + PWA Caching, service workers and installable experience.

VIDEO YouTube IFrame API Lessons and Sparks playback experience.

PRODUCT MODULES

The platform is not one feature.

Each major module solves a different part of the learner's journey while sharing the same underlying authentication, data, AI and application infrastructure.

01

Career Orbit

The career layer combines profile data, resume analysis, company matching, role-based roadmaps and AI coaching to help users understand possible career directions.

PROFILE · RESUME · AI · ROADMAP

02

Code Lab

A coding practice environment containing curated problems, browser-based editing, test execution and locally cached practice content.

PROBLEMS · CODE · TESTS · CACHE

03

AI Notebook

A Jupyter-style browser notebook where Python code executes through Pyodide inside a Web Worker. Scientific libraries can be used without blocking the main interface.

PYTHON · PYODIDE · WEB WORKER

04

Learning Management

Course catalog, video lessons, quizzes, progress tracking, analytics, calendar and attendance work together as the learning layer.

LMS · VIDEO · QUIZ · PROGRESS

05

Sparks

A vertical short-video experience for bite-sized learning and discovery, powered by YouTube playback and local state.

VIDEO · FEED · CACHE · ENGAGEMENT

06

Internships

Users can submit application information, skills, target roles and resumes. AI can assist with extracting relevant information from uploaded resumes.

APPLICATION · RESUME · AI

07

Challenges

Daily and weekly challenges create a structured mechanism for continuous practice and progress.

DAILY · WEEKLY · AI · PROGRESS

08

Gamification

XP, Sparks, streaks, levels, achievements and leaderboards create a visible progression system around learning activity.

XP · STREAKS · LEVELS · REWARDS

09

Mentorship

Mentorship pathways connect the learning ecosystem with guidance and career development.

MENTORSHIP · CAREER · GUIDANCE

AI ARCHITECTURE

AI is a layer inside the product.

AI is not treated as the entire product. It is integrated where reasoning, personalization, analysis or generation can improve the learner's workflow.

01 · INPUT User Context Question / Resume / Goal

→

02 · SERVER AI Gateway Protected server execution

→

03 · MODEL GPT Generation / reasoning

→

04 · RESPONSE Structured Result Application-controlled output

→

05 · EXPERIENCE User Action Learn / Practice / Plan

COMPUTE PIPELINE

How the AI Notebook works.

01

Write Python

The learner writes code inside a notebook cell.

02

Web Worker

Execution moves away from the main UI thread.

03

Pyodide

Python executes directly in the browser runtime.

04

Libraries

Scientific packages can be loaded for analysis.

05

Output

Text, tables and visualizations return to the notebook.

06

Persist

Notebook state can remain available locally.

SECURITY ARCHITECTURE

Trust is enforced server-side.

Sensitive operations are deliberately kept away from the client. Validation, authentication and database policies form the trust boundary.

Protected operations

✓ Rewards processed through trusted server routines.

✓ Wallet operations remain server controlled.

✓ Quiz grading happens server-side.

✓ Coupon redemption is protected.

Protected data

✓ Row Level Security controls database access.

✓ Roles remain protected from client manipulation.

✓ Sensitive columns can be restricted through views.

✓ Private credentials remain server-side.

OFFLINE-FIRST ENGINEERING

Built for the real internet.

₹8K+

The accessibility constraint.

The architecture is designed around the principle that the complete experience should remain usable on an affordable Android phone, including when internet connectivity becomes unreliable.

Service Worker Caches the application shell and important assets.

Local Storage Stores local learner state and selected progress.

Cached Problems Allows coding practice to continue with weak connectivity.

Offline Arcade Games can remain functional without a live connection.

Sparks Cache Recent feed state can remain available locally.

Installable PWA The platform can behave like an installed application.

DEVELOPMENT INVESTMENT

Built before revenue.

Hack The Future is currently at an early stage. The focus has been on building the underlying product and technology rather than presenting artificial traction or revenue numbers.

TOTAL DEVELOPMENT INVESTMENT ₹2.50L

01 · ENGINEERING ₹1.00L

Full-stack development

Application architecture, frontend, server functions, database integration, product modules and system integration.

ALLOCATION 40%

02 · AI + COMPUTE ₹50K

AI and intelligent features

AI integration, notebook architecture, server-side AI workflows and intelligent product experiences.

ALLOCATION 20%

03 · INFRASTRUCTURE ₹40K

Infrastructure & deployment

Hosting, database infrastructure, edge runtime, deployment and supporting production services.

ALLOCATION 16%

04 · PRODUCT DESIGN ₹30K

UI / UX & product experience

Interface architecture, responsive experience, interaction design and product-level visual systems.

ALLOCATION 12%

05 · TESTING ₹20K

Testing & refinement

Device testing, performance refinement, debugging and iterative product improvements.

ALLOCATION 8%

06 · LAUNCH ₹10K

Launch preparation

Initial operational setup, deployment preparation and launch-related technical work.

ALLOCATION 4%

CURRENT REVENUE

₹0

Pre-revenue by design.

The project has just started and currently reports ₹0 in revenue. The ₹2.50 lakh figure represents development investment, not money earned. The objective at this stage is product development, validation and establishing the foundation for future monetization.

FOUNDER · DEVELOPER · BUILDER

THE BUILDER

Vansh Raj
Singh.

FOUNDER & CEO · HACK THE FUTURE

I am Vansh Raj Singh, professionally known as Vansh Rajput, an Indian GenAI Developer, technology entrepreneur, content creator and digital educator.

I completed my Bachelor of Computer Applications (BCA) from Integral University, Lucknow, and I am currently pursuing a Master of Computer Applications (MCA) in Artificial Intelligence & Machine Learning with SAS at Chandigarh University, Uttar Pradesh.

I am the Founder & CEO of Hack The Future, a gamified skill development, internship and career ecosystem dedicated to helping students across India learn in-demand skills, gain practical experience and transform their knowledge into real income opportunities.

My work focuses on generative AI, full-stack development, educational technology and building innovative digital products that make learning more practical, accessible and impactful for the next generation.

GenAI PRIMARY FOCUS

Full Stack PRODUCT ENGINEERING

EdTech PRODUCT VISION