Technology Stack
Relevant source files
The following files were used as context for generating this wiki page:
NEXUS is a full-stack digital account and trial tracking system built with a modern web architecture. The project follows a decoupled client-server model, utilizing a React-based frontend and a Python-based RESTful API backend. The system is designed with a "cyberpunk-meets-luxury" aesthetic, emphasizing glassmorphism, fluid animations, and high-performance data management.
The technology stack is organized to support secure JWT-based authentication, real-time statistics calculation for the dashboard, and comprehensive CRUD (Create, Read, Update, Delete) operations for managing platform accounts, email addresses, and subscription trials.
Sources: test_result.md:126-128, frontend/src/App.js:7-8
Frontend Architecture
The frontend is a Single Page Application (SPA) bootstrapped with Create React App and managed via the CRACO (Create React App Configuration Override) tool for advanced configuration. It leverages a component-based architecture with centralized state management for authentication and routing.
Core Framework and UI Library
- React 19: The core library used for building user interfaces. Sources: frontend/package.json:59-61
- Tailwind CSS: A utility-first CSS framework used for styling, integrated with
tailwindcss-animatefor motion effects. Sources: frontend/package.json:84, frontend/tailwind.config.js:1-5 - Radix UI: A collection of unstyled, accessible UI primitives (Accordion, Dialog, Tabs, etc.) used as the foundation for complex components. Sources: frontend/package.json:5-33
- Lucide React: The primary icon library used throughout the dashboard and navigation. Sources: frontend/package.json:54
Visual System
The "cyberpunk" aesthetic is implemented through a combination of CSS variables, backdrop filters for glassmorphism, and custom animations.
- Glassmorphism: Achieved using
backdrop-filter: blur(20px)and semi-transparent background colors. Sources: frontend/src/App.css:91-95 - Particle Animations: A custom HTML5 Canvas-based particle system provides a dynamic background. Sources: frontend/src/App.js:101-140
- Theming: Custom color palettes including
electric-blue (#00D4FF),vibrant-purple (#9D4EDD), andhot-pink (#FF10F0). Sources: frontend/src/App.css:10-14
Data Flow and State Management
The frontend communicates with the backend via Axios. Authentication state is managed through a React Context provider (AuthProvider), which handles JWT storage in localStorage and injects the token into API request headers.
The diagram shows the flow of authentication data and API requests from the React client to the server.
Sources: frontend/src/App.js:15-80
Backend Architecture
The backend is a RESTful API service (implied to be Flask or FastAPI based on the testing suite structure) that provides endpoints for identity management and resource CRUD operations.
API Specifications
The backend utilizes JSON for data exchange and follows a standard REST architecture.
| Feature | Implementation Detail | Source |
|---|---|---|
| Authentication | JWT (JSON Web Tokens) with Bcrypt hashing | test_result.md:135 |
| Protocol | HTTPS/JSON | backend_test.py:20 |
| Authorization | Bearer Token in Request Headers | backend_test.py:65-66 |
Data Models
Based on the API testing suite and frontend forms, the system manages three primary data entities:
- Account: Platform details, credentials, and subscription costs.
- Email: Provider info, purpose (Personal/Trial), and security status.
- Trial: Start/end dates, platform, and cancellation status.
Sources: backend_test.py:121-128, backend_test.py:183-193, backend_test.py:255-264
Development and Tooling
The project uses a structured development environment with specific tooling for styling, linting, and testing.
Package Management and Scripts
The frontend uses yarn for dependency management.
| Script | Command | Description |
|---|---|---|
start | craco start | Launches the development server |
build | craco build | Compiles the production bundle |
test | craco test | Runs the test suite |
| Sources: frontend/package.json:69-72 |
Testing Infrastructure
A Python-based testing suite (NEXUSAPITester) is used to validate the backend's integrity. It performs automated sequences of registration, login, protected route access, and full CRUD cycles for all modules.
Sources: backend_test.py:26-33
This diagram illustrates the automated testing flow for authentication and resource isolation.
Sources: backend_test.py:75-119
Infrastructure & Configuration
- Routing: Handled by
react-router-domfor client-side navigation. Sources: frontend/package.json:63 - Validation:
zodandreact-hook-formare used for schema validation and form state management. Sources: frontend/package.json:62, frontend/package.json:66 - PostCSS: Used with
autoprefixerto ensure cross-browser CSS compatibility. Sources: frontend/postcss.config.js:1-6 - Tailwind Aliases: Custom paths defined in
components.jsonfor organized imports (e.g.,@/components,@/lib). Sources: frontend/components.json:13-19
NEXUS integrates high-end visual design with a robust security architecture, utilizing a modern JavaScript/Python stack to provide a high-performance account management experience.
Sources: test_result.md:310-315