LifeStock Dashboard

A Next.js 14 dashboard that tracks your life pillars (Knowledge, Skills, Health, Discipline, Mood) as if they were moving a stock price. Features real-time candlestick charts, daily entries, and weekly performance reports.

Features

• 👤 Personalized user name on first launch
• 📊 Real-time candlestick chart visualization
• 📝 Daily pillar tracking (0-10 scale for each pillar)
• 📈 Automatic price calculations based on pillar averages
• 📅 Weekly earnings reports with streak tracking
• 💾 Local data persistence using localStorage
• 🌙 Dark theme UI with responsive design
• 📱 Mobile and desktop friendly

Tech Stack

• Next.js 14 with App Router
• TypeScript for type safety
• Tailwind CSS for styling
• lightweight-charts for candlestick visualization
• localStorage for data persistence

Installation

1. Clone the repository:

git clone https://github.com/kyzen-dev7/Lifestock.git
cd Lifestock

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser.

How It Works

The Formula

1. Average Calculation: Avg = (Knowledge + Skills + Health + Discipline + Mood) / 5
2. Daily Change: DailyChange% = (Avg - 5) * 4
   • When Avg = 10 → +20%
   • When Avg = 5 → 0%
   • When Avg = 0 → -20%
3. Price Calculation: NewClose = OldClose * (1 + DailyChange%/100)
4. Candlestick Wicks: Discipline affects volatility
   • Higher discipline = smaller wicks
   • Lower discipline = larger wicks

Market Trends

• Bull Market: Average ≥ 6.5
• Stable Market: 4.8 ≤ Average ≤ 6.4
• Bear Market: Average < 4.8

Pages

Dashboard (/)

• Real-time candlestick chart
• Daily entry form with 5 pillar sliders
• Preview of projected price changes
• Recent entries table
• Current market trend indicator

Weekly Report (/weekly)

• Last 7 days performance summary
• Weekly % change
• Best and weakest pillar analysis
• Green streak counter (consecutive days with Avg ≥ 5)
• Biggest up/down days

Data Storage

All data is stored locally in your browser's localStorage. No backend or external API required.

Project Structure

Lifestock/
├── app/
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Dashboard page
│   ├── weekly/
│   │   └── page.tsx        # Weekly report page
│   └── globals.css         # Global styles
├── components/
│   └── Chart.tsx           # Candlestick chart component
├── lib/
│   └── lifestock.ts        # Utility functions and formulas
├── package.json
├── tsconfig.json
├── tailwind.config.ts
├── postcss.config.js
└── next.config.js

License

MIT