📚 Learning Tracker

A modern, feature-rich web application to track and manage your learning journey. Built with the latest technologies, Learning Tracker helps you organize courses, books, tutorials, and more while visualizing your progress through beautiful analytics and insights.

✨ Features

📚 Learning Management

• 📊 Learning Dashboard - View all your learning activities in one beautiful, organized dashboard
• ➕ Add Learning Entries - Easily log courses, books, tutorials, videos, and more
• 📈 Insights & Analytics - Visualize your learning progress with beautiful charts and graphs
• 🔍 Advanced Filtering - Filter and search through your learning entries with ease
• 📅 Progress Tracking - Track weekly progress and completion status

🔐 Authentication & Security

• 🔒 Secure Authentication - NextAuth.js (Auth.js v5) with credential-based authentication
• 🔑 Password Management - Secure password reset via email with token-based verification
• 🛡️ Two-Factor Authentication (2FA) - Enhanced security with TOTP-based 2FA using authenticator apps
• 👤 Profile Management - Update your profile information and change passwords
• 🔐 Protected Routes - Middleware-based route protection for authenticated pages

🌐 User Experience

• 🌍 Multi-language Support - Available in English, Arabic, and Kurdish (CKB) with full RTL support
• 🎨 Modern UI - Built with shadcn/ui components and Tailwind CSS 4
• 🌓 Dark/Light Mode - Seamless theme switching with next-themes
• 📱 Responsive Design - Works perfectly on desktop, tablet, and mobile devices
• ⚡ Fast Performance - Server-side rendering and optimized builds with Next.js 15

🚀 Tech Stack

Core

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Package Manager: Bun

UI & Styling

• Styling: Tailwind CSS 4
• UI Components: shadcn/ui
• Animations: Framer Motion
• Icons: Lucide React
• Theme Management: next-themes

Authentication & Security

• Authentication: NextAuth.js v5 (Auth.js)
• Password Hashing: bcryptjs
• Two-Factor Auth: otplib - TOTP generation
• QR Code Generation: qrcode.react
• Email Service: Resend - Password reset emails

Database & ORM

• Database: PostgreSQL (via Neon)
• ORM: Drizzle ORM

State & Data Management

• Data Fetching: TanStack Query (React Query)
• Form Handling: React Hook Form
• Validation: Zod
• URL State: nuqs

Internationalization

• i18n Framework: i18next
• React Integration: react-i18next
• Supported Languages: English, Arabic, Kurdish (CKB)

📋 Prerequisites

• Bun (v1.0 or higher) - Install Bun
• Node.js (v18 or higher) - Install Node.js

🛠️ Installation

1. Clone the repository

   git clone https://github.com/Ahmad-Softwaree/learning_tracker.git
   cd learning_tracker

2. Install dependencies

   bun install

3. Set up environment variables

   # Create a .env file in the root directory
   # Add your environment variables (see .env.example)

4. Run the development server

   bun dev

5. Open your browser Navigate to http://localhost:3000

📁 Project Structure

learning_tracker/
├── app/                      # Next.js app directory
│   ├── globals.css          # Global styles with Tailwind CSS 4
│   ├── layout.tsx           # Root layout
│   ├── page.tsx             # Home page
│   └── providers.tsx        # Context providers
├── components/              # React components
│   ├── layouts/            # Layout components (Header, Footer)
│   ├── sections/           # Page sections (Hero, Features, etc.)
│   ├── shared/             # Shared/reusable components
│   └── ui/                 # shadcn/ui components
├── i18n/                   # Internationalization
│   ├── locales/           # Translation files (en, ar, ckb)
│   └── i18n.ts            # i18next configuration
├── lib/                    # Utility functions and configs
├── hooks/                  # Custom React hooks
├── types/                  # TypeScript type definitions
└── public/                 # Static assets

🔐 Authentication Features

User Authentication

• Secure Login/Logout - Credential-based authentication with session management
• User Registration - Create new accounts with email and password
• Session Handling - Persistent sessions with automatic refresh

Password Management

• Password Reset - Email-based password reset with secure tokens
• Token Expiration - Reset tokens expire after 1 hour for security
• Change Password - Authenticated users can update their passwords
• Password Validation - Strong password requirements with confirmation

Two-Factor Authentication (2FA)

• TOTP-Based 2FA - Time-based One-Time Password using authenticator apps
• QR Code Setup - Easy setup by scanning QR code with Google Authenticator, Authy, etc.
• OTP Verification - 6-digit code verification during setup and login
• Login with 2FA - Additional security layer for users with 2FA enabled
• Enable/Disable - Users can manage 2FA settings from their profile

Profile Management

• Update Profile - Change name and email address
• Profile Security - Password confirmation required for sensitive changes
• 2FA Settings Card - Dedicated UI for managing two-factor authentication

🌐 Internationalization

Learning Tracker supports three languages:

• English (en) - Left-to-right (LTR)
• Arabic (ar) - Right-to-left (RTL)
• Kurdish (ckb) - Right-to-left (RTL)

All UI text, including authentication flows and error messages, is fully internationalized and can be easily extended with additional languages.

🎨 Customization

Color Scheme

The project uses a modern teal/cyan color scheme defined in globals.css. You can customize the colors by modifying the CSS variables in the :root and .dark selectors.

Adding New Sections

Follow the component organization guidelines in docs/component-organization.md.

📚 Documentation

• Component Organization
• UI Components
• Authentication - NextAuth.js setup, 2FA, password reset
• Internationalization
• Theme & Dark Mode
• Motion & Animations
• URL Parameters
• Package Management
• Folder & File Conventions

🤝 Contributing

Contributions are welcome! Please read the AGENTS.md file for coding standards and architecture patterns.

📄 License

This project is licensed under the MIT License.

👨‍💻 Developer

Ahmad Softwaree

• GitHub: @Ahmad-Softwaree
• Portfolio: ahmad-software.com

🙏 Acknowledgments

• Built with Next.js
• UI components from shadcn/ui
• Icons from Lucide
• Animations powered by Framer Motion