A web-based desktop environment to centralize your digital workflow and enhance productivity.
Overview • Features • Tech Stack • Getting Started • Development • Contributing • Documentation • License
WFCOS (Work From Cafe OS) provides a single, organized interface that helps users reduce clutter, streamline tasks, and access essential tools and applications efficiently from any browser.
Built with a cutting-edge stack including Next.js 15, React 19, and Tailwind CSS v4, WFCOS offers a customizable and performant workspace. Leveraging Radix UI and shadcn/ui, it provides a familiar, desktop-like environment tailored to your needs.
Ideal for remote workers, developers, and anyone seeking a consistent and personalized command center for their online activities.
📚 Documentation: For detailed information on how this app works, visit our DeepWiki documentation.
- Added blogs section and blog pages
- Track work sessions and productivity
- Link tasks to work sessions
- View sessions as charts and tables
- Charts show weekly, monthly, yearly data
- Tables display all session data
- Session count in task items
-
Framework: Next.js v15.3.1 with App Router
-
UI Library: React v19.1.0
-
Styling: Tailwind CSS v4.1.4
-
State Management: Jotai v2.12.3
-
Icons: Lucide React v0.507.0
-
Drag and Drop: dnd-kit v6.3.1
-
Charts: Recharts v2.15.3
-
Linting: ESLint v9.25.1
-
Git Hooks: Husky v9.1.7
-
Language: TypeScript v5.8.3
-
Package Manager: Bun
-
Clone the repository:
git clone <your-repository-url> cd wfcOS
-
Set up environment variables:
cp env.template .env.local
-
Install dependencies with Bun:
bun install
# Start development server
bun dev
# Build for production
bun build
# Start production server
bun start
# Lint code
bun lint# Build and run with Docker
docker build -t wfcos .
docker run -p 3000:3000 wfcos
# Or use docker-compose
docker-compose up -dClick to expand folder structure
.
├── src/ # Source code
│ ├── app/ # Next.js App Router
│ │ ├── [page]/ # Route-specific directories
│ │ │ ├── page.tsx # Page component
│ │ │ ├── layout.tsx # Page-specific layout
│ │ │ └── components/ # Page-specific components
│ │
│ ├── presentation/ # UI Layer
│ │ ├── components/ # React components
│ │ │ ├── ui/ # Shadcn components
│ │ │ ├── layout/ # Layout components
│ │ │ └── apps/ # Application feature components
│ │ └── styles/ # Global styles
│ │
│ ├── application/ # Application Layer
│ │ ├── atoms/ # Jotai atoms for state management
│ │ ├── hooks/ # Custom React hooks
│ │ └── types/ # TypeScript type definitions
│ │
│ └── infrastructure/ # Infrastructure Layer
│ ├── config/ # Configuration files
│ ├── utils/ # Utilities
│ └── lib/ # Shared libraries
│
├── public/ # Static assets
The project follows a clean architecture approach with three main layers:
|
Components, UI elements, and styles
|
Business logic, state management
|
Configuration, utilities, external services
|
- Component Structure:
- Server Components (default) vs Client Components (with "use client" directive)
- Component organization follows high cohesion, low coupling principles
- State Management:
- Uses Jotai for global state with atom-based architecture
- Local state when appropriate
- Window System:
- All applications use the reusable window component at
/src/presentation/components/layout/window.tsx
- All applications use the reusable window component at
- App Registry:
- Applications are registered in
/src/infrastructure/config/appRegistry.ts
- Applications are registered in
Naming Conventions
- Directories: Kebab-case (
user-profile/) - React components: PascalCase (
UserProfile.tsx) - Utility files: camelCase (
formatDate.ts) - Page files:
page.tsx - Layout files:
layout.tsx
- Components: PascalCase (
UserProfile,UserProfileProps) - Variables/Functions: camelCase (
getUserData()) - Constants: UPPER_SNAKE_CASE (
MAX_RETRY_COUNT) - Booleans: Use prefixes like
is,has,should(isLoading,hasAccess)
Commit Message Format
This project uses Conventional Commits for standardized commit messages:
<type>(<scope>): <description>
[optional body]
[optional footer(s)]
Common types:
feat: A new featurefix: A bug fixdocs: Documentation changesstyle: Code style changes (formatting, etc.)refactor: Code changes that neither fix bugs nor add featurestest: Adding or modifying testschore: Changes to the build process or auxiliary tools
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes
- Commit your changes using the conventional commit format
- Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.