sharp-clients

byDev Rathod

You are a senior full-stack SaaS engineer. Build a COMPLETE working SaaS web app called "ScopePilot". IMPORTANT: - Do NOT only build database - Do NOT only design UI - Build FULL working app (frontend + navigation + visible pages) ----------------------------------- APP IDEA: ScopePilot is a tool for freelance web developers to manage: - clients - projects - scope - payments - revisions ----------------------------------- TARGET USERS: - freelance web developers - WordPress developers - frontend developers - small freelance teams ----------------------------------- MAIN GOAL: Help freelancers control: - scope creep - late payments - revision overload ----------------------------------- PAGES (MUST CREATE ALL): 1. Dashboard 2. Clients 3. Client Details 4. Projects 5. Project Details 6. Payments 7. Revisions 8. Settings ----------------------------------- NAVIGATION: - Create left sidebar - Sidebar items: Dashboard Clients Projects Payments Revisions Settings - Clicking each item must open page - No blank screens allowed ----------------------------------- DASHBOARD: Include: - summary cards: Active Clients Active Projects Pending Payments Overdue Invoices Open Revisions - sections: Projects due this week Recent revisions Overdue payments ----------------------------------- CLIENTS PAGE: - table of clients - columns: name company projects total billed - add client button - search bar ----------------------------------- CLIENT DETAILS: - client info - projects - payments - notes ----------------------------------- PROJECTS PAGE: - list or cards of projects - show: name client status deadline ----------------------------------- PROJECT DETAILS (IMPORTANT): Include: - project overview - scope included - scope excluded - milestones - revisions - payments ----------------------------------- PAYMENTS PAGE: - invoice table - columns: client amount due date status - status: paid (green) pending (yellow) overdue (red) ----------------------------------- REVISIONS PAGE: - list of revision requests - show: project client status date ----------------------------------- SETTINGS PAGE: - profile form - business name - currency - revision limit ----------------------------------- DATA: - Use dummy/sample data - Show real data in UI - Do NOT leave pages empty ----------------------------------- UI STYLE: - modern SaaS dashboard - minimal and clean - premium feel COLORS: - sidebar: #0F172A (dark) - background: #F8FAFC - primary: #3B82F6 - success: #10B981 - warning: #F59E0B - danger: #EF4444 ----------------------------------- DESIGN RULES: - no glow effects - no gradients - no flashy UI - use soft shadows - clean typography ----------------------------------- LAYOUT: - left sidebar - top header - main content area ----------------------------------- IMPORTANT RULES: - No blank pages - Every page must render UI - Navigation must work - Fix all routing issues - Make mobile responsive ----------------------------------- FINAL OUTPUT: A complete working SaaS web app where: - sidebar works - pages open correctly - UI is visible - dummy data is shown - looks like a real product ----------------------------------- DO NOT STOP until: - all pages are working - UI is fully visible - navigation works perfectly

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document

System Requirements Document (SRD) for sharp-clients

1. Introduction

The sharp-clients project is a SaaS web application designed to empower freelance web developers, WordPress developers, frontend developers, and small freelance teams. It provides tools to manage clients, projects, scope, payments, and revisions efficiently. The primary goal of sharp-clients is to help freelancers control scope creep, late payments, and revision overload, ensuring a streamlined workflow and better client relationships.

This document outlines the system requirements for the development of sharp-clients, ensuring a complete, functional, and user-friendly application.

2. System Overview

sharp-clients is a modern SaaS platform that combines intuitive navigation, clean UI design, and robust functionality to address the pain points of freelance developers. The application includes a left-sidebar navigation system, a responsive layout, and a suite of pages to manage clients, projects, payments, and revisions effectively.

The system will include:

  • A dashboard summarizing key metrics.
  • Dedicated pages for managing clients, projects, payments, and revisions.
  • A settings page for user preferences.
  • Authentication for secure access.
  • A clean, minimal, and premium UI style tailored to the needs of freelancers.
Page 1 of 7

3. Functional Requirements

As a User:

  • I should be able to log in and sign up using email and password.
  • I should see a dashboard with summary cards for active clients, active projects, pending payments, overdue invoices, and open revisions.
  • I should see sections on the dashboard for projects due this week, recent revisions, and overdue payments.
  • I should view a table of clients with columns for name, company, projects, and total billed.
  • I should be able to add a new client using an "Add Client" button.
  • I should be able to search for clients using a search bar.
  • I should view client details, including client info, projects, payments, and notes.
  • I should see a list or cards of projects with details like name, client, status, and deadline.
  • I should view project details, including an overview, scope included, scope excluded, milestones, revisions, and payments.
  • I should see an invoice table on the payments page with columns for client, amount, due date, and status (paid, pending, overdue).
  • I should see a list of revision requests with details like project, client, status, and date.
  • I should be able to update my profile, business name, currency, and revision limit in the settings page.
Page 2 of 7

4. User Personas

  1. Freelance Developer

    • Primary user of the platform.
    • Manages clients, projects, payments, and revisions.
    • Needs tools to streamline workflows and avoid scope creep.
  2. Small Freelance Team Member

    • Collaborates on projects.
    • Tracks payments and revisions for team clients.
  3. Admin

    • Oversees the platform setup.
    • Manages user accounts and settings.

5. Visuals Colors and Theme

Color Palette:

  • Background: #F8FAFC (soft light gray for a clean look)
  • Sidebar: #0F172A (dark navy for contrast and focus)
  • Primary: #3B82F6 (vibrant blue for action elements)
  • Success: #10B981 (green for positive feedback)
  • Warning: #F59E0B (orange for alerts)
  • Danger: #EF4444 (red for errors or overdue statuses)
  • Text: #1E293B (dark gray for readability)
  • Muted: #94A3B8 (light gray for secondary information)

6. Signature Design Concept

Page 3 of 7

Interactive Blueprint Dashboard

The homepage/dashboard will resemble an architectural blueprint, symbolizing the structured and organized approach sharp-clients brings to freelance workflows. Key features include:

  • Dynamic Grid Layout: Each summary card (e.g., Active Clients, Pending Payments) appears as a "blueprint block" with subtle pencil-sketch animations when hovered over.
  • Interactive Animations: Clicking on a section (e.g., Projects due this week) will "zoom in" to that section, transitioning smoothly to the relevant page.
  • Subtle Background Animation: A faint, animated grid pattern in the background reinforces the blueprint theme without being distracting.
  • Micro-Interactions: Buttons and icons will have smooth hover effects, such as a slight "pop" or color shift.
  • Color Shifts: The blueprint theme will use the primary blue (#3B82F6) as a highlight color, with muted tones for secondary elements.

This design will make the platform visually striking and memorable while maintaining a professional and premium feel.

Page 4 of 7

7. Non-Functional Requirements

  • Performance: The application should load pages within 2 seconds on a standard broadband connection.
  • Scalability: The system should support up to 10,000 users without performance degradation.
  • Security: User authentication must use secure hashing for passwords and HTTPS for all communications.
  • Responsiveness: The UI must be fully responsive and functional on devices with screen widths ranging from 320px to 1920px.
  • Localization: Default currency and date formats will be set to Indian standards (₹, DD-MM-YYYY).

8. Tech Stack

Frontend:

  • React for Web

Backend:

  • Python with FastAPI

Database:

  • MySQL (with Alembic for migrations)
Page 5 of 7

AI Tools:

  • GPT 5.4 for user-friendly responses
  • Litellm for LLM Routing

Orchestration:

  • Docker for local development
  • Kubernetes for server-side orchestration

9. Assumptions and Constraints

  • The application will initially target freelance developers in India, with localization for Indian currency and date formats.
  • Authentication will be limited to email/password for simplicity.
  • Dummy data will be used for demonstration purposes, but the system will be designed to handle real data in production.
  • The application will not include advanced analytics or reporting in the initial version.
Page 6 of 7

10. Glossary

  • Scope Creep: Uncontrolled changes or continuous growth in a project's scope.
  • Revision Overload: Excessive client requests for changes beyond the agreed scope.
  • SaaS: Software as a Service, a software distribution model in which applications are hosted by a service provider and made available to users over the internet.
  • Responsive Design: A design approach that ensures the application works well on devices of all sizes.
  • Blueprint Theme: A design concept inspired by architectural blueprints, emphasizing structure and organization.
Page 7 of 7

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No user flows yet.

The User Flow Agent will generate per-persona navigation diagrams after SRD updates.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No user flows yet.

The User Flow Agent will generate per-persona navigation diagrams after SRD updates.