Skip to main content

Technical Documentation

This section provides a high-level overview of the Roofstick technical architecture, designed for developers who wish to understand, modify, or extend the platform.

1. Folder Structure​

The project is divided into two main repositories/folders:

  • /Frontend: Contains the Next.js frontend application.
  • /Backend: Contains the Node.js/Express REST API server.

2. Frontend Structure​

The frontend is built using Next.js v16.2.2 (App Router), React v19.2.4, and modern web technologies.

  • Language: JavaScript (JSX)
  • Styling: Tailwind CSS, Ant Design (for complex UI components), and Sass.
  • Animations: Framer Motion and React Spring.
  • State/API: Managed via standard React hooks and Axios for backend communication.
  • app/: Next.js App Router directory containing page components corresponding to specific routes.
  • public/: Static assets like images, icons, and fonts.
  • tailwind.config.js: Tailwind configuration and theming options.

3. Backend Structure​

The backend is built with Node.js, Express (v5.1.0), and MongoDB (Mongoose v8.18.1).

  • Language: TypeScript
  • controllers/: Contains the business logic for handling incoming requests and returning responses.
  • models/: Mongoose schemas defining the database structure (User, Property, Subscription, etc.).
  • routes/: Defines the API endpoints and maps them to the respective controllers.
  • middlewares/: Custom middleware for tasks like JWT authentication, error handling, and file uploads.
  • utils/: Helper functions (e.g., email sending, token generation).

4. Third-Party Integrations​

Roofstick relies heavily on robust third-party integrations natively built into the codebase:

  • Real-Time Communication: Socket.io is used for real-time features like chat/inquiries.
  • Media Storage: AWS S3 SDK (@aws-sdk/client-s3) is integrated for scalable cloud storage of property images.
  • Payment Gateways: Fully integrated with Stripe, PayPal, Razorpay, Mollie, and SSLCommerz.
  • AI Integration: Groq SDK for AI-powered features.
  • Email: Nodemailer for transactional emails.

5. Authentication​

Roofstick uses JSON Web Tokens (JWT) for secure authentication.

  • Upon successful login, the server issues an Access Token.
  • The frontend stores this token and attaches it to the Authorization: Bearer <token> header for all subsequent protected API requests.
  • Passwords are securely hashed using bcryptjs before being stored in the database.

6. Database Structure​

The MongoDB database consists of several collections. Key collections include:

  • Users: Stores credentials, roles (Admin, Agent, Buyer), and profile data.
  • Properties: Stores property details (title, price, location, amenities, images) and references the Agent (User ID) who listed it.
  • Inquiries/Messages: Stores messages sent from Buyers to Agents regarding specific properties.
  • Subscriptions/Payments: Stores transaction history and credit balances for Agents.

7. Environment Configuration​

The application relies heavily on environment variables for security and configuration flexibility.

  • Frontend .env: Must include the base URL for the backend API and socket server (NEXT_PUBLIC_BACKEND_URL, NEXT_PUBLIC_SOCKET_URL).
  • Backend .env: Must include PORT, MONGODB_URI, JWT_SECRET, AWS credentials, email service credentials, and payment gateway secret keys. Never commit your production .env files to version control.