Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/penn201500/property-management-nextjs
This project is a Property Management web application built with Next.js. It allows users to browse properties, view detailed property information, and manage property listings. Authentication is handled through NextAuth with Google as the login provider.
https://github.com/penn201500/property-management-nextjs
mongodb mongoose nextauth nextjs14 react react-icons react-share react-toastify tailwindcss
Last synced: 17 days ago
JSON representation
This project is a Property Management web application built with Next.js. It allows users to browse properties, view detailed property information, and manage property listings. Authentication is handled through NextAuth with Google as the login provider.
- Host: GitHub
- URL: https://github.com/penn201500/property-management-nextjs
- Owner: penn201500
- Created: 2024-08-31T04:44:52.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-09-11T14:26:01.000Z (2 months ago)
- Last Synced: 2024-10-10T14:40:19.015Z (about 1 month ago)
- Topics: mongodb, mongoose, nextauth, nextjs14, react, react-icons, react-share, react-toastify, tailwindcss
- Language: JavaScript
- Homepage: https://property-management-nextjs.vercel.app/
- Size: 4.86 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Property Management Next.js
## Overview
This project is a Property Management web application built with Next.js. It allows users to browse properties, view detailed property information, and manage property listings. Authentication is handled through NextAuth with Google as the login provider.
## Features
- Browse properties with detailed information.
- Google OAuth for authentication and property management.
- Responsive design for mobile and desktop devices.
- Image management using Cloudinary.
## Tech Stack
- [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)
## 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/)
## Setup Instructions
### 1. Clone the repository
```bash
git clone https://github.com/penn201500/property-management-nextjs
cd property-management-nextjs
```
### 2. Install Dependencies
Make sure you have `node` and `npm` installed, then run:
```bash
npm install
```
### 3. Set up Environment Variables
Create a `.env` file in the root directory and add the following environment variables:
```bash
MONGODB_URI=mongodb+srv://mongo:...
NEXT_PUBLIC_DOMAIN=http://localhost:3000
NEXT_PUBLIC_API_DOMAIN=http://localhost:3000/api
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_URL_INTERNAL=http://localhost:3000
NEXTAUTH_SECRET=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
NEXT_PUBLIC_GOOGLE_GEOCODING_API_KEY=
NEXT_PUBLIC_MAPBOX_TOKEN=
```
- Generate a random string for `NEXTAUTH_SECRET` using the following command:
```bash
openssl rand -base64 32
```
### 4. Run the Development Server
```bash
npm run dev
```
The app will be available at `http://localhost:3000`.
### 5. Build for Production
To create an optimized production build, run:
```bash
npm run build
```
## File Structure
- **app/**: Main application logic and page components.
- **components/**: Reusable UI components.
- **context/**: Global state management using React Context API.
- **models/**: Mongoose models for MongoDB.
- **public/**: Static assets.
- **utils/**: Utility functions.
## License
This project is licensed under the MIT License.