Coder Social home page Coder Social logo

nextjs-property-rental-site-example's Introduction

Mock Property Rental Site Built with Next.js 14

Full CRUD for properties, user authentication and messaging, and searching and bookmarking properties. Using NextAuth for Google sign-in and MongoDB via Mongoose.

Features

  • User authentication with Google and Next Auth
  • User authorization
  • User profile with user listings
  • Internal user messaging with 'unread' notifications
  • Route protection
  • Property/User data validation and formatting
  • Property Listing CRUD
  • Property Listing multi-image upload to Cloudinary
  • Property Listing search
  • Photoswipe image gallery
  • Mapbox maps
  • Toast notifications
  • Property Listing bookmarking
  • Property Listing sharing to social media
  • Responsive UI with Tailwind CSS
  • Custom 404 page

Packages Used

  • Next.js
  • React.js
  • Tailwind CSS
  • MongoDB
  • Mongoose
  • NextAuth.js
  • Validator.js
  • React Icons
  • Cloudinary
  • Mapbox
  • React Map GL
  • React Geocode
  • React Spinners
  • React Toastify
  • React Share
  • Chalk (for nicer DX)

Miscellaneous

Built with Node v20; .nvmrc in repo. <<<<<<< Updated upstream

<<<<<<< Updated upstream

High Level TODOs

  • Tighten up and polish UI design since it's pretty wonky all over.
  • Convert most client components into server ones since all they're doing is fetching data usually. Use server actions.
  • Add model imports in any component that even thinks about referencing them because Mongoose has occasional random hiccups with models not being defined and necessitates restarting server.
  • Rewrite property fetching utils from early on to actually account for most (or all... unless?) cases, or get rid of it entirely if it doesn't make sense anymore.
  • Abstract some redundant shiz into utils or components, DRY things up.
  • Fix mixed naming for component directories, reshuffle components directory itself
  • Add .eslintrc, ensure everything gets reformatted since I'm not happy with Prettier.
  • Skim through and ensure naming is still sensible, add comments.
  • Eventually fork a TypeScript version. =======

Known Issues

  • When deploying fresh to Vercel, none of the project's CSS files get included in the markup and so don't load, leaving a vanilla HTML page. This seems to be a not-unheard-of issue when deploying Next to Vercel. Hack workaround seems to be including a dummy CSS file in the root layout.

Stashed changes Stashed changes

nextjs-property-rental-site-example's People

Contributors

televators avatar

Watchers

 avatar

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.