paul/task-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add full language translation support with German option

Browse Source 
Implement i18next and react-i18next for internationalization, adding English and German translations with a language selector in settings.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/un1X8jl
This commit is contained in:
paul-nothaft
2025-10-23 21:04:01 +00:00
parent 32d3126dc9
commit 3c16c1385a
2 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
replit.md
+15
View File
@@ -8,6 +8,15 @@ TaskFlow is a modern, mobile-first personal task management application designed
Preferred communication style: Simple, everyday language.
## Recent Changes
### Multilingual Support (October 2025)
- Added full internationalization (i18n) support using react-i18next
- Implemented English and German language translations
- Created Settings page with language selector
- Language preference persists in localStorage
- All UI components translated: TaskList, Calendar, Kanban, Task Creation, Navigation, Settings
## System Architecture
### Frontend Architecture
@@ -20,6 +29,8 @@ Preferred communication style: Simple, everyday language.
**Styling Approach**: Implements Tailwind CSS for utility-first styling with custom CSS variables for theming. The design system supports automatic dark/light mode switching and maintains consistent spacing using Tailwind's spacing units.
**Internationalization**: Implements i18next and react-i18next for multilingual support. Currently supports English (default) and German translations. Language preference is stored in localStorage and persists across sessions. Translation files are organized in JSON format at `client/src/i18n/locales/`.
**Mobile-First Responsive Design**: The interface is fully optimized for mobile devices with adaptive layouts that efficiently use screen space across all viewport sizes:
- **Responsive Container**: Main layout uses responsive padding (px-3/py-4 on mobile, px-4/py-6 on desktop) with max-w-screen-2xl constraint to prevent excessive horizontal spread on large screens
- **Calendar Grid Breakpoints**: Adapts from 2 columns on mobile (375px), to 3 columns on small tablets (640px), 5 columns on tablets (768px), and full 7-column week view on desktop (1024px+)
@@ -111,4 +122,8 @@ Preferred communication style: Simple, everyday language.
- **connect-pg-simple**: PostgreSQL session store for Express.js applications
- **Express Session**: Server-side session management middleware
### Internationalization
- **i18next**: Internationalization framework for managing translations
- **react-i18next**: React bindings for i18next, providing hooks and components for translation
The application architecture prioritizes developer experience, type safety, and scalability while maintaining a clean separation between frontend components, server logic, and data persistence layers.