Welcome to FlatQuest, a comprehensive real estate platform that connects property seekers with listings. FlatQuest provides an interactive map view, real-time messaging, and detailed property entries, creating a seamless experience for finding apartments, houses, and more.
- Interactive Maps: Explore properties visually using an interactive map built with Leaflet.
- Real-Time Chat: Communicate with property owners instantly using WebSockets.
- Robust Authentication: Secure JWT-based authentication with bcrypt password hashing.
- Rich Media & Content: Upload images via Cloudinary (UploadWidget) and compose rich text property descriptions using React Quill.
- Advanced Filtering: Search for properties by specific criteria (price, type, location, etc.).
- Responsive UI: A beautifully crafted interface built from the ground up using SCSS.
FlatQuest's architecture is divided into three main components: a Client Frontend, a Core REST API Server, and a dedicated WebSocket Server.
| Technology | Role |
|---|---|
| React | Core UI library |
| Vite | Build tool and development server |
| Zustand | Lightweight state management |
| React Router v6 | Client-side routing with loaders/actions |
| SCSS / Sass | Styling and responsive design |
| React Leaflet | Map integration for property locations |
| Socket.io-client | Real-time connection to the chat server |
| Axios | Handling API requests |
| React Quill | Rich text editor for property descriptions |
| Technology | Role |
|---|---|
| Node.js & Express | RESTful API server |
| Prisma | Modern Next-Generation ORM |
| PostgreSQL / MySQL | Relational database (configured via Prisma) |
| JWT & bcrypt | Security, hashing, and authorization via HTTP-only cookies |
| cookie-parser | Parsing auth cookies |
| Technology | Role |
|---|---|
| Socket.io | Bi-directional communication for the chat feature |
| Node.js | Runtime environment |
- Architecture: The backend logic is decoupled into a core REST API for CRUD operations (Authentication, Posts, Users) and a dedicated WebSocket server specifically handling real-time chat messages and notifications.
- State Management: Instead of prop drilling,
Zustandprovides elegant global state management alongside the React Context API (AuthContext,SocketContext). - Data Fetching with Loaders: Utilizing React Router v6's
loaderfunctions to pre-fetch data before navigating to specific routes (e.g., fetching a post before the listing page loads). - Security: Sensitive routes are protected by robust JWT verification middleware (
verifyToken.js) that checks HttpOnly cookies, mitigating XSS risks.
The application is deployed to cloud platforms for optimal performance and reliability:
- Frontend: Hosted on Vercel (
vercel.jsonprovides the required configurations for single-page app routing). - Core API Server: Deployed as a web service on Render.
- WebSocket Server: Deployed as a web service on Render.
To run FlatQuest locally, follow these steps.
- Node.js (v18+ recommended)
- A relational database (PostgreSQL, MySQL, or MongoDB, depending on your Prisma configuration)
git clone <your-repo-url>
cd flatquestcd server
npm install- Create a
.envfile in theserverdirectory. - Add your database connection string and JWT secret:
DATABASE_URL="your_database_url_here" JWT_SECRET_KEY="your_super_secret_key" CLIENT_URL="http://localhost:5173"
- Push the database schema:
npx prisma db push
- Start the server:
npm run dev # or node index.js depending on scripts
cd ../socket
npm install- Create a
.envfile (if applicable) and configure origins. - Start the socket server:
npm run dev # or node app.js
cd ../client
npm install- Create a
.envfile (or hardcode the development URLs if modifyinglib/apiRequest.js):VITE_API_URL="http://localhost:8800/api" VITE_SOCKET_URL="http://localhost:4000"
- Start the development server:
npm run dev
- Open http://localhost:5173 in your browser.