> For the complete documentation index, see [llms.txt](https://flowspace.gitbook.io/flowspace-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flowspace.gitbook.io/flowspace-docs/flowspace-gitbook-documentation.md).

# FlowSpace — GitBook Documentation

### Welcome to FlowSpace

FlowSpace is a no-shame study companion built for stressed, overwhelmed, or burnout-prone students. It blends gentle UX, AI-powered learning tools, and accessibility-first design into one calming study environment.

FlowSpace helps you:

* Focus without pressure
* Turn messy notes into clean AI-generated quizzes
* Reset during burnout
* Plan your next 60–90 minutes with ease
* Study in a space that feels human, not grindy

***

## **1. Overview**

###  What is FlowSpace?

FlowSpace is an all-in-one, student-friendly study toolkit designed to make learning feel lighter, safer, and more vibrant. It turns studying into something soft — not stressful.

###  Core Philosophy

FlowSpace breaks away from intense productivity culture by providing:

* **Compassionate tools**
* **Soft gradients & calming visuals**
* **Burnout-aware features**
* **Accessibility modes built in from day 1**

Learning should feel **human**, not punitive.

***

##  **2. Features**

### **Focus Timer**

A gentle focus timer with:

* Adaptive focus modes
* Encouraging visuals, not shame-based pressure
* Dark/Light theme support
* Custom color accents based on user theme

***

###  **Quick Quiz (AI-Powered)**

Turn ANY text (notes, textbook, lecture summary) into a set of study questions instantly.

* Paste text → AI generates questions
* Save quiz sets locally
* Choose difficulty: **Chill**, **Normal**, **Spicy**
* Revisit saved sets anytime

***

### **Safe Space**

Mental-health-friendly area featuring:

* Emotional check-ins
* Encouragement prompts
* Light grounding exercises
* Soothing UI to lower overwhelm

***

###  **Time & Priority Coach**

AI assistant for planning your next study block.

You get a mini study plan that includes:

* Priorities
* Break reminders
* Estimated durations
* Gentle guidance vs. strict schedules

***

### **Accessibility Bar**

One of FlowSpace’s strongest features:

* **Dyslexia-friendly mode**
* **High-contrast mode**
* **Text size scaling (A-, A, A+)**
* **Light/Dark mode toggle**
* **Fully responsive design**
* **Font adjustments for readability**

***

##  **3. Tech Stack**

#### **Frontend**

* React
* TypeScript
* Custom CSS variables
* Responsive design (mobile-first)

#### **Backend**

* Node.js
* Express
* OpenAI API integration
* Health check endpoint

#### **Additional Tools**

* LocalStorage for persistence
* Vite (or React Scripts depending on setup)
* GitHub for source control
* Cline CLI for automated improvements

***

##  **4. Design System**

### Color Palette

**Primary Accent:** `#58A4B0`\
**Secondary Accent:** `#B07BAC`\
**Deep Base:** `#171738`\
**Soft Background:** `#F9F9F9`

### Typography

* Inter
* Dyslexia-safe variant when enabled
* Accessible sizing: small → medium → large

### UI Style

* Rounded corners
* Gradient accents
* Radial backgrounds
* Motion used sparingly
* Emotionally safe color schemes

***

## **5. Local Storage Architecture**

| Key                       | Purpose                  |
| ------------------------- | ------------------------ |
| `flowspace_profile_v1`    | Stores user name/profile |
| `flowspace_quiz_sets_v1`  | Saved quizzes            |
| `flowspace_theme`         | Light/Dark mode          |
| `flowspace_text_size`     | Small/Medium/Large       |
| `flowspace_dyslexia`      | Dyslexia mode toggle     |
| `flowspace_high_contrast` | HC mode toggle           |

***

##  **6. System Architecture**

```
client/
  ├── src/
  │    ├── App.tsx
  │    ├── Components/
  │    │     ├── HomePage.tsx
  │    │     ├── FlowTimer.tsx
  │    │     ├── QuickQuiz.tsx
  │    │     ├── SafeSpace.tsx
  │    │     ├── TimeCoach.tsx
  │    │     └── ProfilePage.tsx
  │    ├── assets/
  │    └── styles/
server/
  ├── index.js
  ├── routes/
  └── config/
```

***

##  **7. How to Run Locally**

### **Clone Repo**

```bash
git clone https://github.com/YOUR-USERNAME/flowspace.git
```

### **Install dependencies**

```bash
cd client
npm install

cd ../server
npm install
```

### **Run backend**

```bash
npm run dev
```

### **Run frontend**

```bash
npm run dev
```

Backend runs on: `http://localhost:3000`\
Frontend runs on: `http://localhost:5173` (or your Vite port)

***

## **8. Accessibility Philosophy**

FlowSpace was intentionally designed for:

* Students with ADHD
* Students with dyslexia
* Burnout-prone students
* Anxious learners
* Neurodivergent users who benefit from gentle UI

Accessibility isn’t an add-on — it’s woven into the core UX.

***

## **9. Hackathon Tracks**

### **Main Track:**

✔️ Make Learning Fun (Primary Submission)

### **Bonus Tracks:**

✔️ GitBook Documentation\
✔️ Cline CLI

***

##  **10. Why FlowSpace Matters**

Students deserve tools that feel supportive — not strict.

FlowSpace softens the learning experience while still offering powerful features that help you perform at your best.

It’s not just a study tool.\
It’s a **little companion for heavy days**.

##