# 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**.

##


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://flowspace.gitbook.io/flowspace-docs/flowspace-gitbook-documentation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.