Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wassimoubaziz/krili

This project is a full-stack web application developed as a clone of Airbnb using the MERN stack (MongoDB, Express.js, React.js, Node.js). It aims to replicate the core functionality of Airbnb, allowing users to search for accommodations, view details, make bookings, and manage their listings.
https://github.com/wassimoubaziz/krili

krili mern mern-stack oubaziz stack wassim

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/wassimoubaziz/krili
Owner: wassimOubaziz
License: gpl-3.0
Created: 2024-03-08T13:39:38.000Z (10 months ago)
Default Branch: main
Last Pushed: 2024-05-02T20:16:39.000Z (8 months ago)
Last Synced: 2024-10-26T23:14:49.979Z (2 months ago)
Topics: krili, mern, mern-stack, oubaziz, stack, wassim
Language: JavaScript
Homepage:
Size: 22.5 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 4
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Airbnb Clone

## Overview

## Getting Started

1. **Clone the Repository:**

```bash
git clone https://github.com/wassimOubaziz/krili.git

```

2. **Install dependencies:**

Navigate to client directory and install frontend dependencies using yarn

```
yarn install
```
or
```
npm install
```

Similary navigate to api folder and install backend dependencies

```
yarn install
```
or
```
npm install
```

4. **ENV variables:**

- create .env file in the client folder and add these variables

#### VITE_BASE_URL= http://localhost:4000

#### VITE_GOOGLE_CLIENT_ID= your google client id ([watch this vedieo to see how you can do that](https://www.youtube.com/watch?v=HtJKUQXmtok&ab_channel=CooperCodes))

- create .env file in the api folder and add these variables

#### PORT= 4000

#### DB_URL= your db url

#### JWT_SECRET= your secret (string)

#### JWT_EXPIRY= 20d

#### COOKIE_TIME= 7

#### SESSION_SECRET= your secret session (string)

#### CLOUDINARY_NAME= your secret session

#### CLOUDINARY_API_KEY= your cloudinary key

#### CLOUDINARY_API_SECRET= your cloudinary api secret

#### CLIENT_URL= http://localhost:5173

you can watch this youtube video to see how to setup ur cloudinary [here](https://www.youtube.com/watch?v=1SIp9VL5TMo&ab_channel=Cloudinary)

5. **Run project:**
- Open terminal, navigate to client directory and run below command to start frontend
```
yarn run dev
```
or
```
npm run dev
```
- Open another terminal, navigate to api directory and run this command to start backend server
```
yarn start
```
or
```
npm run dev
```

## Features

- **User Authentication:** Users can sign up, log in, and log out securely. Passwords are hashed for security.
- **Google Login:** Users can sign up and log in using their gmail.

![Airbnb Logo](client/public/assets/auth.png)

- **Search Listings:** Users can search for accommodations.

![Airbnb Logo](client/public/assets/search.png)

- **View Listings:** Users can view detailed information about each accommodation, including photos, descriptions, amenities.

![Airbnb Logo](client/public/assets/view.png)

- **Make Bookings:** Authenticated users can book accommodations for specific dates.

![Airbnb Logo](client/public/assets/book.png)

- **Manage Listings:** Hosts can create, edit, and delete their listings.

![Airbnb Logo](client/public/assets/manage.png)

- **Responsive Design:** The application is designed to be responsive and work seamlessly across different devices.

![Airbnb Logo](client/public/assets/hero.png)

## Technologies Used

- **MongoDB:** NoSQL database for storing user data, listings.
- **Express.js:** Web application framework for building the backend server.
- **React.js:** JavaScript library for building the user interface.
- **Node.js:** JavaScript runtime environment for executing server-side code.
- **Tailwind CSS:** A utility-first CSS framework
- **Shadcn:** UI library for styling based on Tailwind CSS
- **JWT:** JSON Web Tokens for secure user authentication.
- **Cloudinary:** Cloud-based image management for storing and serving images.
- **Google Cloud:** For gmail based authentication