Code Monkey home page Code Monkey logo

property-pulse's Introduction

Property Pulse

A web application to help you find your next rental property.

This is the main project from my Next 14 From Scratch Course

Important notes

If you are following along with the course and running into issues, then please take the time to read the README in the bugfix branch as this solves many common problems.

There is also a refactor branch where the code has been heavily refactored to stay true to NextJS recommended best practices by using querying the database directly from our server components for data fetching, and performing updates and adding data using server actions.
The refactor also makes deployment a fair bit smoother.
The course is currently being re recorded for a re release using the code in the refactor branch.

The _theme_files folder contains the pure HTML files with Tailwind classes.

Features

Here are some of the current features that Property Pulse has:

  • User authentication with Google & Next Auth
  • User authorization
  • Route protection
  • User profile with user listings
  • Property Listing CRUD
  • Property image upload (Multiple)
  • Property search
  • Internal messages with 'unread' notifications
  • Photoswipe image gallery
  • Mapbox maps
  • Toast notifications
  • Property bookmarking / saved properties
  • Property sharing to social media
  • Loading spinners
  • Responsive design (Tailwind)
  • Custom 404 page

Property Pulse uses the following technologies:

Getting Started

Prerequisites

  • Node.js version 18 or higher
  • MongoDB Atlas account and a cluster. Sign up and create a cluster at MongoDB
  • Cloudinary account. Sign up at Cloudinary
  • Google console account. Sign up at Google Cloud
  • Mapbox account. Sign up at Mapbox

.env File

Rename the env.example file to .env and fill in the following environment variables:

  • Get your MongoDB connection string from your MongoDB Atlas cluster and add it to MONGODB_URI.
  • Get your Google client ID and secret from your Google console account and add them to GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET.
  • Add a secret to NEXTAUTH_SECRET. You can generate with the following command:
    openssl rand -base64 32
  • Get your Cloudinary cloud name, API key, and API secret from your Cloudinary account and add them to CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, and CLOUDINARY_API_SECRET.
  • Get your Mapbox token from your Mapbox account and add it to NEXT_PUBLIC_MAPBOX_TOKEN.
  • Get your Google Geocoding API key from your Google console account and add it to NEXT_PUBLIC_GOOGLE_GEOCODING_API_KEY.

Install Dependencies

npm install

Run the Development Server

npm run dev

Open http://localhost:3000 with your browser to see the result.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

property-pulse's People

Contributors

bradtraversy avatar bushblade avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

property-pulse's Issues

Project build failed

After successfully completing the course, I wanted to host the project on my private VPS. The problem occurs when I try to build the project.

Error messeage:

[email protected] build
next build

   ▲ Next.js 14.1.2
   
Environments: .env

   Creating an optimized production build ...
 ⚠ For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.
Read more: https://nextjs.org/docs/messages/sharp-missing-in-production
Compiler client unexpectedly exited with code: null and signal: SIGTERM
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
   Generating static pages (2/12)  [==  ]
TypeError: fetch failed
    at node:internal/deps/undici/undici:12500:13
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async globalThis.fetch (C:\Users\user\Desktop\property-pulse.next\server\chunks\638.js:1:36495)
    at async m (C:\Users\user\Desktop\property-pulse.next\server\app\page.js:1:8034)
    at async h (C:\Users\user\Desktop\property-pulse.next\server\app\page.js:1:8232) {
  [cause]: AggregateError [ECONNREFUSED]:
      at internalConnectMultiple (node:net:1116:18)
      at afterConnectMultiple (node:net:1683:7)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    code: 'ECONNREFUSED',
    [errors]: [ [Error], [Error] ]
  }
}
TypeError: Cannot read properties of undefined (reading 'sort')
    at h (C:\Users\user\Desktop\property-pulse.next\server\app\page.js:1:8254)
   Generating static pages (11/12) [  ==]
 ✓ Generating static pages (12/12)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.