Hosting on GitHub Pages
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Solo System project is designed as a client-side web application, specifically structured for seamless hosting on GitHub Pages. It functions as a "Solo Leveling" inspired penalty and quest tracking system, utilizing standard web technologies (HTML5, CSS3, and JavaScript) to provide a persistent user experience without the need for a dedicated backend server.
By leveraging GitHub Pages, the application is served as a static site where all logic—including task generation, rank calculation, and data persistence—is executed within the user's browser. This approach ensures high availability and zero-cost hosting for the system's Gamified Task Management interface.
Sources: README.md:1, index.html:1-10, Quest.html:1-10
Architecture and Static Hosting
The project follows a "Single Page Application" (SPA) or multi-page static site architecture where state is maintained locally. Because GitHub Pages does not support server-side databases, the system utilizes the browser's localStorage API to store progress, points, and quest history.
Component Structure
The application consists of two primary entry points that can be served via GitHub Pages:
- index.html: The main landing page and dashboard for the system status.
- Quest.html: A dedicated module for the Penalty System and daily task management.
The following flowchart illustrates the data flow when the application is hosted and accessed by a user:
This diagram shows how the GitHub Pages server acts as a delivery mechanism, while all stateful operations occur locally.
Sources: index.html:84-86, Quest.html:84-86
Data Persistence and Synchronization
Since GitHub Pages hosts static content, the systemData object is the core data structure used to maintain state across sessions. This object is serialized into a JSON string and stored in the user's local browser storage.
Data Model
The system tracks several key metrics to determine the user's progress and apply penalties.
| Field | Type | Description |
|---|---|---|
points | Number | The total XP accumulated by the user. |
lastUpdate | String | The last date (KSA timezone) the daily cycle was checked. |
dailyTasks | Array | A collection of task objects for the current day. |
lastPenalty | Number | The amount of XP deducted during the last cycle failure. |
Sources: Quest.html:98-100, index.html:98-100
Logic and Lifecycle Management
The application implements a "Daily Cycle" check that triggers every time the page is loaded from the hosted URL. This logic handles the transition between calendar days, specifically aligned with the Asia/Riyadh timezone.
Lifecycle Sequence
When a user visits the hosted site, the following sequence occurs:
This sequence ensures that even if the host is static, the application logic behaves dynamically based on the passage of time.
Sources: Quest.html:142-165, index.html:142-165
Configuration and Ranks
The hosting environment supports a tiered ranking system defined in the source code. As the points value stored in the browser changes, the UI updates the user's Rank and required XP for the next level.
Rank Configuration Table
| Rank | XP Threshold | Reward | Penalty | Requirement |
|---|---|---|---|---|
| R | 3000+ | +6 | -8 | 50 |
| S | 1200+ | +4 | -6 | 30 |
| A | 800+ | +4 | -6 | 25 |
| B/C/D | 150-500 | +3 | -5 | 12-20 |
| F | 0 | +2 | -3 | 10 |
Sources: Quest.html:102-111, index.html:102-111
Conclusion
Hosting the Solo System on GitHub Pages provides a lightweight, serverless solution for personal task gamification. By utilizing localStorage for persistence and local JavaScript for time-zone-aware logic, the project maintains complex state and "Daily Cycle" mechanics entirely on the client side, ensuring that user progress is preserved across browser sessions without the need for an external database.