mpuchstein/REMind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

expanded and updated README.md to include detailed project overview, features breakdown, technical stack, usage guide, project structure, and educational context for improved clarity and documentation quality.

Browse Source 
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
Matthias Puchstein
2025-07-17 04:18:19 +02:00
parent 618e5b442e
commit 4ccbd28c4f
1 changed files with 245 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

311
README.md
View File

@@ -1,90 +1,269 @@
# REMind (Mockup Demo)
# REMind - Dream Analysis & VR Experience Platform
🚧 **This is a MOCKUP / DEMO APPLICATION for a university project – no real backend, AI features, or data storage.** 🚧
![Project Status](https://img.shields.io/badge/Status-University%20Project%20Demo-orange)
![License](https://img.shields.io/badge/License-AGPL--3.0-blue)
![TypeScript](https://img.shields.io/badge/TypeScript-95.2%25-blue)
REMind is an interactive, front-end prototype that showcases dream journaling, AI-powered analysis (simulated), and immersive VR demonstrations. Built with React, TypeScript, Vite, and Tailwind CSS, it’s designed for demos and concept validation only.
> **🚧 IMPORTANT: This is a MOCKUP/DEMO APPLICATION for a university project**
> **No real backend, AI features, or data storage. All functionality is simulated for demonstration purposes.**
## Features (all mockup/demo only)
## Project Overview
- **(Mockup)** Dream Journal
Record dreams as text entries, voice memos, or sketches—UI only, no persistence.
- **(Mockup)** AI Analysis
Simulated “Here the AI would analyze your dream…” step with instant, hard-coded interpretations, symbol recognition, and emotion tagging.
- **(Mockup)** Personal Archive
Browse and filter past mock entries by date, symbols, emotions, or tags.
- **(Mockup)** Statistics \& Trends
Visualize frequent symbols, emotional patterns, and simulated sleep-cycle correlations using dummy data.
- **(Mockup)** VR Dreamscapes
Enter 3D scenes built with React Three Fiber—explore thematic environments (labyrinths, dark rooms) in browser-based VR mode.
- **Responsive Design**
Works on desktop browsers(design optimized for mobile) and mobile devices. Ideal for QR-code launches at demos.
REMind is an innovative interactive prototype that explores the intersection of dream analysis, artificial intelligence,
and virtual reality. The application demonstrates how modern technology could revolutionize dream journaling and
interpretation through immersive experiences and intelligent analysis.
## Tech Stack
**Project Aim:** To showcase the potential of combining dream journaling with AI-powered analysis and VR visualization,
creating an engaging platform for understanding the subconscious mind and exploring the societal implications of dream
research.
- **Framework:** React + TypeScript
- **Bundler:** Vite
- **Styling:** Tailwind CSS
- **Routing:** React Router Dom
- **Icons:** React Icons
- **3D \& VR:** @react-three/fiber
- **Linting:** ESLint
## ✨ Key Features
## Getting Started
### 🌙 Multi-Modal Dream Recording
> **Note:** This repository contains only a front-end prototype with hard-coded mock data. There is no production backend or AI service.
- **Text Input**: Write detailed dream descriptions with rich formatting
- **Voice Recording**: Record dream narratives with audio transcription
- **Image Upload**: Upload dream sketches, drawings, or related images
- **Biometric Integration**: Simulate EEG, heart rate, and movement data from sleep tracking devices
1. Clone the repo
### 🤖 AI-Powered Analysis (Simulated)
```bash
git clone https://gitea.puchstein.bayern/mpuchstein/REMind.git
cd REMind
```
- **Symbol Recognition**: Identify and categorize dream symbols
- **Emotion Detection**: Analyze emotional patterns and mood indicators
- **Interpretation Engine**: Generate personalized dream interpretations
- **Pattern Analysis**: Detect recurring themes and symbols across dreams
2. Install dependencies
### 🎮 VR Dreamscapes
```bash
npm install
```
- **3D Visualization**: Transform dreams into immersive 3D environments
- **Neural Network Visualization**: Interactive neural network representations for biometric data
- **VR Experience**: WebXR-enabled virtual reality exploration
- **Responsive Controls**: Support for both VR headsets and desktop interaction
3. Run development server
### 📊 Advanced Analytics
```bash
npm run dev
```
- **EEG Visualization**: Real-time brainwave pattern charts (Alpha, Beta, Theta, Delta)
- **Vital Signs Monitoring**: Heart rate and HRV trend analysis
- **Movement Tracking**: Sleep movement pattern visualization
- **Statistical Dashboard**: Comprehensive dream pattern analysis
Open `http://localhost:5173` in your browser. 4. Build for production (static demo)
### 🗂️ Dream Archive & Management
```bash
npm run build
npm run preview
```
- **Personal Library**: Organized collection of all dream entries
- **Search & Filter**: Advanced filtering by date, symbols, emotions, and tags
- **Social Features**: Share dreams with friends and community
- **Daily Highlights**: Curated dream insights and patterns
## Project Structure
### 🌐 Community Features
- **Dream Archive**: Explore categorized dream collections
- **Research Integration**: Live research data visualization
- **Cultural Landscapes**: Dreams categorized by cultural themes
- **Worldwide Events**: Global dream pattern analysis
## 🛠️ Technology Stack
### Frontend Framework
- **React 19.1.0** - Modern React with latest features
- **TypeScript** - Type-safe development
- **Vite 7.0.0** - Fast build tool and development server
### Styling & UI
- **Tailwind CSS 4.1.11** - Utility-first CSS framework
- **CSS Variables** - Dynamic theming system
- **Responsive Design** - Mobile-first approach
### 3D & VR
- **Three.js 0.178.0** - 3D graphics library
- **@react-three/fiber 9.2.0** - React Three.js renderer
- **@react-three/drei 10.5.1** - Three.js helpers
- **@react-three/xr 6.6.19** - WebXR integration
- **webxr-polyfill 2.0.3** - VR compatibility
### Data Visualization
- **D3.js 7.9.0** - Advanced data visualization
- **Custom Chart Components** - EEG, vitals, and movement charts
### Navigation & Routing
- **React Router DOM 7.6.3** - Client-side routing
- **React Icons 5.5.0** - Comprehensive icon library
### Development Tools
- **ESLint** - Code linting and formatting
- **TypeScript ESLint** - TypeScript-specific linting
- **Vite Plugin React** - React integration
## 📁 Project Structure
```
.
├── public/ # Static assets
REMind/
├── public/ # Static assets (favicon, etc.)
├── src/
│ ├── assets/ # Images, fonts
│ ├── components/ # Reusable React components
│ ├── data/ # Mock data (dream entries, analysis)
│ ├── pages/ # Route-driven pages
│ ├── types/ # TypeScript types/interfaces
│ ├── App.tsx # Root component
│ ├── index.css # Tailwind setup
│ └── main.tsx # Entry point
├── index.html # HTML template
├── package.json # Scripts & dependencies
├── tsconfig.app.json # TS config for app
├── vite.config.ts # Vite config
└── README.md # This file
│ ├── assets/ # Images, logos, fonts
│ ├── components/ # Reusable UI components
│ │ ├── DreamCard.tsx # Dream display component
│ │ ├── DreamRecord.tsx # Dream recording interface
│ │ ├── DreamVR.tsx # VR visualization component
│ │ ├── DreamCharts.tsx # Data visualization components
│ │ ├── Navbar.tsx # Navigation component
│ │ └── ...
│ ├── data/ # Mock data for demonstration
│ │ ├── MockDreams.ts # Sample dream entries
│ │ ├── MockUsers.ts # User data
│ │ └── ...
│ ├── pages/ # Route-driven page components
│ │ ├── Home.tsx # Main dashboard
│ │ ├── Feed.tsx # Dream feed
│ │ ├── DreamPage.tsx # Individual dream view
│ │ ├── Overview.tsx # Landing page
│ │ └── dreamarchive/ # Archive pages
│ ├── types/ # TypeScript type definitions
│ │ ├── Dream.ts # Dream data structures
│ │ └── User.ts # User data structures
│ ├── utils/ # Utility functions
│ ├── styles/ # Styling utilities
│ ├── App.tsx # Root component
│ ├── main.tsx # Application entry point
│ └── index.css # Global styles
├── docs/ # Documentation
│ └── poster.pdf # Project presentation poster
├── package.json # Dependencies and scripts
├── tsconfig.app.json # TypeScript configuration
├── vite.config.ts # Vite configuration
└── README.md # This file
```
## Usage \& Demo
## 🚀 Getting Started
- **Start Dream Journal** — click “🌙 Lass die Magie beginnen” to open the mock dream entry form.
- **AI Analysis** — submit an entry to see the “mock” interpretation card.
- **Browse Archive** — filter mock entries by symbol, emotion, or date.
- **VR Mode** — click VR Demo to load an immersive 3D scene in your browser.
### Prerequisites
**Reminder:** REMind is a design-and-concept prototype only. Enjoy exploring the features—no real data or AI integration under the hood!
- Node.js 18+
- npm or yarn package manager
### Installation
1. **Clone the repository**
```bash
git clone https://gitea.puchstein.bayern/mpuchstein/REMind.git
cd REMind
```
2. **Install dependencies**
```bash
npm install
```
3. **Start development server**
```bash
npm run dev
```
4. **Open in browser**
```
http://localhost:5173
```
### Available Scripts
- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npm run lint` - Run ESLint
## 🎯 Usage Guide
### Getting Started
1. **Landing Page**: Visit the overview page to understand the application concept
2. **Begin Journey**: Click "Lass die Magie beginnen" to start the dream recording experience
3. **Record Dreams**: Use various input methods (text, voice, image, biometric)
4. **AI Analysis**: View simulated AI interpretations and insights
5. **VR Experience**: Explore dreams in virtual reality environments
6. **Archive Exploration**: Browse and filter through dream collections
### Key Navigation
- **Home** (`/home`) - Personal dashboard with recent dreams
- **Feed** (`/feed`) - Community dream sharing
- **Record** (`/record`) - Dream input interface
- **Dream Archive** (`/dreamarchive`) - Categorized dream collections
- **Profile** (`/profile`) - User settings and statistics
### Input Types
- **Text**: Write detailed dream descriptions
- **Audio**: Record voice memos with transcription
- **Image**: Upload dream-related visuals
- **Chip**: Biometric data from sleep tracking devices
## 🔮 Demo Features
### Simulated AI Analysis
- **Symbol Recognition**: Identifies dream symbols like "water," "flying," "animals"
- **Emotion Tagging**: Categorizes emotions as "fear," "joy," "anxiety," "peace"
- **Interpretation**: Generates psychological insights and meanings
- **Pattern Detection**: Highlights recurring themes across dreams
### VR Visualization
- **Neural Networks**: Interactive 3D representations of brain activity
- **Dreamscapes**: Immersive environments based on dream content
- **Data Visualization**: 3D charts and graphs for biometric data
- **WebXR Support**: Compatible with VR headsets and desktop browsers
### Data Analytics
- **EEG Patterns**: Brainwave analysis during sleep (Alpha, Beta, Theta, Delta)
- **Vital Signs**: Heart rate and heart rate variability trends
- **Movement Data**: Sleep movement and restlessness patterns
- **Statistical Insights**: Long-term pattern analysis and correlations
## ⚠️ Important Notes
### Assets Not Included
- **Media Files**: Dream images, audio files, and videos are not included in the repository
- **Mock Data**: All displayed content uses placeholder data for demonstration
- **External Resources**: Some images and media are referenced but not stored in the repository
### Limitations
- **No Backend**: All data is stored locally in browser memory
- **No AI Integration**: Analysis results are pre-generated mock responses
- **No Data Persistence**: Data is lost when browser is refreshed
- **Demo Purpose Only**: Not intended for production use
## 🎓 Educational Context
This project was developed as a university demonstration to explore:
- **Human-Computer Interaction**: Innovative interfaces for dream recording
- **Data Visualization**: Advanced techniques for complex data representation
- **Virtual Reality**: Immersive experiences for psychological content
- **AI Integration**: Simulated machine learning for content analysis
- **User Experience**: Intuitive design for sensitive personal data
## 🤝 Contributing
This is a university project demo and not actively maintained for production use. However, feedback and suggestions are
welcome for educational purposes.
## 📄 License
This project is licensed under the AGPL-3.0 License - see the LICENSE file for details.
## 🔗 Repository
[View on Gitea](https://gitea.puchstein.bayern/mpuchstein/REMind)
---
**Disclaimer**: REMind is a prototype demonstration created for educational purposes. All AI features, data analysis,
and interpretations are simulated and should not be used for actual psychological or medical analysis.