diff --git a/README.md b/README.md index 0dc9ea2..592230e 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,91 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +# 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](https://www.traversymedia.com/nextjs-from-scratch) + +The `_theme_files` folder contains the pure HTML files with Tailwind classes. + + + +## Features + +Here are some of the current features that Property Pulse has: + +- [x] User authentication with Google & Next Auth +- [x] User authorization +- [x] Route protection +- [x] User profile with user listings +- [x] Property Listing CRUD +- [x] Property image upload (Multiple) +- [x] Property search +- [x] Internal messages with 'unread' notifications +- [x] Photoswipe image gallery +- [x] Mapbox maps +- [x] Toast notifications +- [x] Property bookmarking / saved properties +- [x] Property sharing to social media +- [x] Loading spinners +- [x] Responsive design (Tailwind) +- [x] Custom 404 page +- [x] Next.js Actions + +Property Pulse uses the following technologies: + +- [Next.js](https://nextjs.org/) +- [React](https://reactjs.org/) +- [Tailwind CSS](https://tailwindcss.com/) +- [MongoDB](https://www.mongodb.com/) +- [Mongoose](https://mongoosejs.com/) +- [NextAuth.js](https://next-auth.js.org/) +- [React Icons](https://react-icons.github.io/react-icons/) +- [Photoswipe](https://photoswipe.com/) +- [Cloudinary](https://cloudinary.com/) +- [Mapbox](https://www.mapbox.com/) +- [React Map GL](https://visgl.github.io/react-map-gl/) +- [React Geocode](https://www.npmjs.com/package/react-geocode) +- [React Spinners](https://www.npmjs.com/package/react-spinners) +- [React Toastify](https://fkhadra.github.io/react-toastify/) +- [React Share](https://www.npmjs.com/package/react-share) ## Getting Started -First, run the development server: +### Prerequisites + +- Node.js version 18 or higher +- MongoDB Atlas account and a cluster. Sign up and create a cluster at [MongoDB](https://www.mongodb.com/) +- Cloudinary account. Sign up at [Cloudinary](https://cloudinary.com/) +- Google console account. Sign up at [Google Cloud](https://console.cloud.google.com/) +- Mapbox account. Sign up at [Mapbox](https://www.mapbox.com/) + +### `.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: + ```bash + 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 + +```bash +npm install +``` + +### Run the Development Server ```bash npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. -You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file. +## License -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. +This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details