FreelancerCRM is an advanced-level Minimum Viable Product (MVP) version of a modern CRM web application built for learning purposes and upskill reasons, and includes an overview of client relationships, activities, and communication — all presented in a user-friendly, responsive dashboard with a drag-and-drop Kanban interface.
Test the live application here:
Live application availability (YES/NO): YES
I built FreelancerCRM to challenge myself, so I can enhance my development competency by creating a complete full-stack solo project while also exploring different technologies not previously well known to me. The application has a Kanban board UI built with React/Next.js and Tailwind, and a secure Node/Express back-end with both REST and GraphQL endpoints backed by PostgreSQL. I set up JWT authentication, CI/CD with GitHub Actions, and deployed the front-end to Vercel and the back-end to Heroku. I also experimented with infrastructure-as-code using Terraform and lightweight Kubernetes (K3s) although I wouldn’t call myself proficient there yet, but it gave me valuable exposure to how modern apps can be deployed and scaled.
The application contains the following features:
- Manage contacts with fields for name, email, company, status, note, and phone number.
- Organize client workflows using a visual Kanban board with drag-and-drop functionality.
- Includes search, filter, generate and reset contacts buttons.
- Log and track activities linked to each contact.
- User authentication (registration, login, protected routes).
- Profile page with total amount of contacts and activities, and email/password update.
- Supports dark/light mode with a toggle button and your system settings.
- Mobile-friendly and responsive design.
🙏 Upcoming Features/Fixes:
- Non Currently
- Frontend: Next.js (TypeScript), React, Apollo Client, Tailwind CSS
- Backend: Express.js (Node.js/TypeScript), REST, GraphQL (Apollo Server), Prisma ORM
- Database: PostgreSQL
- Authentication: JWT
- DevOps: Docker, Kubernetes, Terraform, GitHub Actions, Vercel, Heroku
- Testing: Jest, Cypress
- Tools: VS Code, AI (GPT-4), Framework Documentations, YouTube Guides, StackOverflow
git clone https://github.com/Enock97/FreelancerCRM.gitThis is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
- Node.js v18+
- Docker + Docker Compose
- (Optional)
kubectland a local Kubernetes cluster (e.g. minikube or kind) - (Optional) Terraform configurations
git clone https://github.com/yourusername/FreelancerCRM.git
cd FreelancerCRMThere are two main options:
cd backend
cp .env.example .env
npm install
npx prisma generate
npx prisma migrate dev --name initThis sets up the SQLite database and runs all Prisma migrations.
If using Docker or Kubernetes, PostgreSQL will start as a container or pod automatically, and you must configure the .env with the correct database URL, e.g.:
DATABASE_URL="postgresql://user:password@localhost:5432/freelancercrm"
Then run:
npx prisma generate
npx prisma migrate deployUse
migrate deployinstead ofmigrate devin production-like environments.
npm run devAPI runs on http://localhost:4000
In a new terminal:
cd frontend
npm install
npm run devFrontend runs on http://localhost:3000
docker-compose up --buildYou must have a valid
docker-compose.ymlthat wires up backend, frontend, and Postgres.
kubectl apply -f k8s/This sets up the backend, frontend, and database in a Kubernetes cluster. You must ensure your local cluster supports persistent volumes (e.g., via
local-path-provisioner).
This repo ships with 100 % reproducible infrastructure‑as‑code.
Everything that Vercel, Heroku and the CI pipeline need lives in /infra (Terraform) and .github/workflows/ci-tests-deploy-terraform.yml (GitHub Actions).
| Layer | Technology | How to use it locally |
|---|---|---|
| Front‑end hosting | Vercel provider | cd infra && terraform apply creates / updates the Vercel project and triggers a deployment. |
| API + database | Heroku provider | Same terraform apply provisions the Heroku app, attaches a Postgres essential‑0 plan, and wires config vars. |
| Remote state | Terraform Cloud Free | State is stored remotely (see infra/backend.tf). Run terraform login once or export TF_TOKEN_app_terraform_io=<your user token> before terraform init. |
| CI/CD | GitHub Actions | One workflow runs tests, deploys the backend slug to Heroku, then applies Terraform. No Heroku autodeploy needed. |
# install Terraform >= 1.7 locally
cd infra
# 1️⃣ log in so Terraform can talk to Terraform Cloud
terraform login # or set TF_TOKEN_app_terraform_io
# 2️⃣ set the secrets Terraform needs
export TF_VAR_heroku_email="you@example.com"
export TF_VAR_heroku_api_key="heroku-******"
export TF_VAR_vercel_token="vcst_******"
export TF_VAR_jwt_secret="super-secret-jwt-string"
# 3️⃣ spin everything up
terraform init
terraform apply # review → yesAfter this:
npm test+npm run buildare already baked into the GitHub workflow.- Pushing to
mainautomatically runs tests → deploys backend → applies Terraform → deploys front‑end. - Need a staging copy? Run
terraform workspace new staging && terraform apply.
- Heroku stack – edit
stack = "heroku-24"ininfra/main.tf. - Database plan – change
plan = "heroku-postgresql:essential-1"andapply. - New env vars – add them under
heroku_app_config_association.api_envand commit.
Because the GitHub workflow already deploys the slug, disable “Automatic Deploys” in the Heroku dashboard to avoid a second build/release.
Why Terraform?
One command (terraform apply) recreates the full Vercel + Heroku stack, including CI secrets and JWTs, so anyone can fork the repo and spin up an identical environment in five minutes.
Enock Ladu – Full-Stack Developer: LinkedIn Profile / Oslo, Norway