bradtraversy/property-pulse-nextjs

1. High-level shape

Property Pulse is a Next.js 14 App Router application built around server actions rather than custom REST API routes. The runtime path is: browser UI → Next.js page/component layer → server actions → MongoDB, with a few external services for auth, media, maps, and geocoding.

2. Primary user-facing areas

The app is organized into distinct route sections under app/:

- app/page.jsx home/landing experience

- app/properties/* property catalog, detail, add, edit, search results, and saved properties

- app/messages/page.jsx internal inbox

- app/profile/page.jsx user profile and listings

These pages are the main architectural boundaries for the user journeys.

3. Presentation layer

Most UI behavior is encapsulated in components/, which contains reusable building blocks such as the navbar, footer, hero, property cards, forms, maps, message cards, spinners, pagination, and share/bookmark controls. This keeps the pages thin and lets route pages compose features from shared UI pieces.

4. Server action layer

The app/actions/ directory is the core application service layer. It contains targeted actions for:

- property CRUD: add, update, delete

- bookmarks/saved properties: bookmark, status check

- messaging: add, delete, mark as read, unread count

These actions are the main boundary between UI and persistence, and they replace what would normally be API endpoints.

5. Data model and persistence

MongoDB is the primary system of record, accessed through Mongoose models in models/:

- Property.js

- Message.js

- User.js

config/database.js handles the DB connection setup. The architecture is document-centric: property listings, user records, and messages live in MongoDB, with relationships implied through IDs and embedded references.

6. Authentication and authorization

Authentication is built with NextAuth and Google sign-in. The auth configuration lives in utils/authOptions.js, with the route handler at app/api/auth/[...nextauth]/route.js. utils/getSessionUser.js and middleware.js enforce user-aware behavior and route protection. In practice, this separates public browsing from protected actions like posting, editing, bookmarking, and messaging.

7. Property lifecycle

The property domain is the central workflow:

- users create/edit listings via PropertyAddForm and PropertyEditForm

- images are uploaded and attached to a listing

- listings appear in home/search/profile views through cards and detail pages

- owners can edit/delete their own listings

The architecture assumes a listing is both a searchable catalog item and a user-owned resource.

8. Media, maps, and location

Property listings are enriched with external services:

- Cloudinary in config/cloudinary.js for image upload/storage

- Mapbox and react-map-gl for map display

- Google geocoding / geocode utilities for converting addresses to coordinates

This means the property detail page is not just data rendering; it also resolves location and media assets from external infrastructure.

9. Messaging and notifications

The messaging subsystem provides internal contact between users and property owners. It includes unread counts, message read-state transitions, inbox listing, and message deletion. UnreadMessageCount, MessageCard, PropertyContactForm, and the related actions form a self-contained communication flow tied to a listing.

10. Saved/bookmarked properties

Saved properties are handled as a separate user-centric feature, with bookmark toggling and status checks. The saved state is surfaced in its own route and UI, so the app distinguishes between catalog browsing and personalized collection management.

11. Global client-side state and app shell

context/GlobalContext.js and components/AuthProvider.jsx provide app-wide client concerns, while app/layout.jsx, Navbar, Footer, loading.jsx, and error.jsx define the shared shell, loading state, and error boundaries. This is the outer presentation envelope that wraps all route content.

12. Styling and design source

Styling is driven by Tailwind CSS with global styles in assets/styles/globals.css. The _theme_files/ directory contains the original static HTML/Tailwind reference pages used as the design source for the Next.js implementation; it is not part of the runtime app flow, but it explains the intended structure of the UI.

13. Static assets and environment boundaries

public/images and assets/images provide imagery, while config/, utils/, and models/ form the main non-UI boundaries. The app depends on external environment configuration for MongoDB, Google auth, Cloudinary, Mapbox, and geocoding, which materially affects how the system is deployed and diagrammed.