About this project
The Asment Task Manager is a powerful, modern full-stack web application designed to centralize and optimize operational task management for a multi-departmental organization. This project was a major deliverable during my internship at Asment Témara, showcasing my ability to translate real-world enterprise needs into a functional, production-ready software system with complete frontend and backend integration. The application features a comprehensive task assignment, tracking, and performance analysis system with persistent data storage. This project demonstrates my ability to implement complex business requirements across the entire stack, notably a robust Role-Based Access Control (RBAC) system, deep actionable Performance Analytics, and a RESTful API architecture. The frontend is built with React and TypeScript, styled using Tailwind CSS, resulting in a fast, highly responsive, and polished user experience with integrated Light and Dark Mode. The backend is powered by Node.js and Express, with PostgreSQL providing reliable relational data persistence, demonstrating full-stack development capabilities. ✨ Key Features Role-Based Access Control (RBAC): Implemented a secure authentication system with JWT tokens, dynamic routing, and interface adaptation for four distinct roles: Admin, Chef de Département (Department Manager), Ingénieur (Engineer), and Technicien (Technician). User credentials are securely stored with bcrypt password hashing. Departmental & Performance Analytics: A comprehensive dashboard and departmental view for tracking team performance. Utilizes Recharts to display interactive data visualizations, including completion rates, priority distribution, and productivity trends, filterable by date range, department, and status. Comprehensive Task Lifecycle: Full CRUD (Create, Read, Update, Delete) functionality for tasks with PostgreSQL persistence, supporting a five-stage lifecycle: 'À faire' (To Do), 'En cours' (In Progress), 'En attente de validation' (Pending Validation), 'Terminée' (Completed), and 'En retard' (Delayed). 📝 Guided Task Creation: A multi-step task creation wizard with templating options to standardize the process and ensure all required information is captured effectively. Task Verification System: Integrated image upload fields for "before" and "after" photos, a critical requirement for task verification before final approval, with support for file storage integration. Detailed Task View: Provides a single source of truth for each task, including a full history log of status and field changes stored in the database, an interactive comments section, and quick action buttons. 🎨 Modern UI/UX: Fully responsive design across desktop and mobile, ensuring a seamless experience for all users, regardless of device. Includes a user-controlled theme switcher (Light, Dark, System-based). 🏗️ Technical Implementation The application is engineered on a modern, scalable full-stack architecture. The frontend utilizes React with TypeScript to enforce strict type checking, resulting in a stable, maintainable, and bug-resistant codebase. Tailwind CSS enables a utility-first approach, which was key to delivering the responsive design and the custom Light/Dark theme system managed efficiently by the React Context API. The backend is built with Node.js and Express, providing a robust RESTful API with proper error handling, request validation, and secure authentication middleware. PostgreSQL serves as the relational database, with a well-structured schema featuring normalized tables for users, tasks, departments, categories, comments, and task history. Database queries are optimized for performance, and the schema includes proper foreign key relationships and constraints. Client-side navigation and protected routes are handled by React Router DOM. A core technical highlight is the integration of Recharts to handle complex, dynamic data transformations and visualizations required for the analytics dashboards, demonstrating proficiency in data-intensive full-stack development. The codebase follows a clear, component-based architecture with separate layers for UI, global state (Context/Hooks), API services, backend routes, and database models, showcasing a strong understanding of modern full-stack application design and separation of concerns. User Flow Authentication: Users log in securely with credentials validated against the PostgreSQL database, and their role determines interface access. 📊 Navigation: The Chef de Département accesses Départements to view team metrics and manage tasks. Techniciens navigate to Mes Tâches for their personal assignments. Analysis: Managers utilize the Dashboard and departmental tabs to filter and analyze performance data via interactive charts, with all data fetched from the backend API. Action: Users create new tasks via the Créer une Tâche wizard or update existing task status/details, with changes persisted to the database in real-time. Validation: Tasks marked as complete are reviewed in the Validation tab, often requiring "before" and "after" photos for final sign-off. This project showcases my ability to architect and deliver a professional-grade, production-ready full-stack application under the pressure of a real-world internship, demonstrating expertise in implementing complex business logic (like RBAC), building secure RESTful APIs, designing relational database schemas, integrating sophisticated data visualizations, and maintaining high standards for code quality and modern UI/UX design across the entire technology stack.