FreelanceKit CRM

Inspiration

As a freelance developer tired of clunky, generic CRMs, I drew inspiration from game dev aesthetics and terminal/ code editor design – blending the joy of gaming with the practicality freelancers need. I wanted a tool that felt as dynamic as the work we do, not just a static spreadsheet with a UI.

What it does

FreelanceKit CRM is a one-page CRM built for freelancers (designers, devs, consultants) to manage client pipelines, invoices, follow-ups, and revenue forecasting—all on a single, interactive screen. It features drag-and-drop pipeline boards, AI-powered follow-up suggestions, and real-time project health scoring to keep your freelance business on track.

How we built it

I started by mapping core freelance pain points (disorganized pipelines, missed follow-ups, unclear revenue forecasts) to features. I built the frontend with React and GSAP for spring physics animations, integrated an AI API for conversational client entry and email drafting, and used Chart.js for revenue visualizations. The backend leverages Node.js and MongoDB to store client/project data, with Firebase for file management in the client portal.

Challenges we ran into

The biggest hurdle was balancing high-impact animations (pixel art, neon glow, parallax) with performance—especially on lower-end devices. I also struggled to refine the project health score algorithm (weighting email response time, tone, and communication frequency) to feel intuitive, not just mathematical.

Accomplishments that we're proud of

Creating a UI that’s both visually striking (game-inspired, code-editor aesthetics) and functional—drag-and-drop pipeline cards with particle effects feel fun but never distract from the work. The AI-driven conversational client entry streamlines onboarding, and users consistently say the revenue forecasting feels accurate and actionable.

What we learned

I mastered spring physics animation tuning (tension: 300, friction: 20) to make interactions feel natural, not jittery. I also learned to prioritize accessibility (WCAG AA color contrast) while keeping the neon/game-inspired design intact—and that AI works best when it augments, not replaces, human workflow.

What's next for this project

I plan to add lightweight time-tracking (aligned with project tasks), integrate basic accounting software sync, and expand the client portal to include real-time chat. I also want to refine the health score algorithm with more user data and add regional tax calculation support for EU/US freelancers.

Built With

• css3
• javascript
• react
• spring-physics-library