Welcome to NEXUS
Relevant source files
The following files were used as context for generating this wiki page:
NEXUS is a comprehensive digital account and trial tracking system designed with a "cyberpunk-meets-luxury" aesthetic. It provides users with a centralized "Digital Command Center" to manage online credentials, monitor subscription costs, and track free trial periods to avoid unwanted charges. The system integrates a FastAPI backend with a React-based frontend, utilizing glassmorphism effects and particle animations to provide a high-end technical experience.
The platform's core scope includes advanced JWT-based authentication, CRUD (Create, Read, Update, Delete) operations for digital accounts and email addresses, and a dedicated tracking module for trial lifecycles. It also features a security overview to monitor account safety, such as 2FA status and password strength.
Sources: test_result.md:92-94, frontend/src/App.js:189-192, backend/server.py:27-31
System Architecture
NEXUS follows a decoupled full-stack architecture. The backend is built with FastAPI and MongoDB (via Motor for asynchronous operations), serving as a RESTful API. The frontend is a React Single Page Application (SPA) that communicates with the backend via Axios, using JWT tokens for secure session management.
Technical Stack
| Layer | Technologies |
|---|---|
| Backend | Python, FastAPI, MongoDB, Motor, Pydantic, Bcrypt, PyJWT |
| Frontend | React 19, Tailwind CSS, Lucide React, Axios, Radix UI |
| Styling | Glassmorphism, CSS Variables, Particle.js-style Canvas |
| Security | JWT (HS256), Bcrypt Hashing, HTTP Bearer Authentication |
Sources: backend/server.py:1-20, frontend/package.json:6-60, frontend/src/App.css:5-40
Authentication Flow
The system implements a secure JWT authentication flow. Users must register or login to receive an access_token, which is then stored in localStorage and sent in the Authorization header for subsequent requests to protected routes.
The diagram above illustrates the synchronous login request and the subsequent token handling within the React AuthProvider.
Sources: frontend/src/App.js:10-75, backend/server.py:186-215
Data Models
The NEXUS backend defines several Pydantic models to enforce data integrity across the system's core modules: Accounts, Emails, and Trials.
Account Management
Accounts represent the primary unit of storage, containing credentials and subscription details.
- Key Fields:
platform_name,username,password,subscription_type(Free, Trial, Paid), andmonthly_cost. - Status Tracking: Accounts are tracked via
AccountStatus(Active, Inactive, Deleted).
Email Management
A dedicated module to track which email addresses are used for various registrations.
- Key Fields:
email_address,provider,purpose(Personal, Work, Trials, etc.), andsecurity_status.
Trial Tracking
Specific logic for monitoring the duration and expiration of free trials.
- Key Fields:
start_date,end_date,trial_length_days, andis_cancelledflag.
This ER diagram shows the relationship between users and their managed entities, emphasizing user isolation.
Sources: backend/server.py:84-173, test_result.md:104-135
Backend API Endpoints
The backend exposes a structured API under the /api prefix, managed through a FastAPI api_router.
| Category | Endpoint | Method | Description |
|---|---|---|---|
| Auth | /register | POST | Creates new user and returns JWT |
| Auth | /login | POST | Validates credentials and returns JWT |
| Auth | /me | GET | Returns current authenticated user data |
| Accounts | /accounts | GET/POST | List or create account entries |
| Accounts | /accounts/{id} | GET/PUT/DELETE | Manage specific account details |
| Emails | /emails | GET/POST | List or create email entries |
| Trials | /trials | GET/POST | List or create trial tracking entries |
| Stats | /dashboard/stats | GET | Aggregated totals for the Command Center |
Sources: backend/server.py:183-360, backend_test.py:48-250
Visual Identity & UI Components
The NEXUS interface is characterized by its "Cyberpunk" styling, defined in App.css.
UI Design Principles
- Glassmorphism: Accomplished through
backdrop-filter: blur(20px)and semi-transparent backgrounds (rgba(255, 255, 255, 0.05)). - Gradients: A primary electric-blue to vibrant-purple gradient (
#00D4FFto#9D4EDD) is used for active elements and titles. - Animations:
ParticleBackground: A custom React component using the HTML5 Canvas API to render floating nodes.pulse: An infinite opacity animation for the NEXUS logo.breathe: A scaling animation for dashboard statistics cards.
Sources: frontend/src/App.css:45-120, frontend/src/App.js:90-130
Interface Layout
The application layout is split into a fixed sidebar and a dynamic main content area.
The flow diagram represents the React component hierarchy and the routing logic for the NEXUS dashboard.
Sources: frontend/src/App.js:520-565, frontend/src/App.css:320-380
Conclusion
NEXUS serves as a centralized hub for digital identity and subscription management. By combining a robust FastAPI backend with a highly stylized React frontend, it offers a secure and visually engaging way to manage the complexities of modern digital life. The system ensures user isolation through JWT-based ownership of all accounts, emails, and trials, while the Command Center provides immediate financial and security insights.