🏢 WorkNest Client

Modern Multi-Tenant ERP Frontend for SaaS Companies

A production-ready enterprise workspace built with React, TypeScript, Vite, and Tailwind CSS, designed for modern organizations that require scalable multi-tenant architecture, role-based access control, realtime collaboration, and a beautiful user experience.

🚀 One Frontend. Unlimited Companies.

WorkNest Client provides a complete SaaS workspace where every organization operates securely within its own isolated tenant while sharing a single application instance.

Designed with enterprise scalability, modern UI/UX, and clean architecture principles.

✨ Overview

WorkNest Client is the frontend application of the WorkNest Multi-Tenant ERP Platform.

It delivers a modern workspace where employees, managers, HR teams, tenant administrators, and platform administrators collaborate through a single application while maintaining complete tenant isolation.

Unlike traditional ERP systems that require individual deployments per organization, WorkNest follows a Software-as-a-Service (SaaS) architecture where multiple organizations securely share one platform without exposing each other's data.

The frontend communicates with the Spring Boot backend through secure REST APIs and WebSocket connections, providing real-time collaboration, authentication, analytics, notifications, and business operations.

🌟 Why WorkNest?

Modern businesses require far more than simple employee management.

WorkNest combines all essential workplace operations into one integrated platform.

✔ Employee Management

✔ Team Collaboration

✔ Project Management

✔ Task Boards

✔ Attendance Tracking

✔ Leave Management

✔ HR Operations

✔ Internal Announcements

✔ Real-time Notifications

✔ Team Chat

✔ Analytics & Reports

✔ Multi-Tenant Administration

All while maintaining enterprise-grade security and tenant isolation.

📸 Screenshots

Coming Soon

The following screenshots will be added to demonstrate the application's interface.

docs/
└── screenshots/
    ├── dashboard.png
    ├── employees.png
    ├── projects.png
    ├── kanban.png
    ├── announcements.png
    ├── notifications.png
    ├── analytics.png
    ├── reports.png
    ├── chat.png
    ├── profile.png
    ├── settings.png
    └── mobile.png

🎯 Key Features

👥 Employee Management

Manage the complete employee lifecycle from onboarding to profile management.

Employee Directory
Departments
Designations
Employment Status
Profile Management
Avatar Uploads
Contact Information

📁 Project Management

Manage projects from planning to completion.

Create Projects
Assign Members
Progress Tracking
Deadlines
Status Management
Attachments
Project Analytics

✅ Kanban Task Management

Modern drag-and-drop task boards.

Features include:

Backlog
Todo
In Progress
Review
Testing
Done

Each task supports

Priority
Assignee
Due Dates
Attachments
Comments
Activity Timeline

💬 Realtime Chat

Built-in messaging system.

Supports

Team Conversations
Direct Messaging
Live Delivery
Typing Indicators
Read Status
File Sharing (roadmap)

Powered by STOMP over WebSocket.

🔔 Notifications

Receive instant updates for

Task Assignments
Leave Requests
Announcements
Team Updates
Project Changes
Chat Messages
System Events

📢 Announcements

Organization-wide communication.

Supports

Rich Content
Pinning
Scheduling (roadmap)
Permission-based Editing
Company Visibility

📊 Analytics

Interactive dashboards including

Employee Statistics
Attendance Trends
Leave Analytics
Project Progress
Task Completion
Organization KPIs

🏢 Multi-Tenant SaaS

Every company operates independently.

Each tenant has

Users
Employees
Teams
Projects
Tasks
Notifications
Storage
Reports

All isolated from every other organization.

🛠 Technology Stack

Layer	Technology
Framework	React 19
Language	TypeScript
Build Tool	Vite
Styling	Tailwind CSS v4
Routing	React Router
State Management	Zustand
Data Fetching	TanStack Query
HTTP Client	Axios
Icons	Lucide React
Forms	React Hook Form
Validation	Zod
Realtime	STOMP over WebSocket
Charts	Recharts
File Upload	Multipart Uploads
Authentication	JWT
Storage	Supabase (Backend Managed)
Deployment	Docker + Nginx + Dokploy
Testing	Vitest + Testing Library

🏗 System Architecture

                   Browser
                       │
                       │
                       ▼
             React + TypeScript
                       │
                       │
              React Router + Layouts
                       │
                       ▼
          TanStack Query + Zustand
                       │
                       ▼
                 Axios Client
                       │
        ┌──────────────┴──────────────┐
        │                             │
        ▼                             ▼
 REST API Requests            WebSocket (STOMP)
        │                             │
        └──────────────┬──────────────┘
                       ▼
             Spring Boot Backend
                       │
                       ▼
              Multi-Tenant MySQL
                       │
                       ▼
            Supabase Object Storage

🎨 Design Philosophy

WorkNest follows several core UI principles.

Modern

A clean interface inspired by today's leading SaaS platforms.

Fast

Lazy-loaded pages and optimized rendering ensure excellent performance.

Consistent

Shared design tokens maintain consistency across every module.

Responsive

Designed for desktops, tablets, and mobile devices.

Accessible

Keyboard navigation, semantic HTML, and accessible components are used wherever possible.

🚀 Core Modules

Module	Status
Dashboard	✅
Authentication	✅
Employees	✅
Teams	✅
Projects	✅
Tasks	✅
Attendance	✅
Leave	✅
Chat	✅
Notifications	✅
Announcements	✅
Reports	✅
Analytics	✅
Settings	✅
Platform Console	✅

📦 Repository

WorkNest-Client
│
├── React 19
├── TypeScript
├── Vite
├── Tailwind CSS
├── Zustand
├── TanStack Query
├── STOMP WebSocket
└── Docker Ready

📂 Project Structure

WorkNest follows a feature-first architecture that separates business domains from shared infrastructure. Each module owns its own components, pages, services, hooks, and types, making the codebase scalable and easier to maintain.

src
│
├── app/
│   ├── layouts/
│   ├── providers/
│   ├── router/
│   ├── guards/
│   └── App.tsx
│
├── assets/
│   ├── images/
│   ├── icons/
│   └── illustrations/
│
├── components/
│   ├── common/
│   ├── layout/
│   ├── ui/
│   ├── forms/
│   ├── feedback/
│   └── navigation/
│
├── hooks/
│
├── modules/
│   ├── analytics/
│   ├── announcements/
│   ├── attendance/
│   ├── auth/
│   ├── chat/
│   ├── dashboard/
│   ├── employees/
│   ├── leave/
│   ├── notifications/
│   ├── platform/
│   ├── profile/
│   ├── projects/
│   ├── reports/
│   ├── settings/
│   ├── tasks/
│   └── teams/
│
├── services/
│   ├── api/
│   ├── auth/
│   ├── realtime/
│   ├── uploads/
│   └── storage/
│
├── store/
│
├── styles/
│
├── types/
│
├── utils/
│
└── main.tsx

🏛 Architecture Overview

The client follows a layered architecture to separate presentation, business logic, infrastructure, and shared utilities.

┌─────────────────────────────┐
│        React Pages          │
└─────────────┬───────────────┘
              │
              ▼
┌─────────────────────────────┐
│    Feature Components       │
└─────────────┬───────────────┘
              │
              ▼
┌─────────────────────────────┐
│     Custom Hooks            │
└─────────────┬───────────────┘
              │
              ▼
┌─────────────────────────────┐
│ Feature Services / Queries  │
└─────────────┬───────────────┘
              │
              ▼
┌─────────────────────────────┐
│ Axios API Client            │
└─────────────┬───────────────┘
              │
              ▼
       Spring Boot Backend

Each layer has a single responsibility and communicates only with the layer directly below it.

🧩 Module-Based Development

Instead of grouping files by type, WorkNest groups them by business domain.

Example:

modules/
└── employees/
    ├── components/
    ├── hooks/
    ├── pages/
    ├── services/
    ├── types/
    ├── utils/
    └── index.ts

Benefits:

High cohesion
Better scalability
Easier onboarding
Independent feature evolution
Reduced coupling

🔐 Authentication

Authentication is handled using JWT access and refresh tokens.

Login Flow

User
 │
 │ Login
 ▼
React Form
 │
 ▼
Axios Client
 │
 ▼
Spring Boot API
 │
 ▼
Validate Credentials
 │
 ▼
Access Token
Refresh Token
User Details
 │
 ▼
Frontend Session

After authentication:

User profile is loaded
Permissions are resolved
Tenant information is initialized
Navigation is generated dynamically

🔄 Session Lifecycle

Application Starts
        │
        ▼
Check Existing Session
        │
        ▼
Access Token Valid?
     │         │
     │         │
    Yes       No
     │         │
     │         ▼
     │   Refresh Token
     │         │
     │         ▼
     │  New Access Token
     │
     ▼
Continue Application

If refresh fails:

Clear Session
        │
        ▼
Redirect Login

🛡 Authorization

WorkNest uses Permission-Based Authorization instead of relying only on user roles.

Every page, button, menu item, API request, and action is validated against permissions.

User
 │
 ▼
Permissions
 │
 ▼
PermissionGuard
 │
 ▼
Page Visible?
 │
 ├── Yes
 │
 └── No
        │
        ▼
Unauthorized Screen

👥 Supported Roles

Role	Description
PLATFORM_ADMIN	Platform management
TENANT_ADMIN	Company administration
HR	Human resource operations
MANAGER	Team management
EMPLOYEE	Daily workspace access

🔑 Permission System

Permissions are more granular than roles.

Examples include:

Employee.Read
Employee.Create
Employee.Update
Employee.Delete
Project.Read
Project.Manage
Announcement.Manage
Team.Manage
Attendance.View

This enables flexible tenant-specific access policies.

🏢 Multi-Tenant Architecture

WorkNest is built around complete tenant isolation.

                    WorkNest Platform
                           │
        ┌──────────────────┼──────────────────┐
        │                  │                  │
        ▼                  ▼                  ▼
     Company A         Company B         Company C
        │                  │                  │
 Employees          Employees         Employees
 Projects           Projects          Projects
 Tasks              Tasks             Tasks
 Chat               Chat              Chat
 Reports            Reports           Reports

Each tenant operates independently while sharing the same frontend application.

🧭 Routing Architecture

The application is divided into three major route groups.

/
│
├── Public
│
├── Authentication
│
├── Tenant Workspace
│
└── Platform Console

Example:

/

/login

/register

/reset-password

/app/dashboard

/app/employees

/app/projects

/app/tasks

/app/chat

/app/reports

/platform/dashboard

/platform/tenants

/platform/users

🚪 Route Guards

Routes are protected using dedicated guard components.

Request Route
      │
      ▼
Authentication Guard
      │
      ▼
Permission Guard
      │
      ▼
Tenant Guard
      │
      ▼
Page

This prevents unauthorized content from rendering.

🌐 API Communication

All backend communication passes through a centralized Axios client.

Responsibilities include:

Base URL configuration
JWT injection
Tenant header injection
Automatic token refresh
Error normalization
Request retries
File uploads
Download helpers

🔄 API Flow

React Component
       │
       ▼
Feature Service
       │
       ▼
Axios Instance
       │
       ▼
Request Interceptors
       │
       ▼
Spring Boot API
       │
       ▼
Response Interceptors
       │
       ▼
TanStack Query
       │
       ▼
React UI

📦 State Management

WorkNest uses Zustand for lightweight global state.

Examples include:

Authentication
Current User
Active Tenant
Theme
Notifications
Sidebar State
Preferences

Feature-specific server state is managed with TanStack Query, keeping API data synchronized with the backend.

⚡ Data Fetching

TanStack Query provides:

Automatic caching
Background refetching
Loading states
Error handling
Request deduplication
Optimistic updates (where applicable)
Mutation management

This significantly reduces boilerplate while improving responsiveness.

🧠 Custom Hooks

The application exposes reusable hooks for common functionality.

Examples include:

useAuth()

useCurrentUser()

usePermission()

useTheme()

useNotifications()

useRealtime()

useDebounce()

usePagination()

usePageTitle()

These hooks encapsulate reusable logic and keep components focused on rendering.

📚 Design Principles

WorkNest follows these engineering principles throughout the frontend:

Feature-first architecture
Separation of concerns
Composition over inheritance
Reusable UI primitives
Strong typing with TypeScript
Centralized API communication
Predictable state management
Lazy-loaded modules
Permission-driven rendering
Clean and maintainable codebase

⚡ Realtime Architecture

WorkNest provides a realtime experience for collaboration, communication, and operational awareness.

The frontend communicates with the backend using native WebSockets with the STOMP protocol, allowing instant updates without polling.

Current realtime features include:

💬 Team Chat
🔔 Live Notifications
📢 Announcement Events
📋 Task Updates
👥 Presence (Roadmap)
✍️ Typing Indicators (Roadmap)
📁 Live File Events (Roadmap)

🛰 Realtime Architecture

                     Browser
                        │
                        ▼
              STOMP Client Service
                        │
                        ▼
                Native WebSocket
                        │
                        ▼
               Spring Boot Backend
                        │
              Simple Message Broker
                        │
        ┌───────────────┼────────────────┐
        │               │                │
        ▼               ▼                ▼
   Notifications      Chat          Task Events

The client maintains a single WebSocket connection and subscribes to multiple STOMP destinations depending on the authenticated user and active tenant.

💬 Chat System

The chat module enables real-time communication between team members.

Current capabilities include:

Team conversations
Direct messaging
Live message delivery
Automatic reconnection
Message history
Read status
Attachment-ready architecture

Future enhancements:

Voice messages
Emoji reactions
Message editing
Message deletion synchronization
Online presence
Typing indicators
File previews

Chat Flow

User Types Message
        │
        ▼
React Component
        │
        ▼
Chat Service
        │
        ▼
STOMP SEND
        │
        ▼
Spring Boot
        │
        ▼
Broker
        │
        ▼
Subscribed Clients
        │
        ▼
React UI Updates

🔔 Notification System

Notifications are system-generated events triggered by backend business logic.

Examples:

New task assigned
Leave approved
Leave rejected
Announcement published
Project updated
Team invitation
Password changed
Employee onboarded

Notifications are delivered instantly over WebSocket and displayed within the application's notification center.

Notification Flow

Backend Event
      │
      ▼
Notification Service
      │
      ▼
STOMP Topic
      │
      ▼
Frontend Subscription
      │
      ▼
Notification Store
      │
      ▼
Notification Center

📁 File Upload System

WorkNest follows a backend-mediated upload architecture.

The browser never communicates directly with object storage.

Instead, uploads flow through the backend to ensure validation, authorization, and centralized storage management.

Upload Architecture

User
 │
 ▼
Choose File
 │
 ▼
React Upload Component
 │
 ▼
Axios Multipart Request
 │
 ▼
Spring Boot Upload API
 │
 ▼
Supabase Storage
 │
 ▼
Metadata Returned
 │
 ▼
Database Record Updated

Supported upload types include:

Profile images
Leave documents
Project attachments
Task attachments
Organization logos
Future media uploads

🪣 Storage Integration

The frontend is storage-provider agnostic.

It never embeds storage credentials or bucket logic.

Instead, it consumes URLs returned by the backend.

Benefits:

Storage provider can change without frontend changes
Better security
Consistent upload validation
Centralized access control
Simplified browser code

Current production target:

Supabase Storage

Future supported providers:

Amazon S3
Cloudflare R2
MinIO
Azure Blob Storage

🌐 Environment Configuration

WorkNest uses Vite environment variables for runtime configuration.

Example:

VITE_API_BASE_URL=http://localhost:8080

VITE_WS_URL=ws://localhost:8080/ws

VITE_REALTIME_DISABLED=false

VITE_CHAT_TOPICS=/topic/chat.global,/user/queue/chat

VITE_NOTIFICATIONS_TOPICS=/topic/notifications.global,/user/queue/notifications

Production Example

VITE_API_BASE_URL=https://api.worknest.example

VITE_WS_URL=wss://api.worknest.example/ws

VITE_REALTIME_DISABLED=false

Never expose secrets inside VITE_* variables.

The frontend should never contain:

Database passwords
JWT signing keys
SMTP credentials
Service-role keys
Cloud provider secrets

⚙ Runtime Configuration

The frontend supports runtime configuration without rebuilding Docker images.

Configuration values are injected through a generated runtime configuration file, allowing deployments to update API endpoints and related settings without creating a new frontend build.

Typical runtime settings include:

API Base URL
WebSocket URL
Feature Flags
Environment Name

🐳 Docker Support

The frontend is fully containerized.

Production image stack:

Node.js
     │
npm build
     │
Vite Production Build
     │
Static Assets
     │
Nginx

Docker Architecture

Docker Build
      │
      ▼
Node Builder Stage
      │
      ▼
npm install
      │
      ▼
npm run build
      │
      ▼
dist/
      │
      ▼
Nginx Runtime Image

Benefits:

Small production image
Fast startup
Static asset serving
Efficient caching
Easy deployment

🖥 Local Development

Install dependencies

npm install

Start development server

npm run dev

Default development server:

http://localhost:5173

Production build

npm run build

Preview production build

npm run preview

Lint

npm run lint

Run Tests

npm test

or

npm run test:run

📦 Build Pipeline

Git Pull
    │
    ▼
npm install
    │
    ▼
TypeScript Compile
    │
    ▼
Vite Production Build
    │
    ▼
Static Assets Generated
    │
    ▼
Docker Image
    │
    ▼
Nginx

🚀 Deployment Targets

The frontend has been designed to deploy consistently across multiple platforms.

Supported deployment targets include:

Platform	Status
Docker	✅
Dokploy	✅
Nginx	✅
Vercel	✅
Netlify	✅
Azure Static Web Apps	✅
GitHub Pages (static only)	✅

🔧 Recommended Development Tools

For the best development experience, the following tools are recommended:

Tool	Purpose
Visual Studio Code	Editor
Node.js 20+	Runtime
npm	Package Manager
Docker Desktop	Containers
Postman	API Testing
Chrome DevTools	Debugging
React Developer Tools	Component Inspection

📈 Development Workflow

Feature Branch
      │
      ▼
Development
      │
      ▼
Code Review
      │
      ▼
Testing
      │
      ▼
Production Build
      │
      ▼
Docker Image
      │
      ▼
Dokploy Deployment

💡 Engineering Goals

The frontend is designed around the following engineering principles:

Clean Architecture
Component Reusability
Feature Isolation
Strong Type Safety
Responsive UI
Accessibility
Maintainability
Scalability
Performance
Enterprise Readiness

🚀 Production Deployment

WorkNest Client is designed to be deployed as a stateless frontend application behind a reverse proxy.

The recommended production stack is:

                 Internet
                     │
                     ▼
              Traefik / Nginx
                     │
                     ▼
              WorkNest Client
             (React + Nginx)
                     │
        HTTPS REST & WebSocket
                     │
                     ▼
          WorkNest Spring Backend
                     │
                     ▼
            Multi-Tenant MySQL

The frontend does not communicate directly with the database or object storage. Every request flows through the backend API.

🐳 Docker Deployment

The application is distributed as a lightweight Docker container.

Production container:

Node.js
     │
     ▼
npm install
     │
     ▼
npm run build
     │
     ▼
Static Assets
     │
     ▼
Nginx

The final runtime image only contains static files and Nginx.

No Node.js runtime is required in production.

📦 Production Build

Generate an optimized production bundle.

npm install

npm run build

Preview locally:

npm run preview

Output:

dist/

This directory is copied into the production Nginx image.

🌍 Deployment Platforms

WorkNest Client has been designed to run on multiple hosting platforms.

Platform	Supported
Dokploy	✅
Docker	✅
Nginx	✅
Vercel	✅
Netlify	✅
Azure Static Web Apps	✅
GitHub Pages*	✅

GitHub Pages is suitable only for static deployments and requires API endpoints to be publicly accessible.

🚢 Dokploy Deployment

Recommended production deployment:

GitHub Repository
        │
        ▼
Dokploy
        │
        ▼
Docker Build
        │
        ▼
Nginx Container
        │
        ▼
Traefik
        │
        ▼
HTTPS

Typical deployment process:

Connect the GitHub repository.
Configure environment variables.
Deploy the application.
Assign a domain.
Enable HTTPS.
Verify runtime configuration.

🌐 Runtime Environment

Instead of rebuilding for every environment, WorkNest supports runtime configuration.

Typical production configuration:

VITE_API_BASE_URL=https://api.worknest.com

VITE_WS_URL=wss://api.worknest.com/ws

VITE_REALTIME_DISABLED=false

The frontend reads these values during startup, allowing the same Docker image to be reused across environments.

🔄 Request Lifecycle

Browser
   │
   ▼
React Component
   │
   ▼
Axios Client
   │
   ▼
JWT Interceptor
   │
   ▼
HTTPS Request
   │
   ▼
Spring Boot API
   │
   ▼
JSON Response
   │
   ▼
TanStack Query Cache
   │
   ▼
React UI

🔐 Security

Security is built into every layer of the frontend.

Authentication

✔ JWT Authentication

✔ Automatic Session Restoration

✔ Token Refresh

✔ Route Protection

Authorization

Permission-based UI rendering.

Every page validates:

Authentication
Active Tenant
Permissions
Feature Access

Unauthorized pages never render protected content.

API Protection

The frontend automatically:

Attaches Bearer Tokens
Adds Tenant Headers
Refreshes expired sessions
Handles unauthorized responses
Normalizes API errors

Storage Security

Uploads are always backend-mediated.

The frontend never contains:

❌ Database Passwords

❌ SMTP Credentials

❌ JWT Signing Keys

❌ Storage Service Role Keys

Only public runtime configuration belongs inside the browser bundle.

⚡ Performance Optimizations

WorkNest is optimized for enterprise-scale applications.

Current optimizations include:

✅ Route-based code splitting

✅ Lazy-loaded modules

✅ Dynamic imports

✅ Shared component reuse

✅ React.memo where appropriate

✅ Efficient state updates

✅ TanStack Query caching

✅ Request deduplication

✅ Background refetching

✅ Optimized production builds

📈 Bundle Strategy

Application
      │
      ▼
Route Splitting
      │
      ▼
Lazy Components
      │
      ▼
Shared Vendor Chunks
      │
      ▼
Browser Cache

Only required JavaScript is downloaded when a page is visited.

🧠 Caching Strategy

The frontend uses TanStack Query to reduce unnecessary API requests.

Benefits include:

Automatic caching
Background synchronization
Optimistic updates
Request deduplication
Automatic retries
Cache invalidation

📱 Responsive Design

WorkNest is responsive across modern devices.

Supported layouts:

Device	Supported
Desktop	✅
Laptop	✅
Tablet	✅
Mobile	✅

Responsive techniques include:

CSS Grid
Flexbox
Responsive breakpoints
Adaptive navigation
Mobile-friendly layouts

🌍 Browser Support

Browser	Status
Chrome	✅
Edge	✅
Firefox	✅
Safari	✅

Modern evergreen browsers are fully supported.

♿ Accessibility

WorkNest aims to provide an accessible user experience.

Features include:

Semantic HTML
Keyboard navigation
Visible focus indicators
Accessible form controls
Responsive typography
ARIA attributes where appropriate

Accessibility improvements will continue as the platform evolves.

🎨 UI & UX Principles

The interface is designed around modern SaaS best practices.

Core principles:

Minimal visual clutter
Consistent spacing
Predictable navigation
Fast interactions
Responsive layouts
Smooth animations
Reusable design system
User-centered workflows

📊 Monitoring & Error Handling

The frontend includes centralized error handling.

Capabilities:

API error normalization
Loading states
Empty states
Retry handling
Graceful fallbacks
Toast notifications
Authentication failure recovery

🔮 Future Enhancements

Planned improvements include:

Offline support
Progressive Web App (PWA)
Push Notifications
Theme customization
Multi-language support
Calendar integration
AI-powered insights
Advanced analytics
Real-time collaboration enhancements

🛡 Production Checklist

Before deploying to production, verify:

🧪 Testing

WorkNest Client includes a modern testing setup to ensure application reliability and maintainability.

Testing Stack

Tool	Purpose
Vitest	Unit Testing
Testing Library	Component Testing
jsdom	Browser Environment
ESLint	Static Analysis
TypeScript	Type Safety

Running Tests

Run all tests:

npm test

Run tests once:

npm run test:run

Watch mode:

npm run test

Linting

Run ESLint:

npm run lint

Production Build Verification

Before every deployment:

npm install

npm run lint

npm run test:run

npm run build

The production build should complete without warnings or errors.

📋 Recommended Development Workflow

Issue
   │
   ▼
Create Feature Branch
   │
   ▼
Development
   │
   ▼
Testing
   │
   ▼
Code Review
   │
   ▼
Merge
   │
   ▼
Production Build
   │
   ▼
Docker Image
   │
   ▼
Deployment

🌱 Branch Strategy

Recommended Git workflow:

main
│
├── develop
│
├── feature/auth
│
├── feature/chat
│
├── feature/tasks
│
├── feature/dashboard
│
└── hotfix/*

📦 Release Strategy

Recommended versioning:

v1.0.0

v1.1.0

v1.2.0

v2.0.0

Semantic Versioning:

MAJOR – Breaking changes
MINOR – New features
PATCH – Bug fixes

🛣 Roadmap

The following improvements are planned for future releases.

User Experience

Collaboration

Productivity

Reporting

HR

Platform

🤝 Contributing

Contributions are welcome.

If you would like to improve WorkNest:

Fork the repository.
Create a feature branch.

git checkout -b feature/new-feature

Commit your changes.

git commit -m "Add new feature"

Push your branch.

git push origin feature/new-feature

Open a Pull Request.

Please ensure that:

Code is formatted consistently.
Tests pass.
The project builds successfully.
Documentation is updated when necessary.

📖 Documentation

Additional documentation may include:

docs/

├── architecture/
├── deployment/
├── api/
├── screenshots/
├── assets/
├── diagrams/
├── contributing.md
├── coding-standards.md
└── changelog.md

📷 Screenshots

The following screenshots are recommended for this repository:

docs/screenshots/

dashboard.png

employees.png

projects.png

tasks.png

kanban.png

chat.png

notifications.png

analytics.png

reports.png

attendance.png

leave.png

settings.png

profile.png

platform-dashboard.png

tenant-management.png

mobile-dashboard.png

📚 Learning Resources

Useful technologies used in this project:

React
TypeScript
Vite
Tailwind CSS
Zustand
TanStack Query
Axios
WebSocket
STOMP
Docker
Nginx

🛡 Security Policy

If you discover a security vulnerability, please avoid opening a public issue.

Instead:

Contact the maintainers privately.
Include reproduction steps.
Provide logs if available.
Allow time for remediation before public disclosure.

📄 License

This project is licensed under the MIT License.

See the LICENSE file for details.

🙏 Acknowledgements

WorkNest is built using several outstanding open-source technologies.

Special thanks to the communities behind:

React
TypeScript
Vite
Tailwind CSS
TanStack Query
Zustand
Lucide
Axios
Docker
Nginx
Spring Boot
MySQL
Supabase

Without these projects, WorkNest would not be possible.

⭐ Support the Project

If you find this project useful:

⭐ Star the repository
🐛 Report issues
💡 Suggest improvements
🔀 Submit pull requests
📢 Share the project

Every contribution helps make WorkNest better.

📬 Contact

For questions, feature requests, or collaboration:

Create a GitHub Issue
Open a GitHub Discussion
Submit a Pull Request

🏢 WorkNest Client

Modern Multi-Tenant ERP Frontend

Built with ❤️ using

React • TypeScript • Vite • Tailwind CSS • Zustand • TanStack Query

Designed for scalable SaaS platforms with enterprise-grade architecture.

⭐ If you like this project, consider giving it a star!

Name		Name	Last commit message	Last commit date
docker		docker
public		public
src		src
.dockerignore		.dockerignore
.gitignore		.gitignore
Dockerfile		Dockerfile
LICENSE		LICENSE
README.md		README.md
docker-compose.yml		docker-compose.yml
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

Latest commit

History

Folders and files

Repository files navigation

🏢 WorkNest Client

Modern Multi-Tenant ERP Frontend for SaaS Companies

🚀 One Frontend. Unlimited Companies.

✨ Overview

🌟 Why WorkNest?

📸 Screenshots

🎯 Key Features

👥 Employee Management

📁 Project Management

✅ Kanban Task Management

💬 Realtime Chat

🔔 Notifications

📢 Announcements

📊 Analytics

🏢 Multi-Tenant SaaS

🛠 Technology Stack

🏗 System Architecture

🎨 Design Philosophy

Modern

Fast

Consistent

Responsive

Accessible

🚀 Core Modules

📦 Repository

📂 Project Structure

🏛 Architecture Overview

🧩 Module-Based Development

🔐 Authentication

Login Flow

🔄 Session Lifecycle

🛡 Authorization

👥 Supported Roles

🔑 Permission System

🏢 Multi-Tenant Architecture

🧭 Routing Architecture

🚪 Route Guards

🌐 API Communication

🔄 API Flow

📦 State Management

⚡ Data Fetching

🧠 Custom Hooks

📚 Design Principles

⚡ Realtime Architecture

🛰 Realtime Architecture

💬 Chat System

Chat Flow

🔔 Notification System

Notification Flow

📁 File Upload System

Upload Architecture

🪣 Storage Integration

🌐 Environment Configuration

Production Example

⚙ Runtime Configuration

🐳 Docker Support

Docker Architecture

🖥 Local Development

Install dependencies

Start development server

Production build

Preview production build

Lint

Run Tests

📦 Build Pipeline

🚀 Deployment Targets

🔧 Recommended Development Tools

📈 Development Workflow

💡 Engineering Goals

🚀 Production Deployment

🐳 Docker Deployment

📦 Production Build

🌍 Deployment Platforms

🚢 Dokploy Deployment

🌐 Runtime Environment

🔄 Request Lifecycle