DesignSight - AI-Powered Design Feedback Platform

A comprehensive web application that uses AI to analyze design mockups and provide detailed feedback on UI/UX elements, accessibility, and user experience improvements.

🚀 Quick Start with Docker

Prerequisites

• Docker Desktop installed and running
• Git (to clone the repository)

1. Clone and Start Application

# Clone the repository
git clone https://github.com/Ajay702/Design-Sight.git
cd Design-Sight

# Start all services with Docker Compose
docker-compose -f docker-compose.simple-working.yml up

# Or run in detached mode (background)
docker-compose -f docker-compose.simple-working.yml up -d

2. Access the Application

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000
• Health Check: http://localhost:5000/health

3. Stop the Application

# Stop all services
docker-compose -f docker-compose.simple-working.yml down

# Stop and remove volumes (clean slate)
docker-compose -f docker-compose.simple-working.yml down -v

4. View Logs (if needed)

# View all logs
docker-compose -f docker-compose.simple-working.yml logs

# View specific service logs
docker-compose -f docker-compose.simple-working.yml logs backend
docker-compose -f docker-compose.simple-working.yml logs frontend
docker-compose -f docker-compose.simple-working.yml logs mongodb

---

📋 Features

Core Functionality

• AI-Powered Analysis: Uses Google Vision API to analyze design mockups
• Design Feedback: Provides detailed feedback on UI/UX elements
• Project Management: Organize designs into projects
• Image Upload: Support for various image formats (PNG, JPG, JPEG)
• Export Options: Export feedback as JSON for further analysis
• Real-time Status: Track analysis progress with status indicators

Technical Features

• Containerized Deployment: Full Docker support with MongoDB
• RESTful API: Complete backend API for all operations
• Responsive Frontend: React-based user interface
• Database Persistence: MongoDB for data storage
• Health Monitoring: Built-in health checks and monitoring

🏗️ Architecture

Technology Stack

• Frontend: React.js, CSS3, HTML5
• Backend: Node.js, Express.js
• Database: MongoDB 7.0
• AI Service: Google Vision API
• Containerization: Docker & Docker Compose
• ODM: Mongoose for MongoDB operations

Service Architecture

┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│   Frontend  │───▶│   Backend   │───▶│   MongoDB   │
│  (React)    │    │ (Express)   │    │ (Database)  │
│  Port: 3000 │    │ Port: 5000  │    │ Port: 27017 │
└─────────────┘    └─────────────┘    └─────────────┘
                          │
                          ▼
                   ┌─────────────┐
                   │ Google      │
                   │ Vision API  │
                   └─────────────┘

📂 Project Structure

Design-Sight/
├── backend/                 # Node.js backend application
│   ├── models/             # MongoDB data models
│   ├── routes/             # API route handlers
│   ├── utils/              # Utility functions (AI analyzer)
│   ├── uploads/            # Image upload directory
│   └── tests/              # Backend tests
├── frontend/               # React frontend application
│   ├── src/                # Source code
│   ├── public/             # Static assets
│   └── package.json        # Frontend dependencies
├── data/                   # Persistent data (MongoDB, logs)
├── docker-compose.simple-working.yml  # Docker configuration
└── README.md              # This file

🔧 Configuration

Environment Variables

The application uses environment variables for configuration:

Backend (.env):

PORT=5000
MONGODB_URI=mongodb://admin:designsight123@mongodb:27017/designsight?authSource=admin
GOOGLE_CLOUD_PROJECT_ID=your-project-id
GOOGLE_APPLICATION_CREDENTIALS=path/to/service-account.json
FRONTEND_URL=http://localhost:3000

Frontend (.env):

REACT_APP_API_URL=http://localhost:5000

Google Vision API Setup

1. Create a Google Cloud Project
2. Enable Vision API
3. Create a service account and download JSON key
4. Place the key file in backend/ directory
5. Update the filename in backend/config.js

🧪 Testing

Run Tests

# Backend tests
cd backend
npm test

# Frontend tests  
cd frontend
npm test

API Testing

Use the health check endpoint to verify the backend:

curl http://localhost:5000/health

📊 API Endpoints

Projects

• GET /api/projects - List all projects
• POST /api/projects - Create new project
• GET /api/projects/:id - Get project details
• DELETE /api/projects/:id - Delete project

Images

• POST /api/projects/:id/images - Upload image to project
• GET /api/projects/:id/images - List project images
• POST /api/projects/:id/images/:imageId/analyze - Start AI analysis
• GET /api/projects/:id/images/:imageId/analysis/status - Check analysis status

Feedback

• GET /api/projects/:id/images/:imageId/feedback - Get analysis results
• POST /api/projects/:id/images/:imageId/export/json - Export feedback as JSON

🚨 Troubleshooting

Common Issues

MongoDB Connection Failed:

• Ensure Docker Desktop is running
• Try: docker-compose -f docker-compose.simple-working.yml down -v && docker-compose -f docker-compose.simple-working.yml up

Port Already in Use:

• Stop existing services: docker-compose down
• Check for running processes on ports 3000, 5000, 27017

Google Vision API Errors:

• Verify service account JSON file is present
• Check Google Cloud project has Vision API enabled
• Ensure billing is set up on Google Cloud project

Debug Commands

# Check container status
docker ps

# View container logs
docker logs designsight-backend
docker logs designsight-frontend  
docker logs designsight-mongodb

# Access MongoDB directly
docker exec -it designsight-mongodb mongosh -u admin -p designsight123 --authenticationDatabase admin

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Commit changes: git commit -m 'Add feature'
4. Push to branch: git push origin feature-name
5. Submit a pull request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Ajay702

• GitHub: @Ajay702
• Repository: Design-Sight

---