Nigeria's most trusted platform for finding housing and compatible roommates.
- 🏠 Listings — Browse, filter, and search verified Nigerian property listings
- 👥 Roommate Finder — AI-powered compatibility matching based on lifestyle preferences
- 💬 Chat — WhatsApp-style real-time messaging with landlords
- ✍️ Post Listing — Multi-step listing wizard with AI description generator
- 🌙 Dark Mode — Full dark/light theme with system preference detection
- 💾 LocalStorage — All data persists across browser sessions (no backend needed)
- 📱 Responsive — Mobile-first design optimized for Nigerian Android devices
# 1. Clone the repository
git clone https://github.com/Eldren-cmd/hrf-app.git
cd hrf-app
# 2. Install dependencies
npm install
# 3. Set up environment variables
cp .env.example .env
# Add your Anthropic API key to .env
# 4. Run the development server
npm run devCreate a .env file in the root directory:
VITE_ANTHROPIC_API_KEY=your_anthropic_api_key_hereGet your API key at https://console.anthropic.com
Note: The AI listing description generator requires this key. All other features work without it.
src/
├── components/
│ ├── Navbar.jsx # Responsive nav with dark mode toggle
│ ├── Footer.jsx # Site footer with links
│ └── ListingCard.jsx # Reusable listing card component
├── context/
│ ├── AppContext.jsx # Global state (listings, chat, user) → localStorage
│ └── ThemeContext.jsx # Dark/light mode state
├── data/
│ └── mockData.js # Nigerian mock listings, roommates, chats, helpers
├── pages/
│ ├── Home.jsx # Landing page with hero, featured listings
│ ├── Listings.jsx # Browse & filter all listings
│ ├── ListingDetail.jsx # Single listing view with gallery & contact
│ ├── Roommates.jsx # Roommate finder with compatibility scores
│ ├── PostListing.jsx # 4-step listing wizard + AI description
│ ├── Chat.jsx # WhatsApp-style messaging
│ ├── Profile.jsx # User profile, my listings, saved
│ ├── Auth.jsx # Sign in / Sign up
│ └── NotFound.jsx # 404 page
├── App.jsx # Router and layout
├── main.jsx # Entry point
└── index.css # Global design system (CSS variables, utilities)
| Token | Value | Use |
|---|---|---|
--primary |
#C84B11 |
Burnt orange — CTAs, prices, accents |
--secondary |
#1B5E37 |
Nigerian green — verified badges, hero |
--accent |
#E9A84C |
Gold — highlights, stars |
--font-display |
Fraunces | Headings — editorial serif |
--font-body |
DM Sans | Body text — clean grotesque |
The Adire (Nigerian indigo-dye textile) dot pattern is used as a cultural background motif throughout the UI — a deliberate design choice to ground the product in its Nigerian identity.
| Package | Purpose |
|---|---|
| React 18 + Vite | Framework + bundler |
| React Router 6 | Client-side routing |
| Lucide React | Icon library |
| Anthropic Claude API | AI listing description generator |
| Route | Page |
|---|---|
/ |
Home / Landing |
/listings |
Browse all listings |
/listings/:id |
Single listing detail |
/roommates |
Roommate finder |
/post-listing |
Post a property |
/chat |
Messages (all conversations) |
/chat/:id |
Single conversation |
/profile |
User profile |
/auth |
Sign In / Sign Up |
- Backend integration (Node.js + Supabase)
- Real-time chat (WebSocket / Supabase Realtime)
- Paystack payment integration for inspection bookings
- Image uploads (Cloudinary)
- Email notifications (Resend)
- Scam detection AI (flag suspicious listings)
- Map view (Google Maps / Leaflet)
- NYSC corper filter
- PWA support for low-bandwidth Nigerian users
Gabriel Adegboyega Adenrele Full Stack Developer · Lagos, Nigeria
Built for Nigeria 🇳🇬 — because finding a good house or a trustworthy roommate shouldn't be this hard.