https://github.com/ahadalireach/gher.com

A full-stack web application for buying, selling, and discovering properties. Includes features for creating and managing listings, along with advanced filtering options.
https://github.com/ahadalireach/gher.com

expressjs firebase full-stack-web-development jwt mongodb nodejs react react-router-dom reactjs website website-development

Last synced: 10 days ago
JSON representation

A full-stack web application for buying, selling, and discovering properties. Includes features for creating and managing listings, along with advanced filtering options.

• Host: GitHub
• URL: https://github.com/ahadalireach/gher.com
• Owner: ahadalireach
• Created: 2024-11-18T12:47:38.000Z (3 months ago)
• Default Branch: master
• Last Pushed: 2024-12-05T17:35:34.000Z (2 months ago)
• Last Synced: 2024-12-05T18:31:29.491Z (2 months ago)
• Topics: expressjs, firebase, full-stack-web-development, jwt, mongodb, nodejs, react, react-router-dom, reactjs, website, website-development
• Language: JavaScript
• Homepage: https://gher.vercel.app
• Size: 760 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Gher.com

**Gher.com** is a full-stack web application designed for buying, selling, and finding properties. Users can create and manage property listings, with advanced filtering options.

## Technologies Used

- **Frontend:** React JS, Tailwind CSS, React Redux

- **Backend:** Node JS, Express JS

- **Database:** MongoDB

- **Authentication & Storage:** Firebase

- **Security:** JWT (JSON Web Token)

- **Email Service**: EmailJS

- **Hosting**: Vercel

## Features

- **Property Listings**: Users can add properties with details such as room type, price, and location.

- **CRUD Operations**: Complete create, read, update, and delete functionality for user profiles and property listings.

- **Advanced Filtering**: Filter properties by room type (house, flat, farmhouse), purpose (rent, sell), offers, furnishing status, parking availability, and more.

- **User Authentication**: Secure login and authorization using Firebase and JWT.

- **Admin Dashboard**: Restricted access for admins to manage user accounts and property listings.

- **Image Handling**: Seamless property image uploads and management via Firebase.

- **Restricted Routes**: Secured routes for both users and admins.

- **Contact Form**: Integrated with EmailJS for efficient communication.

## Getting Started

### Prerequisites

- Node.js and npm installed

- VS Code or any other code editor

- Git (optional, for cloning the repository)

### File Structures

```plaintext

client/

├── public/

│   └── logo.svg                       # Logo file

├── src/

│   ├── assets/                        # Images and other assets

│   ├── redux/                         # State management

│   ├── pages/                         # Page components

│   ├── components/                    # Reusable UI components

│   ├── App.jsx                        # React Router setup

│   └── main.jsx                       # Application entry point

├── .env                               # Environment variables

└── index.html                         # Root HTML file

```

```plaintext

api/

├── controllers/                       # Core logic

├── db/                                # Database connection

├── models/                            # Data schemas

├── routes/                            # API routes

├── utils/                             # Helper functions

├── .env                               # Environment variables

└── index.js                           # Main server file

```

### Setup Instructions

1. **Clone the Repository**

   ```bash

   git clone https://github.com/yourusername/gher.com.git

   ```

   `Unzip the File`

2. **Open with VS Code**

   Open the project directory with VS Code or your preferred code editor.

3. **Install Dependencies**

````

**Frontend:**

- Navigate to the frontend directory:

  ```bash

  cd frontend

````

- Create a `.env` file in the backend directory and add the following environment variables:

  ```env

  VITE_API_KEY=your_firebase_api_key

  VITE_AUTH_DOMAIN=your_firebase_auth_domain

  VITE_PROJECT_ID=your_firebase_project_id

  VITE_STORAGE_BUCKET=your_firebase_storage_bucket

  VITE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id

  VITE_APP_ID=your_firebase_app_id

  VITE_BACKEND_URL = your_backend_url (http://localhost:4000)

  ```

- Install the dependencies:

  ```bash

  npm install

  ```

- Run the development server:

  ```bash

  npm run dev

  ```

**Backend:**

- Navigate to the backend directory:

  ```bash

  cd backend

  ```

- Create a `.env` file in the backend directory and add the following environment variables:

  ```env

  PORT=4000

  MONGO_URI=your_mongodb_connection_string

  JWT_SECRET=your_jwt_secret_key

  NODE_ENV = development

  ```

- Install the dependencies:

  ```bash

  npm install

  ```

- Start the server:

  ```bash

  npm run dev

  ```

## 4. **Update API URLs**

Ensure that the API URLs in your frontend code are correctly pointing to your local backend server. Update the `VITE_BACKEND_URL` in the `.env` file (as mentioned in the previous step).

## 5. **Access the Application**

After everything is set up:

- Open your browser and navigate to [http://localhost:5173](http://localhost:5173) to view the application.

- Ensure the frontend loads correctly and communicates with the backend server.

## 6. **Deployment**

- Deploy the frontend to Vercel and the backend to your preferred hosting service.

- Ensure the environment variables are properly set in the respective hosting platforms.

## Live Links

- **Live Web:** [gher.vercel.app](https://gher.vercel.app)

- **GitHub Repo:** [github.com/ahadalireach/gher.com](https://github.com/ahadalireach/gher.com) (Give it a Star!)

- Live Video Demo: Coming Soon

## Contact

For any questions, feedback, or collaboration opportunities, feel free to contact me at [[email protected]](mailto:[email protected]).