Tenant CRM

About this project 🪴

Tenant Customer Relationship Management (CRM) is an application for landlords to manage their tenants across multiple properties. It enables users to track rent and bill payments while also monitoring any pending tasks for individual tenants.

Website URL 🔗

 https://tenantcrmproject.co.uk/

GitHub URL 💻

https://github.com/elenisal94/Flatmates-crm

Purpose 🎯

  • Address the lack of user-friendly tools for managing multiple rental properties
  • Practice building a full CRUD application from scratch
  • Learn and apply core React concepts in a real-world context

Scope and Time 🕰️

  • Solo project built independently
  • Completed over ~1.5 months
  • Started with no prior experience in React or working with separate frontend/backend architecture

Setup 🏗️

  • Started with a Joy UI template for a clean React front end
  • Connected MongoDB database and established backend API (Node.js + Express)
  • Customised UI to fit CRM use-case: table structure, drawer view, status chips
  • Built full CRUD functionality for tenants, bills, and tasks

Deployment 🥁

  • Deployed full-stack app to AWS EC2 for scalable hosting
  • Configured server and client with environment variables and process management
  • Gained hands-on experience with cloud deployment and infrastructure basics

Tech Stack 💡

Front-end

✔ React
✔ Joy UI (MUI variant)
✔ JavaScript

Back-end

✔ Node.js
✔ Express

Database

✔ MongoDB

Deployment/ Hosting

✔ AWS EC2

View Code on GitHub

Features 🌻

✔ Create, update, and delete tenant records
✔ Track rent and bill payments per tenant
✔ Automatically update aggregate stats (e.g., total rent due)
✔ Add and manage tasks for each tenant
✔ Easily reset the data set to default
✔ Use the app instantly—no login required
✔ Sortable and resizable data tables
✔ Built-in form validation with user-friendly error messages
✔ Clean, modern UI built with Joy UI
✔ Responsive layout for different screens

WalkThrough ✨

See what the platform is like in action.

Challenges and solutions 🧪

1. Understanding React Syntax and Logic

✔ Transitioned from vanilla JS to React’s component-based architecture and hooks
✔ Learned to manage component state for dynamic UIs
✔ Understood props and data flow between components through persistence and research

2. Linking the Server and Client in a React App

✔ Figured out backend logic must live outside client folder
✔ Managed two ports: 5001 for backend, 3000 for frontend
✔ Built backend schemas, controllers, and routes once architecture was clear

3. Making the Code Reusable

✔ Initially created page-specific components, limiting reuse
✔ Refactored to separate visual and CRUD logic into generic, reusable components
✔ Resulted in cleaner, more maintainable code and saved development time

4. CORS Errors

✔ Configured proper CORS headers and handled preflight requests on server
✔ Identified browser compatibility issues during development
✔ Used browser extension to bypass CORS during dev for smoother workflow

5. Outdated MUI and Joy UI Packages

✔ Encountered theming errors due to version incompatibility
✔ Updated both packages to latest versions
✔ Achieved bug fixes and a sleeker UI appearance

Next steps 📌

Next steps to complete this project:

1. Faster data refresh

✔ Introduce a MobX store for state management
✔ Enable quicker retrieval and display of aggregate stats per tenant (tasks, bills, rent)
✔ Reduce UI lag when updating tenant information

2. Charts and UI improvements

✔ Add charts to visualise data currently shown in tables
✔ Display new records at the top of tables instead of the bottom
✔ Implement popup messages to confirm successful updates
✔ Improve accessibility and overall user experience.

3. Streamline deployment

✔ Automate deployment process to AWS EC2
✔ Enable seamless, minimal-manual updates to live site
✔ Improve workflow speed for pushing changes and iterations

View All Projects