https://github.com/d-oit/vite-react-material-ui-brainstroming
https://github.com/d-oit/vite-react-material-ui-brainstroming
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/d-oit/vite-react-material-ui-brainstroming
- Owner: d-oit
- Created: 2025-04-06T14:10:09.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-04-06T16:28:25.000Z (9 months ago)
- Last Synced: 2025-04-06T17:19:41.742Z (9 months ago)
- Language: TypeScript
- Size: 741 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# d.o.it.brainstorming
A fully responsive PWA for structured brainstorming with offline-first capabilities.
> Unleash structured creativity — anywhere, anytime.
## Features
- **Project-Based Brainstorming**: Organize your ideas within project contexts with customizable templates
- **React Flow Integration**: Visualize brainstorming workflows with draggable and editable nodes
- **Material UI v7**: Modern UI components with dark/light mode support
- **Git History Viewer**: Track changes and versions of your projects
- **OpenRouter LLM Chat**: AI-powered assistance for brainstorming with node generation
- **AWS S3 Sync**: Backup and sync your projects to the cloud (optional)
- **Offline-First PWA**: Work anywhere, even without an internet connection
- **Responsive Design**: Mobile-first approach with adaptive layouts
- **Accessibility**: Keyboard navigation, screen reader support, and more
- **Localization**: Available in English and German
- **Performance Optimized**: Code splitting, lazy loading, and memoization
## Tech Stack
- Vite 6 + React 18 + TypeScript
- Material UI v7
- React Flow for node-based visualization
- Framer Motion for smooth animations
- AWS SDK for S3 integration
- OpenAI/OpenRouter API for LLM chat
- Workbox for PWA and offline support
- Vitest for unit testing
- Playwright for E2E testing
## Getting Started
### Prerequisites
- Node.js (v20 or higher)
- npm or yarn
### Installation
1. Clone the repository:
```bash
git clone https://github.com/d-oit/vite-react-material-ui-brainstroming.git
cd vite-react-material-ui-brainstroming
```
2. Install dependencies:
```bash
npm install
```
3. Create a `.env` file in the root directory with the following variables (or copy from `.env.example`):
```env
VITE_S3_ENDPOINT=your_s3_endpoint_here
VITE_OPENROUTER_API_URL=https://openrouter.ai/api/v1
VITE_PROJECT_VERSION=0.1.0
VITE_SKIP_DELETE_CONFIRMATION=false
```
### Development
Start the development server:
```bash
npm run dev
```
### Building for Production
Build the app for production:
```bash
npm run build
```
Preview the production build:
```bash
npm run preview
```
### Testing
Run unit tests:
```bash
npm run test
```
Run E2E tests:
```bash
npm run test:e2e
```
### Code Quality
#### Linting
Check for linting issues:
```bash
npm run lint
```
Fix linting issues automatically:
```bash
npm run lint:fix
```
Run CI-level linting (zero warnings):
```bash
npm run ci:lint
```
#### Formatting
Format code with Prettier:
```bash
npm run format
```
Check if code is properly formatted:
```bash
npm run format:check
```
#### Pre-commit Hooks
This project uses Husky and lint-staged to automatically lint and format code before commits. This ensures that all committed code meets the project's quality standards.
## Project Structure
- **Project-Based Organization**: All brainstorming activities are organized within projects
- **Template System**: Choose from predefined templates or create custom ones
- **Version Control**: Track changes to your projects with built-in history
- **Import/Export**: Share your projects or back them up locally
## PWA Features
- Installable on desktop and mobile devices
- Works offline with cached data
- Background sync for updates when online
- Optimized caching strategies for assets and API responses
- Responsive design for all screen sizes
## Accessibility Features
- Keyboard navigation support with shortcuts
- ARIA attributes for screen readers
- Focus management and skip links
- Color contrast compliance (WCAG 2.2 AA)
- Screen reader announcements for dynamic content
## Performance Optimizations
- Code splitting and lazy loading
- React.memo for performance-critical components
- Optimized React Flow rendering with virtualization
- Efficient state management
- Responsive image loading
- Browser caching strategies