A modern, full-stack web application for tracking academic progress with a clean, maintainable architecture. Built with Next.js, TypeScript, and Prisma, following atomic design principles for maximum scalability and code organization.
- 🔐 Secure Authentication: PIN-based user authentication with sign-in and sign-up flows
- 📊 Course Management: Add, edit, and delete courses with comprehensive status and grade tracking
- 📈 Progress Analytics: Visual progress tracking with detailed statistics and grade analysis
- 🌍 Multi-language Support: Available in English, German, and Spanish
- 📱 Responsive Design: Seamless experience across desktop, tablet, and mobile devices
- ⚡ Real-time Updates: Dynamic course status updates with optimistic UI patterns
- 🎨 Modern UI: Clean, accessible interface built with Tailwind CSS and Shadcn
| Sign In | Sign Up | Logged In |
|---|---|---|
 |
 |
 |
| Course Creation | Overview & Statistics |
|---|---|
 |
 |
| Status View | Semester View |
|---|---|
 |
 |
- Next.js 15 - React framework with App Router
- React 19 - Latest React with concurrent features
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first CSS framework
- R - Accessible component primitives
- Lucide React - Beautiful, customizable icons
- PostgreSQL - Robust relational database
- Prisma ORM - Type-safe database client
- Next.js API Routes - Serverless API endpoints
- TanStack Query - Server state management
- Nuqs - URL state management
- React Hook Form - Performant forms with easy validation
- Zod - TypeScript-first schema validation
- ESLint - Code linting with custom rules
- Prettier - Code formatting
- TypeScript - Static type checking
- Atomic Design - Component architecture pattern
This project follows Atomic Design principles for maximum maintainability and scalability:
src/
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ │ ├── courses/ # Course management endpoints
│ │ └── user/ # User authentication endpoints
│ ├── layout.tsx # Root layout with navigation
│ └── page.tsx # Main application page
│
├── components/ # Component library (Atomic Design)
│ ├── atoms/ # Basic building blocks
│ │ ├── Button.atom.tsx # Reusable button component
│ │ ├── Text.atom.tsx # Typography component
│ │ ├── Toast.atom.tsx # Notification system
│ │ └── EmptyState.atom.tsx # Empty state displays
│ │
│ ├── molecules/ # Composite components
│ │ ├── auth/ # Authentication components
│ │ │ ├── EmailForm.molecule.tsx
│ │ │ ├── ModeSelector.molecule.tsx
│ │ │ └── LoggedInUser.molecule.tsx
│ │ ├── course/ # Course-related components
│ │ │ ├── ViewSelector.molecule.tsx
│ │ │ ├── ViewTab.molecule.tsx
│ │ │ └── CourseTabDropdown.molecule.tsx
│ │ ├── general/ # Shared/reusable components
│ │ │ ├── Card.molecule.tsx
│ │ │ ├── Navbar.molecule.tsx
│ │ │ ├── Select.molecule.tsx
│ │ │ └── LoadingSpinner.molecule.tsx
│ │ └── statistics/ # Analytics components
│ │ ├── OverviewBox.molecule.tsx
│ │ └── ProgressBar.molecule.tsx
│ │
│ ├── organisms/ # Complex, feature-complete components
│ │ ├── auth/ # Authentication flows
│ │ │ ├── Authentication.organism.tsx
│ │ │ └── AccountFinderCard.organism.tsx
│ │ ├── course/ # Course management
│ │ │ ├── CourseList.organism.tsx
│ │ │ ├── CourseTab.organism.tsx
│ │ │ ├── CreateCourse.organism.tsx
│ │ │ ├── StatusView.organism.tsx
│ │ │ ├── SemesterView.organism.tsx
│ │ │ └── CourseColumn.organism.tsx
│ │ └── statistics/ # Analytics & overview
│ │ ├── StudyOverview.organism.tsx
│ │ └── OverviewCard.organism.tsx
│ │
│ └── ui/ # Shadcn/ui components
│ ├── button.tsx # Base button primitives
│ ├── input.tsx # Form input components
│ ├── select.tsx # Dropdown components
│ └── ... # Other UI primitives
│
├── hooks/ # Custom React hooks
│ ├── useCourses.hook.tsx # Course data fetching
│ ├── useCourseMutations.hook.tsx # Course CRUD operations
│ └── useTranslation.hook.tsx # Internationalization
│
├── lib/ # Utility libraries
│ ├── prisma.ts # Database client
│ ├── react-query.ts # Query client configuration
│ └── utils.ts # General utilities
│
├── schemas/ # Validation schemas
│ ├── dynamicSchemas.ts # Dynamic form validation
│ └── schema.ts # Static schemas
│
├── translations/ # Internationalization
│ ├── en.translations.ts # English translations
│ ├── de.translations.ts # German translations
│ └── esp.translations.ts # Spanish translations
│
├── types/ # TypeScript definitions
│ ├── course.types.ts # Course-related types
│ ├── email-form.types.ts # Form types
│ └── general.types.ts # Shared types
│
└── utils/ # Utility functions
├── validation.utils.ts # Validation helpers
└── semester.utils.ts # Semester formatting
- Node.js 18+
- PostgreSQL database
- npm or yarn
-
Clone the repository:
git clone <repository-url> cd study-tracker
-
Install dependencies:
npm install
-
Set up environment variables:
cp .env.local.example .env.local
Configure your database URL and other environment variables.
-
Set up the database:
npm run prisma:migrate npm run prisma:generate
-
Run the development server:
npm run dev
-
Open http://localhost:3000 in your browser
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run start |
Start production server |
npm run lint |
Run ESLint with custom rules |
npm run format |
Format code with Prettier |
npm run ts:check |
Type check without emitting |
npm run prisma:studio |
Open Prisma Studio |
npm run prisma:migrate |
Run database migrations |
npm run prisma:generate |
Generate Prisma client |
This project implements Atomic Design methodology for component organization:
- ⚛️ Atoms: Basic building blocks (buttons, inputs, text)
- 🧬 Molecules: Groups of atoms functioning together (forms, cards)
- 🦠 Organisms: Groups of molecules forming distinct sections (headers, course lists)
- 📄 Templates: Page-level objects placing components into layout
- 📱 Pages: Specific instances of templates with real content
- 🔄 Reusability: Components can be easily reused across different parts of the application
- 🧪 Testability: Each component can be tested in isolation
- 📈 Scalability: New features can be built by composing existing components
- 🛠️ Maintainability: Changes to base components automatically propagate up
- 👥 Team Collaboration: Clear component hierarchy makes it easy for teams to work together
- PIN-based Authentication: Simple yet secure 6-digit PIN system
- User Registration: New users can create accounts with email and PIN
- Session Management: Persistent login state using URL parameters
- CRUD Operations: Full create, read, update, delete functionality
- Status Tracking: Courses can be "Open", "In Progress", or "Done"
- Grade Management: Numerical grades (1.0-6.0) with validation
- Semester Organization: Courses organized by semester (1-6)
- Progress Statistics: Visual representation of course completion
- Grade Analytics: Average grade calculation and display
- Multiple Views: Switch between status-based and semester-based organization
- Multi-language Support: English, German, and Spanish
- Dynamic Translation: Runtime language switching
- Localized Validation: Error messages in user's preferred language
This project follows strict coding standards and architectural patterns. When contributing:
- Follow the atomic design principles
- Maintain TypeScript strict mode compliance
- Use the established folder structure
- Write comprehensive tests for new components
- Ensure all linting rules pass
This project is licensed under the MIT License - see the LICENSE file for details.
Built with ❤️ using modern web technologies and clean architecture principles