A modern, full-stack IT Service Management system built with React, Node.js, and PostgreSQL.
Features • Tech Stack • Installation • Usage • Screenshots
syscare-dynamicdev_ is a comprehensive IT Service Management (ITSM) system designed to streamline service request handling, ticket management, and customer support operations. Built with modern web technologies and a sleek Cyberpunk Tech Red theme, it provides an intuitive interface for both customers and administrators.
- Service Request Submission - Customers can submit tickets with detailed descriptions
- File Attachments - Support for multiple image uploads (up to 5 files)
- Priority Selection - Low, Medium, High, and Critical priority levels
- Real-time Notifications - Instant feedback on ticket status
- Ticket Management - View, update, and resolve service requests
- Status Tracking - New → In Progress → Resolved workflow
- Admin Notes - Internal notes visible to customers
- Statistics Dashboard - Real-time charts and analytics
- Notification Bell - Real-time alerts for new tickets
- Super Admin - Full system access including admin management
- General Admin - Ticket management and customer support
Transform your ITSM into your own branded platform!
What Premium Unlocks:
- 🎨 Custom Branding Suite - Upload your company logo and rebrand the entire system with your identity
- ✨ Personalized Tagline - Replace default branding with your company slogan and messaging
- 🏷️ Custom Footer Text - Full footer customization for professional presentation
- ⏰ Flexible Activation - Choose between 1 hour (testing), 7 days, or 15 days duration
- 🔄 Hot-Swap Branding - Change branding on the fly without system restart
- 🔐 Secure License System - Advanced key-based activation for premium tier
Why Go Premium?
- Make the system truly yours with white-label capabilities
- Perfect for MSPs, IT consulting firms, and corporate deployments
- Impress clients with professional, branded service portals
- Flexible pricing with duration-based licensing
Ready to Upgrade? Scan the QR code in the App Settings panel to get your Premium License Key and unlock unlimited customization possibilities!
- JWT Authentication - Secure token-based authentication
- Password Hashing - bcrypt encryption for passwords
- Protected Routes - Secure admin access
| Technology | Description |
|---|---|
| ⚛️ React 18 | UI Library with Hooks |
| 📘 TypeScript | Type-safe JavaScript |
| ⚡ Vite | Next-gen build tool |
| 🎨 Tailwind CSS | Utility-first CSS framework |
| 🔌 Socket.io Client | Real-time communication |
| 🍞 React Hot Toast | Beautiful notifications |
| 📊 Recharts | Chart library for analytics |
| 🎯 Lucide React | Beautiful icon library |
| Technology | Description |
|---|---|
| 🟢 Node.js 18 | JavaScript runtime |
| 🚀 Express.js | Web application framework |
| 🔌 Socket.io | Real-time bidirectional communication |
| 🔐 JWT | JSON Web Token authentication |
| 🔒 bcryptjs | Password hashing |
| 📁 Multer | File upload handling |
| Technology | Description |
|---|---|
| 🐘 PostgreSQL 15 | Relational database |
| 🔧 Adminer | Database management UI |
| Technology | Description |
|---|---|
| 🐳 Docker | Containerization |
| 🐙 Docker Compose | Multi-container orchestration |
- Docker & Docker Compose
- Node.js 18+ (for local development)
- Git
-
Clone the repository
git clone https://github.com/your-username/syscare-dynamicdev.git cd syscare-dynamicdev -
Start all services
docker-compose up --build -d
-
Access the application
- 🌐 Frontend: http://localhost:5173
- 🔧 API: http://localhost:8798
- 🗄️ Adminer (DB GUI): http://localhost:8993
-
Default Admin Credentials
Email: default@localhost Password: password⚠️ Important: Change the default password immediately after first login!
The following environment variables can be configured in docker-compose.yml:
| Variable | Default | Description |
|---|---|---|
DB_HOST |
db | Database host |
DB_PORT |
5432 | Database port |
DB_USER |
admin | Database username |
DB_PASS |
password | Database password |
DB_NAME |
db | Database name |
PORT |
8798 | API server port |
JWT_SECRET |
change_this_secret_in_production | JWT signing secret |
| Field | Value |
|---|---|
| System | PostgreSQL |
| Server | db:5432 |
| Username | admin |
| Password | password |
| Database | db |
- Navigate to http://localhost:5173
- Fill in the service request form:
- Customer name and contact information
- Problem description
- Select priority level
- Attach relevant images (optional)
- Submit the request
- Track your ticket status
- Click "Admin Login" in the navigation
- Enter your credentials
- Manage tickets:
- View all service requests
- Update ticket status
- Add admin notes
- View attached images
- Access statistics and charts
- Navigate to "App Settings" tab
- Activate premium features with a license key
- Customize:
- Upload custom logo
- Change app name
- Modify tagline
- Update footer text
syscare-dynamicdev/
├── public/ # Static assets
│ ├── dynamicdev.png # Default logo
│ ├── payment-qr.jpg # Payment QR code
│ └── uploads/ # User uploaded files
├── server/ # Backend API
│ ├── index.js # Express server
│ ├── authMiddleware.js # JWT authentication
│ ├── upload-middleware.js # File upload handler
│ └── schema-migration.sql # Database schema
├── src/ # Frontend source
│ ├── components/ # React components
│ ├── pages/ # Page components
│ ├── App.tsx # Main app component
│ ├── config.ts # API configuration
│ └── index.css # Global styles
├── docker-compose.yml # Docker services
├── dockerfile # Frontend container
└── README.md # This file
Before deploying to production:
-
Change Default Credentials
- Update database password in
docker-compose.yml - Change default admin password after first login
- Set a strong
JWT_SECRET
- Update database password in
-
Environment Variables
- Use
.envfiles for sensitive data - Never commit secrets to version control
- Use
-
HTTPS
- Enable HTTPS with SSL certificates
- Use a reverse proxy (nginx, Traefik)
-
Firewall
- Restrict port access
- Only expose necessary ports
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
dynamicdev_
- GitHub: @dynamicdev-jamesdynamicdev
⭐ Star this repo if you find it useful! ⭐
Made with ❤️ and ☕