DeskJarvis is a futuristic, web-based personal dashboard and desktop simulator. Built with the cutting-edge Angular 20, it combines productivity tools with retro gaming entertainment in a fully customizable, draggable interface.
Your personal AI-assisted workspace, reimagined for the web.
A fully modular workspace where you control the layout.
- Draggable Widgets: Powered by
@angular/cdk, organize your screen exactly how you want it. - Widget Toolbox: Hide widgets to clear clutter and restore them via a sleek toolbox menu.
- Persistent State: Smart routing logic remembers if you have seen the Intro or Tutorial.
- 🧠 AI Center: An integrated AI interaction point.
- 🎵 Music Player: Built-in audio controls for your workflow vibes.
- ☁️ Weather & 🕒 Clock: Real-time updates.
- 📝 Notes & 📅 Calendar: Keep track of your tasks and schedule.
- 🖼️ Resizable Images: Pin your favorite visuals to the dashboard.
Need a break? Switch to the Games tab for integrated browser games:
- 🦆 Duck Hunt: A retro classic reimagined.
- 🧱 Tetris: The timeless puzzle game.
- Matrix Effect: a Cyberpunk-inspired visual mode.
- Immersive Intro: Cinematic introduction sequence.
- Interactive Tutorial: Guided onboarding for new users.
- Framework: Angular 20.3 (Standalone Components)
- Build Tool: Vite & Angular CLI
- Styling: SCSS (Sass)
- Icons: Lucide Angular
- Game Engine: Kaplay.js (formerly Kaboom.js)
- Interactivity: Angular CDK (Drag & Drop)
- State Management: RxJS
- Node.js (v18 or higher recommended)
- npm or yarn
- Clone the repository
git clone https://github.com/your-username/desk-jarvis-ang.git
cd desk-jarvis-ang
- Install dependencies
npm install
- Run the development server
npm start
# OR
ng serve
- Open the app
Navigate to
http://localhost:4200/.
src/
├── app/
│ ├── dashboard/ # Main desktop interface & widgets
│ ├── games/ # Game Hub (Duck Hunt, Tetris)
│ ├── homescreen/ # Landing page after intro
│ ├── intro/ # Cinematic intro sequence
│ ├── matrix-effect/ # Visual screensaver effect
│ ├── settings/ # Application configuration
│ ├── tutorial/ # User onboarding flow
│ ├── app.routes.ts # Routing logic (Guards & Paths)
│ └── app.config.ts # Application configuration
└── assets/ # Graphics, Sounds, and Data models
The application features an intelligent routing flow defined in app.routes.ts:
- Root (
/): CheckssessionStorage.
- First time? → Plays Intro.
- Intro done? → Plays Tutorial.
- All done? → Goes to Home.
- Home (
/home): The central landing pad. - Dashboard (
/dashboard): The main draggable workspace.
| Command | Description |
|---|---|
npm start |
Runs the app in development mode (ng serve). |
npm run build |
Builds the app for production. |
npm test |
Runs unit tests via Karma/Jasmine. |
npm run dev |
Runs via Vite directly. |
Contributions are welcome! If you want to add a new widget or game:
- Fork the project.
- Create your feature branch (
git checkout -b feature/AmazingWidget). - Commit your changes (
git commit -m 'Add some AmazingWidget'). - Push to the branch (
git push origin feature/AmazingWidget). - Open a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.