DermaTrack is a comprehensive web application designed for tracking and analyzing skin changes, specifically focused on Neurodermitis (atopic eczema) management. The project enables users to monitor skin conditions and track treatment progress over time.
Team: Bastian, Philip, Johanna, Sebastian, Sribriddhi
Repository: Bauli29/DermaTrack
Live Demo: https://derma-track.vercel.app
- Framework: Next.js (React)
- Language: TypeScript
- Styling: [Check frontend documentation]
- Testing: Jest with TypeScript support
- Coverage Target: 80% across all metrics
- Framework: Spring Boot (Java)
- Language: Java
- Database: H2 (development), PostgreSQL/MySQL (production)
- Build Tool: Maven
- Testing: JUnit with JaCoCo coverage tracking
- Frontend Hosting: Vercel
- Backend Hosting: Render
- CI/CD: GitHub Actions
- Code Quality: SonarCloud
- Metrics: CK (Class Complexity Metrics)
DermaTrack/
├── frontend/ # Next.js React application
│ ├── src/
│ │ ├── app/ # App router pages
│ │ ├── components/ # React components
│ │ ├── hooks/ # Custom React hooks
│ │ ├── lib/ # Utility functions
│ │ ├── types/ # TypeScript type definitions
│ │ └── context/ # React context providers
│ ├── jest.config.mjs # Jest testing configuration
│ └── package.json
├── backend/ # Spring Boot application
│ ├── src/
│ ├── pom.xml # Maven configuration
│ ├── mvnw / mvnw.cmd # Maven wrapper
│ └── Dockerfile # Multi-stage Docker build
├── docs/ # Documentation
│ ├── wiki/ # Wiki documentation
│ └── developer-docs/ # Developer guides
├── scripts/ # Utility scripts
│ ├── mvnw.js # Cross-platform Maven launcher
│ ├── ci/ # CI helper scripts
│ └── pre-commit/ # Git hook scripts
└── README.md # Project README
- Node.js & pnpm (frontend)
- Java 25+ & Maven (backend)
- Docker (optional, for containerized development)
From the project root:
pnpm devThis command starts both frontend and backend in development mode.
Frontend Only:
pnpm start
# or
cd frontend && pnpm devBackend Only:
npm run backend:dev
# or
cd backend && mvn spring-boot:runlocal-h2: In-memory database (recommended for daily development)local: Real database connection (requires running database)prod: Production environment settings
- Framework: Jest with ts-jest preset
- Test Environment: jsdom
- Coverage Target: 80% (statements, branches, functions, lines)
- Run Tests:
pnpm test:frontend
- Framework: JUnit with JaCoCo
- Coverage Target: 80%
- Run Tests:
mvn testornode scripts/mvnw.js test
The repository uses GitHub Actions for continuous integration:
- Automated tests on every push and pull request
- Coverage reports generated and artifacts uploaded
- SonarCloud analysis for code quality
- CK metrics for Java code complexity analysis
Run Pre-commit Coverage Check (Optional):
npx husky install
npx husky add .husky/pre-commit "node ./scripts/pre-commit-backend-coverage.js"- Organization Dashboard: SonarCloud DermaTrack
- Backend Project: SonarCloud Backend
- Frontend Project: SonarCloud Frontend
- Generated during CI pipeline
- Available as GitHub Actions artifacts
- Includes class, method, variable, and field metrics
- Useful for understanding code complexity (DIT, NOC, RFC, LCOM, CBO)
- Metrics Setup Guide - How to generate and view code metrics, CK reports, and SonarCloud analysis
- CI/CD Configuration - GitHub Actions workflows for testing and deployment
- Backend Architecture - Spring Boot structure and configuration
- Frontend Architecture - Next.js and React implementation
Access the full wiki at: DermaTrack Wiki
Key topics typically covered in wikis:
- Feature documentation
- API endpoints
- Database schema
- Setup instructions
- Troubleshooting guides
- Contributing guidelines
The application implements JWT-based authentication:
- Access Tokens: Short-lived JWT tokens for API requests
- Refresh Tokens: Long-lived tokens for session management
- Session Management: Secure cookie-based session storage
- Token Validation: Expiration checks and validation on each request
- Frontend Auth Hook:
useAuth()- React context hook for authentication - Token Utils: JWT parsing, expiration checking, and validation
- Auth Context: Centralized state management for user session
- Route Guards: Automatic redirection based on authentication status
Backend Dockerfile:
- Multi-stage build for optimized image size
- Runs on Alpine Linux with JRE 25
- Non-root user for security
- Health checks configured
- Port: 8080 (configurable via PORT environment variable)
Frontend:
- Deployed via Vercel (automatic deployments from main branch)
- Environment configuration in
.env.local
Backend:
PORT: Server port (default: 8080)SPRING_PROFILES_ACTIVE: Active Spring profileDATABASE_URL: Database connection string- See
application.ymlfor all configuration options
Frontend:
NEXT_PUBLIC_API_URL: Backend API endpointNEXT_PUBLIC_E2E: End-to-end testing flag- See
.env.examplefor complete configuration
- Create a feature branch from
main - Make your changes with test coverage
- Ensure all tests pass locally:
pnpm test - Ensure linting passes:
pnpm lint - Create a pull request with a clear description
- Wait for CI checks and code review
- Coverage: Maintain 80%+ test coverage
- Linting: Follow project ESLint and Prettier configurations
- Formatting:
pnpm formatfor auto-formatting - Types: Use TypeScript for type safety
Enable pre-commit checks to catch coverage issues before pushing:
npx husky install| File | Purpose |
|---|---|
package.json |
Frontend dependencies and scripts |
backend/pom.xml |
Backend dependencies and build configuration |
scripts/mvnw.js |
Cross-platform Maven wrapper launcher |
frontend/jest.config.mjs |
Jest testing configuration |
frontend/src/types/auth.ts |
Authentication TypeScript interfaces |
frontend/src/hooks/use-auth.tsx |
Auth context hook for React components |
frontend/proxy.ts |
Next.js middleware for auth routing |
backend/Dockerfile |
Backend containerization |
.github/workflows/ |
GitHub Actions CI/CD pipelines |
docs/developer-docs/ |
Developer guides and documentation |
- Repository: https://github.com/Bauli29/DermaTrack
- Live Application: https://derma-track.vercel.app
- GitHub Wiki: https://github.com/Bauli29/DermaTrack/wiki
- SonarCloud: https://sonarcloud.io/organizations/dermatrack/projects
Q: How do I start development locally?
A: Run pnpm dev from the project root to start both frontend and backend.
Q: Which backend profile should I use?
A: Use local-h2 for quick local development (in-memory database).
Q: Where do I check test coverage?
A: Frontend coverage from Jest output, backend coverage from SonarCloud dashboard or GitHub Actions artifacts.
Q: How do I deploy changes?
A: Frontend auto-deploys from main branch to Vercel. Backend requires manual deployment to Render or your hosting provider.
Q: How do I run metrics locally?
A: See Metrics Setup Guide
Last Updated: May 31, 2026
Status: Active Development
For more information, visit the DermaTrack Wiki or check the Repository README.