Yatouze

The Project

Yatouze is a next-generation SaaS platform designed to centralize business management. The initial problem was dispersion of tools: teams used several disparate applications for project management, human resources, accounting, and time tracking, resulting in productivity loss and data fragmentation. The business objective was to propose a unified solution allowing companies to manage all their operations from a single intuitive interface, thus reducing software costs and improving inter-team collaboration.

Technical Stack & Tools

• Frontend: Next.js 15 with App Router for a modular architecture and optimized SEO. React 18 for complex state management with TypeScript for type safety. Tailwind CSS for a consistent and responsive design system.
• UI Components: Radix UI and Shadcn UI for accessible and customizable components (modals, dropdowns, forms). dnd-kit for fluid drag-and-drop features in Kanban tables.
• State Management & Data Fetching: TanStack React Query for cache management and server data synchronization. Zustand for lightweight global client state. React Hook Form with Zod for robust form validation.
• Real-time & Internationalization: Laravel Echo and Pusher/Reverb for real-time updates (notifications, collaboration). next-intl for multilingual interface support.
• Rich Text & Utilities: Tiptap for extensible rich text editor. date-fns and dayjs for date manipulation. Axios for HTTP requests with interceptors.
• Infra/Tools: Husky for automatic Git hooks. ESLint for code quality. PNPM as package manager for fast and efficient installations.

Key Features

• Interactive Kanban Dashboard with customizable column management, task drag-and-drop, and real-time project progress visualization.
• Complete Human Resources Management: collaborators, departments, profiles, work schedules, leave requests, and availability.
• Accounting and Financial Documents Module: invoices, quotes, delivery notes, credit notes, with default configuration and document management.
• Business Management: Integrated CRM for customers, sales representatives, and opportunities with sales pipeline tracking.
• Integrated Time Tracking for productivity measurement and time-based billing.
• Real-time Notification System to inform users of important updates and required actions.
• Profile and Permission Management with user roles (admin, collaborator, guest) and granular access control.

Technical Challenges & Solutions

Challenge 1: Multi-user Real-time Synchronization

Situation: Teams working simultaneously on same projects needed to see changes instantly (new tasks, status changes, comments) without page reload.

Task: Implement a real-time update system that maintains data consistency across all connected clients.

Action: Integration of Laravel Echo with Pusher/Reverb for WebSockets, coupled with React Query for automatic cache invalidation on server events. Creation of dedicated channels per project and department for targeted update distribution.

Result: Changes are instantly visible by all concerned users, with latency below 200ms, and the system elegantly handles automatic disconnections/reconnections.

Challenge 2: Performance with Large Data and Interface Complexity

Situation: The application manages hundreds of projects, thousands of tasks and collaborators, which could cause rendering slowdowns and degraded user experience.

Task: Optimize application performance while maintaining a rich and responsive interface.

Action: Implementation of server-side pagination with React Query to load data in blocks. Use of React.memo and useMemo to avoid unnecessary re-renders. Virtualization of long lists with optimized components. Implementation of an intelligent cache system that minimizes redundant API calls.

Result: Initial loading time was reduced by 60%, interactions remain fluid even with large datasets, and the application consumes 40% less memory than the initial version.