Skip to content

Commit 065257f

Browse files
author
rugveddanej
committed
Initial Commit
0 parents  commit 065257f

34 files changed

+6549
-0
lines changed

‎.gitignore‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
.env

‎README.md‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
# 🚀 Elevate - Daily Habit Tracker
2+
3+
<div align="center">
4+
<img src="https://images.pexels.com/photos/6801648/pexels-photo-6801648.jpeg?auto=compress&cs=tinysrgb&w=1200&h=400&fit=crop" alt="Elevate Habit Tracker" width="100%" height="200" style="object-fit: cover; border-radius: 10px;">
5+
6+
<p align="center">
7+
<strong>Track your habits, elevate your life</strong>
8+
</p>
9+
10+
<p align="center">
11+
A beautiful, intuitive habit tracker built with React and TypeScript to help you build lasting routines and achieve your goals.
12+
</p>
13+
14+
<p align="center">
15+
<a href="#-features">Features</a> •
16+
<a href="#-demo">Demo</a> •
17+
<a href="#-installation">Installation</a> •
18+
<a href="#-usage">Usage</a> •
19+
<a href="#-tech-stack">Tech Stack</a> •
20+
<a href="#-license">License</a>
21+
</p>
22+
</div>
23+
24+
---
25+
26+
## ✨ Features
27+
28+
### 🎯 **Smart Habit Tracking**
29+
- **Flexible Scheduling**: Daily, weekly, or custom frequency habits
30+
- **Visual Progress**: Beautiful heatmap calendar showing your consistency
31+
- **Streak Tracking**: Motivational streak counters to keep you going
32+
- **Category Organization**: Organize habits by Health, Learning, Productivity, and more
33+
34+
### 📊 **Progress Analytics**
35+
- **Year Overview**: 365-day heatmap visualization of your habit consistency
36+
- **Weekly Statistics**: Track your progress with detailed weekly breakdowns
37+
- **Completion Rates**: See your success percentages at a glance
38+
- **Habit Filtering**: Focus on specific habits or view overall progress
39+
40+
### 🎨 **Beautiful Design**
41+
- **Modern UI**: Clean, intuitive interface with smooth animations
42+
- **Dark/Light Mode**: Seamless theme switching for any preference
43+
- **Responsive Design**: Perfect experience on desktop, tablet, and mobile
44+
- **Micro-interactions**: Delightful hover states and transitions
45+
46+
### 🔧 **User Experience**
47+
- **No Account Required**: Works offline with local storage
48+
- **Data Export/Import**: Backup and restore your habit data
49+
- **Quick Actions**: One-click habit completion and management
50+
- **Emoji Support**: Personalize habits with your favorite emojis
51+
52+
## 🌟 Demo
53+
54+
Experience Elevate live: [**Try Demo**](https://your-demo-link.com)
55+
56+
### Screenshots
57+
58+
<div align="center">
59+
<img src="https://images.pexels.com/photos/7688336/pexels-photo-7688336.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Dashboard" width="45%" style="margin: 10px;">
60+
<img src="https://images.pexels.com/photos/590016/pexels-photo-590016.jpg?auto=compress&cs=tinysrgb&w=800" alt="Progress View" width="45%" style="margin: 10px;">
61+
</div>
62+
63+
## 🚀 Installation
64+
65+
### Prerequisites
66+
- Node.js (v18 or higher)
67+
- npm or yarn
68+
69+
### Quick Start
70+
71+
1. **Clone the repository**
72+
```bash
73+
git clone https://github.com/yourusername/elevate-habit-tracker.git
74+
cd elevate-habit-tracker
75+
```
76+
77+
2. **Install dependencies**
78+
```bash
79+
npm install
80+
```
81+
82+
3. **Start the development server**
83+
```bash
84+
npm run dev
85+
```
86+
87+
4. **Open your browser**
88+
Navigate to `http://localhost:5173` to see Elevate in action!
89+
90+
### Build for Production
91+
92+
```bash
93+
npm run build
94+
npm run preview
95+
```
96+
97+
## 📖 Usage
98+
99+
### Getting Started
100+
101+
1. **Create Your First Habit**
102+
- Click "Add Habit" on the dashboard
103+
- Choose a name, emoji, and frequency
104+
- Select a category and start date
105+
106+
2. **Track Daily Progress**
107+
- Mark habits as complete with a single click
108+
- Watch your streaks grow day by day
109+
- View your progress on the beautiful dashboard
110+
111+
3. **Analyze Your Progress**
112+
- Visit the Progress page for detailed analytics
113+
- Use the heatmap to identify patterns
114+
- Filter by specific habits to focus your analysis
115+
116+
4. **Customize Your Experience**
117+
- Switch between light and dark themes
118+
- Export your data for backup
119+
- Organize habits by categories
120+
121+
### Habit Frequencies
122+
123+
- **Daily**: Track every day
124+
- **Weekly**: Track once per week (Sundays)
125+
- **Custom**: Choose specific days of the week
126+
127+
## 🛠️ Tech Stack
128+
129+
### Frontend
130+
- **React 18** - Modern React with hooks and concurrent features
131+
- **TypeScript** - Type-safe development experience
132+
- **Tailwind CSS** - Utility-first CSS framework for rapid styling
133+
- **Vite** - Lightning-fast build tool and development server
134+
135+
### Icons & UI
136+
- **Lucide React** - Beautiful, customizable icons
137+
- **Custom Components** - Reusable UI components built from scratch
138+
139+
### State Management
140+
- **React Context** - For theme and authentication state
141+
- **Custom Hooks** - Encapsulated logic for habit management
142+
- **Local Storage** - Persistent data storage without backend
143+
144+
### Development Tools
145+
- **ESLint** - Code linting and formatting
146+
- **TypeScript** - Static type checking
147+
- **PostCSS** - CSS processing and optimization
148+
149+
## 📁 Project Structure
150+
151+
```
152+
src/
153+
├── components/ # Reusable UI components
154+
│ ├── ui/ # Base UI components (Button, Input, Modal)
155+
│ ├── HabitCard.tsx # Individual habit display
156+
│ ├── Navigation.tsx # App navigation
157+
│ └── ThemeToggle.tsx # Theme switching
158+
├── contexts/ # React Context providers
159+
│ ├── AuthContext.tsx # Authentication state
160+
│ └── ThemeContext.tsx # Theme management
161+
├── hooks/ # Custom React hooks
162+
│ └── useHabits.ts # Habit management logic
163+
├── pages/ # Application pages
164+
│ ├── Dashboard.tsx # Main dashboard
165+
│ ├── Habits.tsx # Habit management
166+
│ ├── Progress.tsx # Analytics and progress
167+
│ └── Settings.tsx # User preferences
168+
├── types/ # TypeScript type definitions
169+
└── utils/ # Utility functions
170+
```
171+
172+
## 🎨 Design Philosophy
173+
174+
Elevate follows Apple-level design aesthetics with:
175+
176+
- **Minimalism**: Clean interfaces that focus on content
177+
- **Consistency**: Unified design language throughout the app
178+
- **Accessibility**: High contrast ratios and keyboard navigation
179+
- **Performance**: Smooth animations and fast interactions
180+
- **Responsiveness**: Seamless experience across all devices
181+
182+
## 🔒 Privacy & Data
183+
184+
- **Local Storage**: All data stays on your device
185+
- **No Tracking**: No analytics or user tracking
186+
- **Export Control**: Full control over your data with export/import
187+
- **Open Source**: Transparent codebase you can audit
188+
189+
## 🤝 Contributing
190+
191+
This is a personal project and **contributions are not currently accepted**. However, you're welcome to:
192+
193+
- 🐛 Report bugs by opening an issue
194+
- 💡 Suggest features through discussions
195+
- ⭐ Star the repository if you find it useful
196+
- 🍴 Fork the project for your own modifications
197+
198+
## 📄 License
199+
200+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
201+
202+
## 🙏 Acknowledgments
203+
204+
- **Design Inspiration**: Modern productivity apps and minimalist design principles
205+
- **Icons**: [Lucide](https://lucide.dev/) for beautiful, consistent iconography
206+
- **Images**: [Pexels](https://pexels.com/) for high-quality stock photography
207+
- **Community**: React and TypeScript communities for excellent tooling
208+
209+
---
210+
211+
<div align="center">
212+
<p>Built with ❤️ for habit enthusiasts everywhere</p>
213+
214+
<p>
215+
<a href="https://github.com/yourusername/elevate-habit-tracker/stargazers">⭐ Star this repo</a> •
216+
<a href="https://github.com/yourusername/elevate-habit-tracker/issues">🐛 Report Bug</a> •
217+
<a href="https://github.com/yourusername/elevate-habit-tracker/discussions">💬 Discussions</a>
218+
</p>
219+
</div>

‎eslint.config.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js';
2+
import globals from 'globals';
3+
import reactHooks from 'eslint-plugin-react-hooks';
4+
import reactRefresh from 'eslint-plugin-react-refresh';
5+
import tseslint from 'typescript-eslint';
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
}
28+
);

‎index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Elevate - Daily Habit Tracker</title>
8+
<meta name="description" content="Track your habits, elevate your life. A beautiful, intuitive habit tracker to help you build lasting routines.">
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="/src/main.tsx"></script>
13+
</body>
14+
</html>

0 commit comments

Comments
 (0)