System Requirements Document (SRD)

Project Name: Feral-Project

1. Introduction

The Feral-Project is a modern, aesthetic, and empowering self-help website designed to complement the user’s mobile app, Thrive. It aims to provide users with tools, resources, and interactive features to support personal growth, mental wellness, and self-improvement. Inspired by the calming and powerful visual reference image, the website will embody a “girly but powerful” aesthetic, blending soft ombré gradients, elegant typography, and interactive design elements.

2. System Overview

The website will serve as a hub for self-help resources, offering features such as habit trackers, productive work timers, mental health trackers, fitness exercises, journals, to-do lists, picture journals, and personal goal-setting tools. It will be designed with a focus on simplicity, accessibility, and user engagement. The visual design will align with the reference image, emphasizing dreamy, slightly blurred gradient textures, clean but expressive typography, and glassmorphism elements.

3. Functional Requirements

User Stories:

• As a User, I should be able to read self-help articles categorized by topics.
• As a User, I should be able to track my habits and progress through interactive tools.
• As a User, I should be able to use a productive work timer to enhance focus.
• As a User, I should be able to monitor my mental health through trackers.
• As a User, I should be able to access fitness exercises tailored to my goals.
• As a User, I should be able to maintain a journal for personal reflection.
• As a User, I should be able to create and manage to-do lists.
• As a User, I should be able to maintain a picture journal for visual memories.
• As a User, I should be able to set and track personal goals.
• As a User, I should be able to join community forums to share experiences and seek support.
• As a User, I should be able to subscribe to newsletters for updates and tips.
• As an Admin, I should be able to manage articles, forums, and user-generated content.
• As an Admin, I should be able to view analytics on user engagement and website performance.
• As a User, I should be able to selectively regenerate the System Requirements Document (SRD) for updates.

4. User Personas

1. User

• Description: Individuals seeking self-help resources and tools.
• Goals: Access articles, track progress, engage with the community, and use interactive tools for personal growth.
• Pain Points: Overwhelming information, lack of motivation, and difficulty finding reliable resources.

2. Admin

• Description: Website managers responsible for content and user moderation.
• Goals: Ensure high-quality content, monitor user activity, and optimize website performance.
• Pain Points: Managing large volumes of content and ensuring user satisfaction.

5. Visuals Colors and Theme

Color Palette:

Inspired by the reference image, the website will use the following colors:

• Background: #FDE8E8 (soft peach gradient)
• Surface: #F8F3FF (light lavender)
• Text: #3A3A3A (dark gray for readability)
• Accent: #FF8C94 (vibrant coral pink)
• Muted Tones: #B8E1FF (calming sky blue)

Typography:

• Primary Font: A bold, stylish serif font inspired by editorial/fashion aesthetics.
• Secondary Font: Clean sans-serif for body text.
• Script Font: Elegant handwritten style for accents and signature text.

6. Signature Design Concept

Interactive Gradient Mood Tracker

The homepage will feature a dynamic gradient background that shifts colors based on the user’s mood input. Users will select their mood from a slider or emoji-based menu, and the background will subtly morph to reflect their choice (e.g., calming blues for relaxation, vibrant pinks for motivation).

Additional features:

• Hero Section: Full-screen gradient background (warm pink → orange ombré) with large centered logo text: “Thrive” in bold serif font and a small handwritten signature text: “by BV.”
• Micro-interactions: Hover effects on buttons and links that ripple like water.
• Animations: Smooth fade-in animation on load and transitions between sections.
• Interactive Cards: Self-help articles displayed as cards that flip to reveal summaries when clicked.
• Second Section: Playful typography with stylized text like “wanna be an ‘it girly’? but don’t wanna download a million apps” and cursive accents saying, “what if I told you you can do it all in a single app.”

7. Non-Functional Requirements

• Performance: The website must load within 3 seconds on standard broadband connections.
• Accessibility: WCAG 2.1 compliance for users with disabilities.
• Scalability: Support up to 100,000 monthly active users.
• Security: Implement SSL encryption and secure user authentication.

8. Tech Stack

Frontend:

• React for Web

Backend:

• Python
• FastAPI

Database:

• MySQL (with Alembic for migrations)

AI Models:

• GPT 5.4 for user-friendly responses
• Claude 4.6 Opas for academic or coding work

AI Tools:

• Langchain
• Litellm for LLM Routing

Orchestration:

• Docker
• Kubernetes

9. Assumptions and Constraints

Assumptions:

• Users will primarily access the website via desktop and mobile browsers.
• The website will integrate seamlessly with the mobile app.

Constraints:

• Limited budget for hosting and AI tools.
• Adherence to the visual reference image for design consistency.

10. Glossary

• WCAG: Web Content Accessibility Guidelines.
• SSL: Secure Sockets Layer, a protocol for encrypting internet communications.
• LLM: Large Language Model, used for AI-driven features.