77 lines
1.7 KiB
Markdown
77 lines
1.7 KiB
Markdown
# Task&Coffee Frontend
|
|
|
|
> Modern task management app with Material Design 3 + Neon aesthetic
|
|
|
|
## 🚀 Quick Start
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Styling System
|
|
|
|
We use a custom design system combining:
|
|
- **Mirage Color Palette** - Professional dark blue theme
|
|
- **Material Design 3** - Modern UI patterns
|
|
- **Neon Cyberpunk** - Unique glowing accents
|
|
|
|
### Usage
|
|
|
|
```jsx
|
|
import styles from '@/lib/styles';
|
|
|
|
<div className={styles.card.filled}>
|
|
<h2 className={styles.text.h2}>Hello</h2>
|
|
<button className={styles.button.primaryNeon}>Click</button>
|
|
</div>
|
|
```
|
|
|
|
### 📖 Documentation
|
|
|
|
| Document | Purpose |
|
|
|----------|---------|
|
|
| **[Cheatsheet](./docs/STYLES_CHEATSHEET.md)** | 📋 Quick reference - copy/paste examples |
|
|
| **[Style Guide](./docs/STYLE_GUIDE.md)** | 📚 Complete guide with examples |
|
|
| **[Color Palette](./docs/COLOR_PALETTE.md)** | 🎨 Color meanings & usage |
|
|
|
|
**👉 Start with [Cheatsheet](./docs/STYLES_CHEATSHEET.md)** for quick examples!
|
|
|
|
---
|
|
|
|
## 🛠️ Tech Stack
|
|
|
|
- React 18 + Vite
|
|
- Tailwind CSS + Custom Design System
|
|
- Radix UI (accessibility)
|
|
- Lucide React (icons)
|
|
|
|
---
|
|
|
|
## 📁 Project Structure
|
|
|
|
```
|
|
src/
|
|
├── api/ API services
|
|
├── components/ Reusable components
|
|
├── lib/
|
|
│ ├── styles.js ⭐ Style presets (60+ ready-to-use)
|
|
│ └── utils.js Helper functions
|
|
├── pages/ Page components
|
|
├── index.css ⭐ Color variables (Mirage palette)
|
|
└── neon.css ⭐ Neon glow effects
|
|
```
|
|
|
|
---
|
|
|
|
## 📚 Learn More
|
|
|
|
- [Design System Overview](../DESIGN_SYSTEM_SUMMARY.md)
|
|
- [Vite](https://vitejs.dev/) | [React](https://react.dev/) | [Tailwind](https://tailwindcss.com/)
|
|
|
|
---
|
|
|
|
**Made with 💙 and neon ✨**
|