Trackr - Activity Tracker

A beautiful, minimal activity tracker web app built with SvelteKit 5 and MongoDB.

Features

• 📅 Visual Calendar - See your progress at a glance with a beautiful calendar view
• ✓ Daily Check-ins - Track multiple activities and mark them as complete each day
• 📝 Journal Notes - Add notes and reflections for each day
• 👥 Community Sharing - Share your progress publicly and get inspired by others
• 🔐 SSO Authentication - Sign in with Google or Apple

Tech Stack

• Frontend: SvelteKit 5 with TypeScript
• Database: MongoDB
• Authentication: Auth.js (NextAuth) with Google and Apple OAuth
• Styling: Custom CSS with CSS variables

Setup

Prerequisites

• Node.js 18+
• MongoDB (local or Atlas)
• Google OAuth credentials
• Apple OAuth credentials (optional)

Environment Variables

Create a .env file in the root directory:

# MongoDB Connection
MONGODB_URI=mongodb://localhost:27017/activitytracker

# Auth.js Configuration
AUTH_SECRET=your-super-secret-auth-key-change-this

# Google OAuth (required)
AUTH_GOOGLE_ID=your-google-client-id
AUTH_GOOGLE_SECRET=your-google-client-secret

# Apple OAuth (optional)
AUTH_APPLE_ID=your-apple-service-id
AUTH_APPLE_SECRET=your-apple-private-key
AUTH_APPLE_TEAM_ID=your-apple-team-id
AUTH_APPLE_KEY_ID=your-apple-key-id

Google OAuth Setup

1. Go to Google Cloud Console
2. Create a new project or select existing
3. Navigate to "APIs & Services" > "Credentials"
4. Create OAuth 2.0 Client ID
5. Add authorized redirect URI: http://localhost:5173/auth/callback/google
6. Copy the Client ID and Client Secret to your .env

Installation

# Install dependencies
npm install

# Start development server
npm run dev

Production Build

npm run build
npm run preview

Project Structure

src/
├── lib/
│   ├── components/
│   │   ├── Calendar.svelte    # Main calendar component
│   │   └── DayModal.svelte    # Day detail modal
│   └── db.ts                  # MongoDB connection
├── routes/
│   ├── api/
│   │   ├── activities/        # Activity CRUD endpoints
│   │   └── entries/           # Entry endpoints
│   ├── activities/            # Activity management page
│   ├── community/             # Public entries feed
│   ├── +layout.svelte         # App layout with nav
│   └── +page.svelte           # Main calendar page
├── app.css                    # Global styles
├── app.html                   # HTML template
└── hooks.server.ts            # Auth configuration

License

MIT