taskncoffee/taskncoffee-app/README.md

Task&Coffee Frontend

Modern task management app with Material Design 3 + Neon aesthetic

🚀 Quick Start

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

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	📋 Quick reference - copy/paste examples
Style Guide	📚 Complete guide with examples
Color Palette	🎨 Color meanings & usage

👉 Start with Cheatsheet 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
• Vite | React | Tailwind

---

Made with 💙 and neon ✨