Update docs
This commit is contained in:
Brad Traversy
@@ -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.
|
||||||
|
|
||||||
|
<img src="/public/images/screen.jpg" />
|
||||||
|
|
||||||
|
## 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
|
## 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
|
```bash
|
||||||
npm run dev
|
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.
|
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.
|
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
|
||||||
|
|
||||||
## 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.
|
|
||||||
|
|||||||
Reference in New Issue
Block a user