HomeWiz

HomeWiz is a property management platform for apartment and commercial building operators. It replaces the spreadsheets and WhatsApp groups commonly used for daily operations by bringing more than 17 modules into one integrated dashboard. These modules include unit and resident registration, billing and invoicing, work orders, helpdesk, security patrols, access cards, parking, package handling, utilities, facility reservations, event RSVP, goods movement permits, and management reporting. Each module has its own workflow, permissions, and audit trail.

The frontend was built with Next.js 15 App Router and TypeScript. Route groups separate authentication, the protected dashboard, and public landing pages, allowing each section to use its own layout. The dashboard combines server and client layouts, keeping the sidebar interactive while page metadata is rendered on the server.

Every feature directory follows the same structure, with pages, layouts, loading skeletons, sections, forms, and types stored together. This convention keeps a large codebase consistent and makes it easier for multiple developers to work on separate modules at the same time.

Access control was one of the most challenging architectural requirements. Each building has multiple departments, including building management, engineering, security, finance, and front office. Every department needs access to a different set of features.

Permissions are fetched once per session, temporarily cached on the client, and checked through a shared hasPermission hook. This hook controls sidebar visibility, route access, and individual actions. Roles and permission sets can be managed directly from the application, allowing operators to create new roles without deploying code changes.

The HTTP layer is centralized through a single apiFetch wrapper. It reads the JWT from cookies, attaches the authorization header, signs users out when a request returns 401, and redirects unverified users when a request returns 403. Components never need to access authentication tokens or backend URLs directly.

Session data is managed through a shared cookie service connected to React context. This allows the fetch layer to trigger navigation outside the React component tree. Zustand stores the authenticated user profile and the property onboarding form, with persistence across page refreshes.

Core Features:

• Operational Dashboard

Displays real time metrics, analytics, and summaries of daily building operations.

• Units and Residents

Manages property units, residents, tenants, and related registration records.

• Billing

Supports invoice templates, partial payments, outstanding balance tracking, receipt generation, payment history, and billing analytics powered by Ant Design Plots.

• Work Orders and Helpdesk

Provides ticketing workflows for maintenance requests, operational issues, and resident support.

• Security Patrols

Manages patrol schedules, task assignments, QR checkpoint scanning, and evidence logs.

• Access Cards

Generates and manages access cards with QR codes for entry verification.

• Parking

Handles parking space allocation and vehicle registration.

• Package Management

Tracks incoming packages and sends notifications to residents.

• Utilities

Records and bills electricity, water, and gas meter usage.

• Facilities and RSVP

Manages reservations for shared facilities such as gyms, meeting rooms, and swimming pools, along with RSVP management for building events.

• Goods Movement Permits

Handles requests and approval workflows for moving goods into or out of the building.

• Announcements

Sends real time announcements through Pusher to the appropriate user roles without polling.

• Reports

Provides management reports and analytics across all operational modules.

Billing and reporting contain some of the most complex business logic in the platform. The system supports flexible invoice templates, partial payment tracking, automatic receipt generation, and complete payment histories.

Real time notifications use Pusher to deliver announcements to the appropriate roles without repeated server requests. The patrol and access card modules use generated QR codes for checkpoint and card verification, including scanning directly from the browser. Patrol routines, tasks, and logs are separated into dedicated services so schedules and supporting evidence can be managed independently.

In addition to the web dashboard, I contributed to the Flutter mobile application for tenants and field staff. The mobile workflows follow the same operational modules as the web platform. I also added several endpoints to the Laravel REST API to align the backend contracts with the interface requirements.

Role: Frontend Developer, primarily responsible for the web dashboard architecture and complete module implementation, with additional contributions to the Flutter mobile application and Laravel REST API.