DSP Timesheet App

A modern progressive web application designed for efficient timesheet management, enabling seamless work hour tracking and project activity management.

Development Lifecycle

Managed the full development process from concept to launch, including stakeholder requirements gathering, UI design, feature implementation, testing, and deployment.

gantt title Development Lifecycle dateFormat YYYY-MM-DD section Planning Requirements Gathering :done, des1, 2023-01-01, 2023-01-14 UI/UX Design :done, des2, 2023-01-15, 2023-01-28 section Development Frontend Development :active, dev1, 2023-01-29, 2023-03-15 Backend Development :active, dev2, 2023-02-12, 2023-03-22 section Testing Unit Testing : test1, 2023-03-16, 2023-03-25 Integration Testing : test2, 2023-03-20, 2023-03-30 section Deployment Staging : deploy1, 2023-03-31, 2023-04-05 Production : deploy2, 2023-04-06, 2023-04-10

System Architecture

Built with a modern microservices architecture for scalability and maintainability, featuring a React PWA frontend and Node.js backend with MySQL database.

flowchart TD subgraph Frontend A[React PWA] -->|API Calls| B[Redux Store] B --> C[Components] end subgraph Backend D[Node.js API] --> E[Auth Service] D --> F[Timesheet Service] D --> G[Reporting Service] end subgraph Database H[(MySQL)] end C <-->|REST API| D E <-->|JWT| D F <--> H G <--> H

Tech Stack

Powered by modern web technologies for optimal performance and developer experience.

pie title Tech Stack "Frontend" : 45 "Backend" : 30 "Database" : 15 "DevOps" : 10
  • React PWA Frontend
  • Node.js Backend
  • MySQL Database
  • AWS Infrastructure

Core Features

Comprehensive timesheet management with an intuitive user interface and powerful features.

journey title User Journey section Auth Login: 3: User Logout: 2: User section Timesheet Create/Edit: 4: User Submit: 3: User section Reports View/Export: 4: Manager

Progressive Web App Benefits

Leveraging modern PWA capabilities to deliver an app-like experience with the reach of the web.

graph LR A[Offline Access] --> B[Improved UX] C[Push Notifications] --> B D[Add to Home Screen] --> B E[Fast Loading] --> B F[Responsive Design] --> B B --> G[Higher Engagement]
Offline Access
Push Notifications
Fast Loading
Installable
Responsive