1. Introduction
This document outlines the technical specifications and requirements for the initial development phase of IntelliLearn, a gamified Web3 educational platform. The goal of this phase is to build a Minimum Viable Product (MVP) that includes core user functionality and two initial games.
The technical stack for this phase is:
- Frontend: Next.js
- Backend as a Service (BaaS): Supabase (Auth, Database, Storage, Edge Functions)
- Blockchain Interaction: Ethers.js
2. System Architecture Overview
The system consists of three main components: a client-side application, a backend service, and an external blockchain.
- Frontend (Next.js): A server-rendered React application responsible for all UI/UX. It communicates with Supabase for data and authentication and directly with the user's browser wallet (e.g., MetaMask) for blockchain transactions.
- Backend (Supabase): Provides all backend services:
- Authentication: Manages user identity via OIDC social providers.
- Database (PostgreSQL): Stores all application data (profiles, game state, rewards).
- Storage: Hosts user-uploaded assets like profile pictures.
- Edge Functions (Deno): Used for secure, server-side operations like validating game results before issuing rewards to prevent cheating.
- Blockchain (Edu Chain): An EVM-compatible network hosting the $INTL ERC20 token and NFT (ERC721) smart contracts. The frontend will trigger transactions, which are signed by the user.
3. Functional Requirements (FR)
FR-1: User Management & Core Platform
| ID |
Requirement |
Acceptance Criteria (AC) |
| FR-1.1 |
OIDC-Based Onboarding |
1. The login page offer OIDC login. |
- Upon successful authentication, the user is redirected to the dashboard.
- A new user entry is created in the profiles table linked to their auth.users ID. |
| FR-1.2 | User Profile Management | 1. Users must be able to view their profile page.
- Users can upload/change a profile picture (to Supabase Storage).
- Users can set/update their display name.
- The profile page shall display the user's connected wallet address, $INTL balance, and login streak. |
| FR-1.3 | Login Streak Tracking | 1. The system must record the last_login_at timestamp for each user.
- On login, the system compares the current date with last_login_at. If it's the next consecutive day, the streak_count is incremented.
- If a user misses a day, the streak resets to 1 on their next login.
- The current streak count must be visibly displayed on the user's dashboard. |
| FR-1.4 | Wallet Connection | 1. The UI shall contain a "Connect Wallet" button.
- Clicking the button will prompt the user to connect via a browser wallet provider (e.g., MetaMask). 3. Once connected, the user's
public wallet address (e.g., 0x...) shall be stored in their profiles record. The address on the UI should be truncated for readability. |
FR-2: Archery Pro Game
| ID |
Requirement |
Acceptance Criteria (AC) |
| FR-2.1 |
Game Initialization |
1. The game UI must load a question and 4 multiple-choice answers fetched from the questions and answers tables. |
- A game session consists of 5 unique questions from a specific lesson module. |
| FR-2.2 | Gameplay Logic | 1. Each answer choice is visually associated with an enemy target on the screen.
2.The correct answer correspond to the correct target.
- If correct, the corresponding enemy target is identified as the "real" target.
- An aiming and shooting interface is activated .
- A successful hit on the correct target scores a point.
- Immediate feedback for the answer is given |
| FR-2.3 | Game Completion | 1. After 5 rounds, a summary screen displays the final score (e.g., "4/5 Correct").
- The game result (score, user_id) is sent to a secure Supabase Edge Function for validation.
- The Edge Function calculates the $INTL coin reward based on the score and updates the user's balance in the user_rewards table. |
FR-3: Snap Card Game
| ID |
Requirement |
Acceptance Criteria (AC) |
| FR-3.1 |
Card Data Entry |
1. The UI presents a form with predefined text fields (e.g., "Favorite NFT," "Favorite Chain"). 2. User input is saved to a snap_cards table, associated with their user ID. |
| FR-3.2 |
Image Generation |
1. Upon form submission, the frontend shall dynamically generate a .png image of the Snap Card. |
- This will be achieved client-side using a library like html-to-image to convert a styled HTML component into an image. The image is not stored in the backend to save storage space. |
| FR-3.3 | Social Sharing | 1. A "Share to Twitter" button must be present on the Snap Card result screen. 2. Clicking the button must open a new browser tab to the Twitter Web Intent URL (https://twitter.com/intent/tweet). 3. The tweet must be pre-populated with a standard text, the #IntelliLearn hashtag, a link to the platform, and the generated Snap Card image attached. |
FR-4: Web3 Rewards