Skip to content

Build LifeStock dashboard with personalized tracking and candlestick charts #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kyzen-dev7 merged 4 commits into from
Feb 1, 2026
Merged

Build LifeStock dashboard with personalized tracking and candlestick charts #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b44b93e
Initial plan
Copilot Feb 1, 2026
7b254b1
Add complete LifeStock dashboard implementation
Copilot Feb 1, 2026
7061931
Add personalized name input feature and fix TypeScript types
Copilot Feb 1, 2026
f6253f3
Security: Upgrade Next.js to 16.1.6 to fix all vulnerabilities
Copilot Feb 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts
120 changes: 119 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,119 @@
# Lifestock
# 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:
```bash
git clone https://github.com/kyzen-dev7/Lifestock.git
cd Lifestock
```

2. Install dependencies:
```bash
npm install
```

3. Run the development server:
```bash
npm run dev
```

4. Open [http://localhost:3000](http://localhost:3000) in your browser.

## Building for Production

Build the application:
```bash
npm run build
```

Start the production server:
```bash
npm start
```

## 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
20 changes: 20 additions & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
--background: #000000;
--foreground: #ffffff;
}

body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
.text-balance {
text-wrap: balance;
}
}
21 changes: 21 additions & 0 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
title: "LifeStock Dashboard",
description: "Track your life pillars as a stock portfolio",
};

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className="antialiased bg-black text-white">
{children}
</body>
</html>
);
}
Loading