WordyMe is a centralized platform for students to manage educational information. It provides a rich note-taking experience with support for documents, spaces, and a powerful editor with diagram and math support.
WordyMe is a full-stack application built as a monorepo using Turborepo. It consists of a modern React web application and an Express.js backend API, along with shared packages for editor functionality, UI components, and type definitions.
This project uses Turborepo for managing a monorepo with the following structure:
apps/web- Frontend React application built with Viteapps/backend- Backend Express.js API server
@repo/editor- Rich text editor built with Lexical, supporting diagrams (Mermaid), math (KaTeX), and more@repo/ui- Shared UI component library (shadcn/ui based)@repo/sdk- Client SDK for API communication@repo/types- Shared TypeScript type definitions@repo/lib- Shared utility functions@repo/shared- Shared business logic@repo/eslint-config- Shared ESLint configurations@repo/typescript-config- Shared TypeScript configurations
- React 19 - UI library
- Vite - Build tool and dev server (using Rolldown)
- TanStack Router - Type-safe file-based routing
- TanStack Query - Data fetching and state management
- Zustand - Global state management
- Tailwind CSS - Utility-first CSS framework
- Lexical - Rich text editor framework
- Mermaid - Diagram rendering
- KaTeX - Math rendering
- PWA Support - Progressive Web App capabilities
- Express.js - Web framework
- Better Auth - Authentication system
- Drizzle ORM - Type-safe database ORM
- libSQL (SQLite) - Embedded database
- Socket.io - Real-time communication
- Zod - Schema validation
- TypeScript - Type safety across the entire codebase
- ESLint - Code linting
- Prettier - Code formatting
- Turborepo - Monorepo build system
- pnpm - Package manager
- Create, edit, and organize documents in a hierarchical structure
- Support for different document types (notes, spaces, containers)
- Document versioning with revision history
- Document favorites and recent views
- Search and filtering capabilities
- WYSIWYG editing with Lexical
- Support for markdown
- Math equations with KaTeX
- Diagrams with Mermaid (flowcharts, sequence diagrams, class diagrams, etc.)
- Code blocks with syntax highlighting
- Image support with cropping and optimization
- Organize documents into spaces
- Hierarchical document structure
- Favorite spaces and documents
- Recent activity tracking
- User authentication and authorization
- User profiles with avatar and cover images
- Editor settings and preferences
- Real-time updates via WebSocket
- Code splitting and lazy loading
- Optimized bundle sizes
- PWA support for offline capabilities
- Efficient caching strategies
WordyMe/
├── apps/
│ ├── backend/ # Express.js API server
│ │ ├── src/
│ │ │ ├── routes/ # API route handlers
│ │ │ ├── services/ # Business logic
│ │ │ ├── models/ # Database models
│ │ │ ├── schemas/ # Zod validation schemas
│ │ │ └── lib/ # Core libraries (auth, db, socket)
│ │ └── storage/ # File storage and database
│ └── web/ # React frontend application
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── routes/ # TanStack Router routes
│ │ ├── queries/ # TanStack Query hooks
│ │ ├── store/ # Zustand stores
│ │ └── utils/ # Utility functions
│ └── public/ # Static assets
├── packages/
│ ├── editor/ # Lexical-based rich text editor
│ ├── ui/ # Shared UI components
│ ├── sdk/ # API client SDK
│ ├── types/ # TypeScript type definitions
│ ├── lib/ # Shared utilities
│ └── shared/ # Shared business logic
└── turbo.json # Turborepo configuration
WordyMe can be run using Docker and Docker Compose for easy deployment. See DOCKER.md for complete Docker documentation, including:
- Quick start guide
- Common commands
- Data persistence and backups
- Troubleshooting
- Production considerations
Quick Start:
docker compose up -dThe application will be available at:
- Web: http://localhost:5173
- API: http://localhost:3000
- Node.js >= 18
- pnpm 9.0.0 (specified in
packageManagerfield)
From the root directory:
pnpm dev- Start all apps in development modepnpm build- Build all apps and packagespnpm lint- Lint all packagespnpm format- Format code with Prettierpnpm check-types- Type-check all packagespnpm start- Start all apps in production mode
You can run commands for specific packages using Turborepo filters:
# Run only the web app
pnpm dev --filter=web
# Run only the backend
pnpm dev --filter=@repo/backend
# Build only the web app
pnpm build --filter=webThis project uses Turborepo for:
- Parallel execution - Run tasks across packages in parallel
- Caching - Intelligent caching of build outputs
- Task dependencies - Automatic dependency resolution
- Remote caching - Share build caches across team and CI/CD
Turborepo supports remote caching with Vercel (free for all plans). To enable:
# Authenticate with Vercel
pnpm exec turbo login
# Link your repository
pnpm exec turbo linkAll packages use TypeScript with strict type checking. Type definitions are shared through @repo/types.
ESLint is configured across all packages with shared configurations in @repo/eslint-config.
Prettier is used for consistent code formatting. A pre-commit hook (via Lefthook) ensures code is formatted before commits.
The backend uses libSQL (SQLite-compatible) for data storage. The database file is stored in apps/backend/storage/local.db by default.
Database migrations are managed with Drizzle Kit. Run migrations with:
cd apps/backend
pnpm drizzle-kit generate
pnpm drizzle-kit migrateThe backend API includes OpenAPI documentation. When running the backend, visit /api-docs for interactive API documentation.
- Ensure all dependencies are installed:
pnpm install - Run type checking:
pnpm check-types - Run linting:
pnpm lint - Format code:
pnpm format - Run tests:
pnpm test(where applicable)
See LICENSE file for details.