---

Version 2.0 - Complete Rewrite

Version 2.0 is a complete rewrite from the ground up. The entire codebase has been rebuilt with a modern architecture, improved developer experience, and better performance.

What's New:

• Rebuilt with Tailwind CSS v4 and Vite
• 4 unique dashboard templates
• 10 accent colors + Light/Dark themes
• SPA-like navigation without page reloads
• Widget-based component architecture
• Redesigned landing page

Documentation:

• ARCHITECTURE.md - Project structure and architecture rules
• COMPONENT_GUIDE.md - How to create and use components

---

Preview

4 Dashboard Templates

---

Features

• 4 Dashboard Templates - Analytics, E-commerce, Crypto, Mission Control
• 2 Themes - Light & Dark mode
• 47+ Pages - Authentication, Apps, Components, Forms, and more
• 15+ Components - Buttons, Cards, Tables, Charts, Modals, etc.
• SPA Navigation - Smooth transitions without page reloads
• Responsive Design - Works on all devices
• Modern Stack - Vite, Tailwind CSS v4, Handlebars

---

Why Pure JavaScript?

Cleopatra is built with vanilla JavaScript intentionally:

• Zero Framework Lock-in - Use it with any backend (Laravel, Django, Rails, Node, or static)
• Faster Load Times - No framework runtime overhead
• Easy to Understand - Simple, readable code without framework abstractions
• Future Proof - Vanilla JS never goes out of style
• Lightweight - Smaller bundle size means faster page loads
• Full Control - No hidden magic, you own every line of code

This makes Cleopatra perfect for developers who want a clean starting point without the complexity of React, Vue, or Angular.

---

Quick Start

# Clone the repository
git clone https://github.com/moesaid/cleopatra.git

# Navigate to directory
cd cleopatra

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:8081

---

Project Structure

src/
├── components/
│   ├── layout/      # App shell, header, sidebar
│   ├── ui/          # Buttons, cards, alerts, modals
│   ├── widgets/     # Dashboard widgets, charts, stats
│   └── charts/      # ApexCharts & Chart.js components
├── pages/           # Route files
├── styles/          # Global styles & Tailwind config
└── js/              # JavaScript modules

---

Customization

Theme Colors

Choose from 10 accent colors:

Theme Modes

• Light Mode - Clean white interface
• Dark Mode - Easy on the eyes

---

Tech Stack

---

License

MIT © Mohamed Said