Design and implement the database schema for users, clients, invoices, and line items using MariaDB.
As a frontend developer, implement the CTASection for the Landing page. This section includes a motion.div component with animations for opacity and vertical translation, triggered when the section comes into view. It features a call-to-action message encouraging freelancers to start a free trial, with a link to the Signup page. Ensure the animations are smooth and the link is styled according to the design. Page access: Freelancer only.
As a frontend developer, implement the FeaturesSection for the Landing page. This section displays a grid of feature cards, each with an SVG icon, title, description, and background color. The cards animate into view with motion.div components, using opacity and vertical translation. Ensure the icons and colors match the design specifications. Page access: Freelancer only.
As a frontend developer, implement the Footer for the Landing page. This section includes branding elements, navigation links, and copyright information. Ensure the links to restricted pages like Dashboard and Clients are conditionally shown based on the user's persona (Freelancer only). Page access: Freelancer only.
As a frontend developer, implement the HeroSection for the Landing page. This section features a complex animation sequence using motion.div components to simulate the creation, sending, and payment of an invoice. It involves multiple phases and keyframe animations for a document element. Ensure the animations are smooth and responsive. Page access: Freelancer only.
As a frontend developer, implement the HowItWorksSection for the Landing page. This section outlines the steps to using the product, with each step represented by a motion.div component that animates into view. Ensure the steps are clearly presented and the animations are consistent with the design. Page access: Freelancer only.
As a frontend developer, implement the Navbar for the Landing page. This component includes a responsive menu with a toggle button for mobile views. Ensure that links to restricted pages like Dashboard and Clients are conditionally shown based on the user's persona (Freelancer only). Page access: Freelancer only.
As a frontend developer, implement the StatsSection for the Landing page. This section displays key statistics about the product using motion.div components for animated entry. Ensure the statistics are accurate and the animations are smooth. Page access: Freelancer only.
As a frontend developer, implement the OutstandingMetric section using the MetricCard component. It displays the total outstanding amount with an upward trend icon. This section is accessible by Freelancer ONLY. Page access: Freelancer only.
As a frontend developer, implement the PaidMetric section using the MetricCard component. It shows the total paid amount with an upward trend icon. This section is accessible by Freelancer ONLY. Page access: Freelancer only.
As a frontend developer, implement the OverdueMetric section using the MetricCard component. It displays the count of overdue invoices with a badge if there are any. This section is accessible by Freelancer ONLY. Page access: Freelancer only.
As a frontend developer, implement the RevenueMetric section using the MetricCard component. It shows the monthly revenue with an upward trend icon. This section is accessible by Freelancer ONLY. Page access: Freelancer only.
As a frontend developer, implement the QuickActionsRow section which provides quick access buttons for creating invoices, adding clients, and viewing all invoices and clients. This section is accessible by Freelancer ONLY. Page access: Freelancer only.
As a frontend developer, implement the OverdueAlert section which displays an alert if there are overdue invoices, showing the count and earliest due date. It includes a dismiss button and a link to view overdue invoices. This section is accessible by Freelancer ONLY. Page access: Freelancer only.
As a frontend developer, implement the RecentInvoicesTable section which displays a table of recent invoices with mock data. It includes clickable rows that navigate to invoice details and uses status-based styling. This section is accessible by Freelancer ONLY. Page access: Freelancer only.
As a frontend developer, implement the InvoicesSearchBar section which includes a search input field with an icon for searching invoices by client or number. This section is accessible by Freelancers only and should be styled according to the provided CSS. Page access: Freelancer only.
As a frontend developer, implement the InvoicesFilterPanel section which includes filter options for invoice status and date range. This section is accessible by Freelancers only and should allow users to select statuses and date ranges, with a reset button to clear filters. Ensure the UI is styled according to the provided CSS. Page access: Freelancer only.
As a frontend developer, implement the InvoicesSortControls section which includes a dropdown for sorting invoices by various criteria such as client name, amount, due date, status, and issue date. This section is accessible by Freelancers only and should be styled according to the provided CSS. Page access: Freelancer only.
As a frontend developer, implement the InvoicesTable section which displays a list of invoices with details such as invoice number, client, amount, status, issue date, and due date. This section is accessible by Freelancers only and should include status badges styled according to the provided CSS. Ensure the table is responsive and accessible. Page access: Freelancer only.
As a frontend developer, implement the InvoicesPagination section which includes pagination controls for navigating through pages of invoices. This section is accessible by Freelancers only and should be styled according to the provided CSS. Ensure the pagination is functional and responsive. Page access: Freelancer only.
Develop authentication API endpoints for sign up, login, and logout using JWT for session management.
Create API endpoints for adding, editing, deleting, and listing clients, accessible by Freelancer only.
Implement API endpoints for creating, viewing, sending, and marking invoices as paid, accessible by Freelancer.
As a frontend developer, implement the Navbar section for the Login page. This component includes a logo, navigation links to Dashboard, Clients, and Invoices, and authentication links for Log In and Sign Up. The Navbar uses a state hook to toggle the menu open and closed. Ensure that links to restricted pages like Dashboard and Clients are conditionally shown based on the Freelancer persona access. This component may already exist from the Landing page. Page access: Freelancer only.
Design and implement the database schema for recurring billing, including tables for billing schedules and linking them to clients and invoices.
Integrate Stripe API for processing online card payments and updating invoice status to paid.
Implement role-based access control middleware to protect routes based on user roles.
Test the authentication flow including sign up, login, and logout for Freelancer.
As a frontend developer, implement the LoginHero section for the Login page. This component displays a welcoming message with a heading 'Welcome Back' and a subheading encouraging secure login to manage invoices and clients. It includes a decorative accent element for visual appeal. This section is accessible to the Freelancer persona only. Page access: Freelancer only.
As a frontend developer, implement the LoginFormInputs section for the Login page. This component includes input fields for email and password, with state management for email, password, showPassword, and rememberMe. It features a toggle button to show/hide the password and displays error states for invalid inputs. This section is accessible to the Freelancer persona only. Page access: Freelancer only.
As a frontend developer, implement the LoginFormActions section for the Login page. This component includes a submit button that displays a loading spinner when processing and a 'Forgot password?' button that triggers a callback. It also displays error messages when login fails. This section is accessible to the Freelancer persona only. Page access: Freelancer only.
As a frontend developer, implement the LoginSocialAuth section for the Login page. This component provides social login options with buttons for Google and GitHub authentication, and a prompt to sign up if the user doesn't have an account. This section is accessible to the Freelancer persona only. Page access: Freelancer only.
As a frontend developer, implement the Footer section for the Login page. This component includes branding, product links, and account links. Ensure that links to restricted pages like Dashboard and Clients are conditionally shown based on the Freelancer persona access. This component may already exist from the Landing page. Page access: Freelancer only.
As a frontend developer, implement the SignupHero section for the Signup page. This section features animated text using the motion library, highlighting key value propositions like 'No credit card required' and 'Free 14-day trial'. Ensure animations respect user preferences for reduced motion. Page access: Freelancer only.
As a frontend developer, implement the SignupFormCard component for the Signup page. This component wraps the form elements and handles form submission. It should be styled to match the design specifications. Page access: Freelancer only.
As a frontend developer, implement the SignupTrust section for the Signup page. This section highlights trust pillars with icons and descriptions, using motion for animations on scroll and hover. Page access: Freelancer only.
As a frontend developer, implement the DashboardHeader section which displays a welcome message with the business name and the current date. It includes an 'Export' button with an SVG icon for exporting the dashboard report. This section is accessible by Freelancer ONLY and depends on the Login page's Navbar implementation. Page access: Freelancer only.
Implement routing shell for the application, ensuring protected navigation for authenticated users.
Test the invoice management flow including creation, sending, and marking as paid.
As a frontend developer, implement the SignupFormInputs component for the Signup page. This component includes input fields for email, password, and confirm password, with validation and password strength indicators. It uses state hooks to manage input focus and validation errors. Page access: Freelancer only.
As a frontend developer, implement the ClientsHeader section which includes a title, description, and an 'Add Client' button with an SVG icon. The button triggers the onAddClient callback. This section is accessible by Freelancers only and depends on the DashboardHeader from the Dashboard page. Page access: Freelancer only.
As a frontend developer, implement the InvoicesPageHeader section which includes a breadcrumb navigation linking to the Dashboard and Invoices pages, a title, subtitle, and a call-to-action button to create a new invoice. This section is accessible by Freelancers only and must conditionally render links based on persona access. Ensure the breadcrumb and CTA button are styled according to the provided CSS. Page access: Freelancer only.
As a frontend developer, implement the SettingsHeader section which includes a breadcrumb navigation linking back to the Dashboard and a title for the Settings page. This section is accessible by Freelancers only and should ensure that the breadcrumb reflects the current page accurately. Page access: Freelancer only.
As a frontend developer, implement the SignupFormActions component for the Signup page. This component includes a checkbox for agreeing to terms, error handling, and a submit button with loading state animations. It uses motion for button animations. Page access: Freelancer only.
As a frontend developer, implement the ClientsSearch section which includes a search input with a clear button, status filter dropdown, and sort options. The section handles search term changes, status filter changes, and sort changes through respective callbacks. This section is accessible by Freelancers only. Page access: Freelancer only.
As a frontend developer, implement the ClientsTable section which displays a list of clients in a table format with sortable columns for name, date added, and last invoice. It includes action buttons for viewing, editing, and deleting clients. This section is accessible by Freelancers only. Page access: Freelancer only.
As a frontend developer, implement the ClientsCardGrid section which displays clients in a card grid format. Each card shows client details and includes action buttons for viewing, editing, and deleting. This section is accessible by Freelancers only. Page access: Freelancer only.
As a frontend developer, implement the ClientsPagination section which provides pagination controls for navigating through pages of clients. It includes buttons for previous, next, and specific page numbers, and displays the current range of items. This section is accessible by Freelancers only. Page access: Freelancer only.
As a frontend developer, implement the ClientsActions section which handles client addition, editing, and deletion through a modal interface. It includes form validation and error handling for client details. This section is accessible by Freelancers only. Page access: Freelancer only.
As a frontend developer, implement the SettingsNav section which provides a navigation menu with links to various settings sections such as Business Settings, Tax Settings, and more. This section uses IntersectionObserver to highlight the active section and includes a mobile toggle for responsive design. It is accessible by Freelancers only. Page access: Freelancer only.
As a frontend developer, implement the InvoiceHeader section for the Invoice page. This section includes displaying the invoice number, client name, status, issue date, and due date. The status is styled dynamically based on its value (Draft, Sent, Paid, Overdue) using the STATUS_CLASS mapping. Ensure the back link to the Invoices page is functional and conditionally show navigation links based on persona access. This page is accessible by both Client (Payer) and Freelancer. Page access: shared by all personas (Client (Payer), Freelancer).
As a frontend developer, implement the BusinessSettings section which allows Freelancers to update their business name, upload a logo, and select a default currency. This section includes form handling with state management for inputs and a success message upon saving changes. Page access: Freelancer only.
As a frontend developer, implement the TaxSettings section which allows Freelancers to configure a default tax rate for invoices. This section includes a toggle to enable or disable tax and a form to submit changes with a success message. Page access: Freelancer only.
As a frontend developer, implement the StripeConnectionSettings section which displays the connection status with Stripe and allows Freelancers to reconnect if disconnected. This section includes a status indicator and a button to simulate reconnection. Page access: Freelancer only.
As a frontend developer, implement the StripeKeyManagement section which allows Freelancers to manage their Stripe API keys. This section includes tabs for test and live keys, options to show/hide keys, and a copy functionality with a success message. Page access: Freelancer only.
As a frontend developer, implement the RecurringBillingSettings section which allows Freelancers to enable recurring invoices and set billing intervals. This section includes toggles for enabling features and a form to save settings with a success message. Page access: Freelancer only.
As a frontend developer, implement the AccountSettings section which allows Freelancers to update their email and password. This section includes form handling for email and password changes, with validation and success messages. Page access: Freelancer only.
As a frontend developer, implement the DangerZone section which allows Freelancers to perform irreversible actions such as exporting data and deleting invoices or accounts. This section includes confirmation modals for critical actions and success messages. Page access: Freelancer only.
As a frontend developer, implement the InvoiceDetailsSection for the Invoice page. This section displays client billing details including name, email, and address. If the invoice status is 'Draft', an edit button should be available to modify billing details. This page is accessible by both Client (Payer) and Freelancer. Page access: shared by all personas (Client (Payer), Freelancer).
As a frontend developer, implement the InvoiceItemsTable for the Invoice page. This section displays a table of invoice items with columns for description, quantity, unit price, and amount. If the invoice status is 'Draft', action buttons for editing and deleting items should be available. The table also calculates and displays the subtotal. This page is accessible by both Client (Payer) and Freelancer. Page access: shared by all personas (Client (Payer), Freelancer).
As a frontend developer, implement the InvoiceTotalsPanel for the Invoice page. This section displays the subtotal, tax amount (if applicable), and total due. The tax amount is shown only if the tax rate is greater than zero. This page is accessible by both Client (Payer) and Freelancer. Page access: shared by all personas (Client (Payer), Freelancer).
As a frontend developer, implement the InvoicePaymentSection for the Invoice page. This section displays payment status and options based on the invoice status. If the invoice is paid, show a confirmation with the paid date. If awaiting payment, display a payment link and QR code for scanning. The copy link functionality should be implemented. This page is accessible by both Client (Payer) and Freelancer. Page access: shared by all personas (Client (Payer), Freelancer).
As a frontend developer, implement the InvoiceActionButtons for the Invoice page. This section includes buttons for sending the invoice, marking it as paid, downloading as PDF, printing, editing, and deleting. Button availability depends on the invoice status. This page is accessible by both Client (Payer) and Freelancer. Page access: shared by all personas (Client (Payer), Freelancer).
As a frontend developer, implement the EmailHero section for the Email page. This section includes a headline with a span for accent styling and a subheading describing the automatic invoice sending feature. It also includes a background div for visual enhancement. This section is accessible by the Client (Payer) persona only and must depend on the Invoice page's InvoiceHeader task to ensure proper integration. Page access: Client (Payer) only.
As a frontend developer, implement the PaymentHeader section which displays the invoice number, client name, amount due, and due date. This section includes breadcrumb navigation and formats the amount due using the Intl.NumberFormat API. It is accessible by the Client (Payer) persona only. Ensure that the breadcrumb links are conditionally shown based on persona access. Page access: Client (Payer) only.
As a frontend developer, implement the EmailPreviewCard section for the Email page. This section displays a preview of the client's inbox with sender details, subject, and a summary of the invoice. It includes interactive elements like a 'View & Pay Invoice' button with a preventDefault action. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.
As a frontend developer, implement the EmailWorkflow section for the Email page. This section outlines the steps of the email workflow using a series of icons and descriptions. It maps through a STEPS array to dynamically render each step. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.
As a frontend developer, implement the EmailCustomization section for the Email page. This section features customizable email options with icons and descriptions, rendered from a FEATURES array. It allows users to personalize email subject lines, payment instructions, and more. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.
As a frontend developer, implement the EmailTracking section for the Email page. This section provides tracking features for email interactions, including open tracking, click tracking, and bounce detection. It uses a TRACKERS array to render each feature with an icon and description. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.
As a frontend developer, implement the EmailCTA section for the Email page. This section includes a call-to-action for users to start using the service, with links to sign up or log in. It features a headline, descriptive text, and two action links. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.
As a frontend developer, implement the EmailFAQDelivery section for the Email page. This section provides FAQs related to email delivery and reliability, using a toggleable accordion interface. It uses a useState hook to manage the open state of each FAQ item. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.
As a frontend developer, implement the EmailFAQCustomization section for the Email page. This section provides FAQs related to email customization and branding, using a toggleable accordion interface. It uses a useState hook to manage the open state of each FAQ item. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.
As a frontend developer, implement the OrderSummary section which lists line items with descriptions, quantities, and prices. It calculates and displays the subtotal, tax, and total due using the Intl.NumberFormat API. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.
As a frontend developer, implement the PaymentMethodSelector section which allows users to select between 'Credit / Debit Card' and 'ACH Bank Transfer' payment methods. Each option includes an icon and description, and the selected method is highlighted. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.
As a frontend developer, implement the TrustBadges section which displays security and compliance badges such as 'Powered by Stripe', '256-bit SSL Encryption', 'PCI DSS Compliant', and 'Fraud Protection'. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.
Develop API endpoints to support setting up and managing recurring billing for clients. This includes creating, updating, and deleting recurring billing schedules, and generating invoices automatically based on these schedules.
As a frontend developer, implement the CardPaymentForm section which includes fields for card number, expiry date, CVC, cardholder name, and billing address. It uses state hooks to manage form inputs and includes basic validation. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.
As a Tech Lead, verify the end-to-end integration between the Recurring Billing frontend implementation and the Recurring Billing backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.
Test the recurring billing flow including setup, automatic invoice generation, and schedule management.

Create professional invoices, send them to clients, and get paid faster — all from one clean dashboard.
A complete invoicing toolkit designed for freelancers who value their time.
Create professional invoices in seconds with automatic numbering and custom branding.
Store all client details in one place — names, emails, billing addresses, and history.
See exactly what's paid, pending, and overdue at a glance from your dashboard.
Set up automatic invoices for retainer clients and never miss a billing cycle.
No complicated setup. No learning curve. Just straightforward billing.
Build your invoice with line items, set your tax rate, and add your logo.
Email the invoice directly to your client with a single click.
Your client pays online via Stripe, and the invoice is marked paid automatically.
Join hundreds of freelancers who have replaced spreadsheets with a faster, cleaner invoicing tool.
Start Your Free Trial→
Create professional invoices, send them to clients, and get paid faster — all from one clean dashboard.
A complete invoicing toolkit designed for freelancers who value their time.
Create professional invoices in seconds with automatic numbering and custom branding.
Store all client details in one place — names, emails, billing addresses, and history.
See exactly what's paid, pending, and overdue at a glance from your dashboard.
Set up automatic invoices for retainer clients and never miss a billing cycle.
No complicated setup. No learning curve. Just straightforward billing.
Build your invoice with line items, set your tax rate, and add your logo.
Email the invoice directly to your client with a single click.
Your client pays online via Stripe, and the invoice is marked paid automatically.
Join hundreds of freelancers who have replaced spreadsheets with a faster, cleaner invoicing tool.
Start Your Free Trial→
No comments yet. Be the first!