SyncSpace is a sophisticated project collaboration platform designed to streamline team workflows and enhance productivity through intuitive project management tools. This full-stack application provides teams with a centralized workspace to create, track, and complete projects with ease.
Accounts created with email/password require activation before login. You can sign up with Google or GitHub for instant verification.
- Project Management: Create, edit, and organize projects
- Team Collaboration: Invite team members, assign roles, and track contributions
- Role-Based Access Control: Three-tiered permission system (Admin, Editor, Member) for secure collaboration
- Task Management: Create, assign, and track tasks with priority levels, due dates, and status tracking
- Real-time Communication: Integrated real-time chat system for both direct messaging and team discussions
- Email Service: Email system for account verification, password reset, project invitations, security notifications and much more
- File Management: Upload, organize, and share files within projects and tasks
- Comprehensive Dashboard: Visual overview of projects, tasks, and recent activities
- Calendar & Deadlines: Track important project milestones and deadlines
- Kanban Board View: Drag-and-drop task management with visual workflow stages
- Responsive Design: Fully mobile-responsive interface for collaboration on any device
- Flexible Subscription Plans: Three-tiered pricing (Starter, Pro, Enterprise) with different limits and features
- Stripe Integration: Secure payment processing with Stripe Checkout and Billing Portal
- Usage-Based Limits: Project and team member limits based on subscription tier
- Real-time Billing: Automatic subscription management with webhook integration
| Plan | Projects | Team Members | Storage | Price |
|---|---|---|---|---|
| Starter | 5 | 4 | 100MB | Free |
| Pro | 100 | 15 | 10GB | ₹2,499/month |
| Enterprise | Unlimited | Unlimited | 100GB | ₹6,499/month |
For demo and testing purposes, any invitation sent to "demo@syncspace.com" to join a project as a member will be automatically accepted.
- Framework: Next.js 15 with App Router
- UI: TailwindCSS with customized UI components
- Authentication: NextAuth.js with email/password and social authentication (Google, Github)
- Form Handling: React Hook Form with Zod validation
- File Uploads: UploadThing integration
- Server: Node.js with Express
- Database: PostgreSQL with Prisma ORM
- Authentication: JWT with bcrypt password hashing
- Real-time Communication: Socket.IO server
- Email Service: Integrated with Resend/SMTP for notifications
- Payment Processing: Stripe integration with webhooks for subscription management
- Docker with multi-container setup
- Docker Compose for local development and deployment
SyncSpace includes a comprehensive testing suite demonstrating modern testing practices and code quality assurance:
- Backend Tests: 40 tests covering authentication, validation, and utility functions
- Frontend Tests: 47 tests covering components, forms, and user interactions
- Total Coverage: 87 tests ensuring reliability and maintainability
- Backend: Jest, Supertest, TypeScript testing with mocked dependencies
- Frontend: Jest, React Testing Library, user event simulation
- Coverage Reporting: Detailed coverage analysis with HTML and LCOV reports
# Backend tests
cd backend
npm test
npm run test:coverage
# Frontend tests
cd frontend
npm test
npm run test:coverage
# Watch mode for development
npm run test:watch- Unit Tests: Individual function and component testing
- Integration Tests: API endpoint testing with mocked dependencies
- Component Tests: React component rendering and user interaction testing
- Security Tests: Input validation, sanitization, and authentication testing
SyncSpace is built on a modern, microservices-oriented architecture:
- Frontend Container: Next.js application serving the user interface
- Backend Container: Express API providing business logic and data access
- Database Container: PostgreSQL instance for persistent storage
The application uses a RESTful API for most operations, with Socket.io for real-time features like messaging and status updates.
- Plan Selection: Users choose from Starter, Pro, or Enterprise plans
- Stripe Checkout: Secure payment processing through Stripe Checkout
- Webhook Processing: Real-time subscription updates via Stripe webhooks
- Database Sync: Automatic subscription status and limits updates
- Billing Portal: Self-service billing management for customers
- Email Verification: Required account activation for email/password registrations
- Password Security: Enforced strong password requirements with bcrypt hashing
- Input Validation: Comprehensive request validation using Joi schemas
- HTML Sanitization: Protection against XSS attacks through input sanitization
- SQL Injection Prevention: Prisma ORM provides built-in protection against SQL injection
- CORS Configuration: Properly configured cross-origin resource sharing
- Global Rate Limiting: 1000 requests per 15 minutes per IP
- Authentication Rate Limiting: 10 login attempts per 15 minutes per IP
- Message Rate Limiting: 300 messages per minute per IP
- Targeted Protection: Specific limits for sensitive endpoints
- Helmet.js Integration: Comprehensive security headers including:
- Content Security Policy (CSP)
- X-Frame-Options (Clickjacking protection)
- X-Content-Type-Options (MIME sniffing protection)
- Referrer Policy controls
- Permissions Policy restrictions
- Docker and Docker Compose
- Node.js (v18 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/syncspace-admin/syncspace-app.git
cd syncspace-app- Set up environment variables:
cp backend/.env.example backend/.env
cp frontend/.env.example frontend/.envRequired Environment Variables:
Backend (.env):
# Database
DATABASE_URL="postgresql://username:password@localhost:5432/SyncSpace_db"
# JWT
JWT_SECRET="your-jwt-secret"
# Email (Resend/SMTP)
EMAIL_FROM="noreply@yourdomain.com"
RESEND_API_KEY="your-resend-api-key"
# Stripe
STRIPE_SECRET_KEY="sk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."
FRONTEND_URL="http://localhost:3000"
# Server
PORT=4000Frontend (.env.local):
# API
NEXT_PUBLIC_API_URL="http://localhost:4000"
# NextAuth
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-nextauth-secret"
# OAuth Providers
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"
GITHUB_CLIENT_ID="your-github-client-id"
GITHUB_CLIENT_SECRET="your-github-client-secret"
# UploadThing
UPLOADTHING_SECRET="your-uploadthing-secret"
UPLOADTHING_APP_ID="your-uploadthing-app-id"- Start the application with Docker:
docker-compose up- Set up Stripe (for subscription features):
# Install Stripe CLI
# macOS
brew install stripe/stripe-cli/stripe
# Linux/Windows - Download from https://stripe.com/docs/stripe-cli
# Login to Stripe
stripe login
# Forward webhooks to local development
stripe listen --forward-to localhost:4000/api/subscriptions/webhook
# Copy the webhook secret to your backend .env file- Access the application:
- Frontend: http://localhost:3000
- Backend API: http://localhost:4000
- Prisma Studio (database explorer): http://localhost:5555
For local development without Docker:
-
Install dependencies:
# Frontend cd frontend npm install # Backend cd backend npm install
-
Set up the database:
cd backend npx prisma migrate dev -
Start the development servers:
# Frontend cd frontend npm run dev # Backend cd backend npm run dev
© 2025 SyncSpace. All rights reserved.