ConnectTeam Clone - Workforce Management PWA

A full-stack Progressive Web Application (PWA) that is a functional clone of ConnectTeam.com. This application provides workforce management features including shift scheduling, time tracking with location verification, task management, team communication, and a knowledge base.

Features

• Mobile-First Design: Enforces mobile viewport and mobile-first user experience
• Multi-Role Authentication: Admin, Manager, and Employee roles with JWT-based authentication
• Shift Scheduling: Create, assign, and manage work shifts
• Time Clock: Clock in/out with location verification using Apple MapKit JS
• Task Management: Create, assign, and track tasks with priorities and statuses
• Real-Time Chat: In-app messaging between team members using Socket.io
• Knowledge Base: Searchable knowledge base with categories and tags
• Admin Dashboard: Comprehensive tools for managing users, teams, and company settings
• PWA Features: Service worker for offline functionality and web app manifest for installability

Tech Stack

Frontend

• React 18
• Redux Toolkit for state management
• Tailwind CSS for styling
• React Router for navigation
• Socket.io Client for real-time communication
• Apple MapKit JS for mapping functionality
• PWA with service worker and manifest

Backend

• Node.js with Express.js
• PostgreSQL database
• Prisma ORM for database operations
• JWT for authentication
• Socket.io for real-time features
• Bcrypt for password hashing

Prerequisites

• Node.js (v16 or higher)
• PostgreSQL
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd ClockInApps

2. Install dependencies for both frontend and backend:

npm run install-all

3. Set up the database:

cd server
cp .env.example .env

4. Configure your database connection in server/.env:

DATABASE_URL="postgresql://username:password@localhost:5432/connectteam_db"
JWT_SECRET="your-super-secret-jwt-key"
JWT_EXPIRE="7d"
PORT=5000
NODE_ENV=development
CLIENT_URL=http://localhost:3000

5. Run database migrations and seed the database:

npm run db:generate
npm run db:push
npm run db:seed

Running the Application

1. Start both the frontend and backend concurrently:

npm run dev

This will start:

• Backend server on http://localhost:5000
• Frontend development server on http://localhost:3000

Demo Accounts

The following demo accounts are created when you seed the database:

• Admin: admin@connectteam.com / admin123
• Manager: manager@connectteam.com / manager123
• Employee: employee1@connectteam.com / employee123

Project Structure

ClockInApps/
├── client/                 # React frontend
│   ├── public/            # Static files and PWA assets
│   ├── src/
│   │   ├── components/    # React components
│   │   ├── services/      # API services
│   │   ├── store/         # Redux store and slices
│   │   └── App.js         # Main App component
│   ├── package.json
│   └── tailwind.config.js
├── server/                # Node.js backend
│   ├── prisma/           # Database schema and migrations
│   ├── routes/           # API routes
│   ├── middleware/       # Express middleware
│   ├── index.js          # Main server file
│   └── package.json
└── package.json          # Root package.json with scripts

API Endpoints

Authentication

• POST /api/auth/login - User login
• POST /api/auth/register - User registration
• GET /api/auth/me - Get current user

Users

• GET /api/users - Get all users (admin/manager only)
• GET /api/users/:id - Get user by ID
• PUT /api/users/:id - Update user
• DELETE /api/users/:id - Delete user (admin only)

Teams

• GET /api/teams - Get all teams
• POST /api/teams - Create team (admin/manager only)
• GET /api/teams/:id - Get team by ID
• PUT /api/teams/:id - Update team
• DELETE /api/teams/:id - Delete team (admin only)

Shifts

• GET /api/shifts - Get all shifts
• POST /api/shifts - Create shift (admin/manager only)
• GET /api/shifts/:id - Get shift by ID
• PUT /api/shifts/:id - Update shift
• DELETE /api/shifts/:id - Delete shift

Time Entries

• GET /api/time-entries - Get all time entries
• POST /api/time-entries/clock-in - Clock in
• PUT /api/time-entries/:id/clock-out - Clock out
• GET /api/time-entries/:id - Get time entry by ID
• PUT /api/time-entries/:id - Update time entry
• DELETE /api/time-entries/:id - Delete time entry (admin/manager only)

Tasks

• GET /api/tasks - Get all tasks
• POST /api/tasks - Create task
• GET /api/tasks/:id - Get task by ID
• PUT /api/tasks/:id - Update task
• DELETE /api/tasks/:id - Delete task

Chats

• GET /api/chats - Get all chats
• POST /api/chats - Create chat
• GET /api/chats/:id - Get chat by ID
• POST /api/chats/:id/messages - Send message
• DELETE /api/chats/:id - Delete chat

Notifications

• GET /api/notifications - Get all notifications
• PUT /api/notifications/:id/read - Mark notification as read
• PUT /api/notifications/read-all - Mark all notifications as read
• DELETE /api/notifications/:id - Delete notification

Knowledge Base

• GET /api/knowledge - Get all knowledge posts
• POST /api/knowledge - Create knowledge post
• GET /api/knowledge/:id - Get knowledge post by ID
• PUT /api/knowledge/:id - Update knowledge post
• DELETE /api/knowledge/:id - Delete knowledge post

PWA Features

This application is a Progressive Web App (PWA) with the following features:

• Offline Support: Service worker caches essential assets for offline functionality
• Installable: Can be installed on devices from the browser
• Responsive Design: Optimized for mobile devices with a mobile-first approach
• Push Notifications: Supports push notifications for important updates

Mobile Viewport Constraint

The application enforces a mobile viewport even when accessed on desktop browsers. The maximum width is set to 428px (iPhone Pro Max width) to ensure a consistent mobile experience across all devices.

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License.