Accommodation Listings
The Project lists all the accommodations we our contracted with Airbnb. As our teams need to travel regularly to global locations and reserve accommodations on these available listings.
The Project is build on MERN stack is a JavaScript-based software stack used to build web applications. MERN stands for MongoDB, Express, React, and Node.js, which are the four technologies that make up the stack.
When used together, these technologies provide a complete framework for building scalable and responsive web applications. Node.js and Express are used for the server-side and back-end programming, while React is used for the client-side and front-end programming. MongoDB is used to store and manage data.
This stack is widely used because it is relatively simple to learn, uses a common programming language (JavaScript), and can be used to build complex and robust web applications.
The Project is broken down into two main parts:
-
Backend: Which has been build on NodeJS, ExpressJS and MongoDB, and the source code is available in the backend folder. Following are the important part of backend:
- The Project follows the standard ExpressJS folder structure
- Mongodb's Airbnb sample dataset json is located at /mongodb-dataset/sample_airbnb.json & Schema is located at airbnb-schema.json
- Config - Contains all the ExpressJS global variables and mongodb db connection details
- Models - Sets up the connectivity to MongoDB with Pagination and also contains the Schemas
- Routes - Exposes the routes and paths with different HTTP verbs
- Controllers - Implementation for the different routes and logic for each Endpoints / APIs
- Backend endpoints which are exposed are:
- Endpoints / APIs exposed to Frontend:
- GET
/api/model
- Returns all the listings - GET
/api/model/${id}
- Returns the specific listing
- GET
- Endpoints / APIs hidden and unexposed to Frontend:
- GET
/api/model/${id}?search=${search}
- Search a listing using the query string. - PUT
/api/model/${id}
- Returns the specific listing & specify only the specific fields to be updated - DELETE
/api/model/${id}
- Returns the specific listing
- GET
- Endpoints / APIs exposed to Frontend:
-
Frontend: Which has been build on ReactJS basic setup, to display the listings, and the source code is available in the frontend folder. Following are the important part of frontend:
- The Project follows the standard React Web App folder structure
- http-common.js - Uses Axios to hit the backend endpoint
- listing.component.js - Uses React and Mui tables to display the listing
- listing.service.js - Makes the API call to the appropriate backend paths and with query strings & headers
- React paths available in the frontend:
/
or/listings/
- Displays all the listings/listings/${id}
- Displays the specific listing
flowchart LR
subgraph Frontend
http-common---components
components---services
end
subgraph Backend
subgraph MongoDB
data
end
models
routes
controllers
config
end
Frontend -- "GET /api/model" --> Backend
Frontend -- "GET /api/model/${id}" --> Backend
Unexposed[Unexposed/Hidden Endpoints] -- "PUT /api/model/${id}" --> Backend
Unexposed[Unexposed/Hidden Endpoints] -- "DELETE /api/model/${id}" --> Backend
Unexposed[Unexposed/Hidden Endpoints] -- "GET /api/model/${id}?search=${search}" --> Backend
Following are the steps to install the project:
- Install Node.js verion >= 18, and npm >= 9
- Install MongoDB >= 3.6
- MongoDB Command Line Database Tools
- mongoimport the Mongodb's Airbnb sample dataset and collection
listingsAndReviews
to the local mongodb - Install the Frontend by running
npm install
inside./frontend
- Install the Backend by running
npm install
inside./backend
Run the following steps to run each part:
- Backend
- run
npm start
inside the./backend
folder
- run
- Frontend
- run
npm start
inside the./frontend
folder
- run
Thank you for considering contributing to our project! Please follow these guidelines before submitting a pull request:
- Fork the repository and make your changes on the development branch.
- Make sure your code is properly formatted and adheres to our coding standards.
- Write clear and concise commit messages and include documentation with your changes.
- Push your changes to your fork and submit a pull request to the development branch of the original repository.
- Please allow time for our team to review your changes and provide feedback.
- Once your pull request is approved, we will merge your changes into the master branch.
By contributing to this project, you agree to follow the code of conduct outlined in the project's repository. Please report any inappropriate behavior to project maintainers.
We appreciate your time and effort in contributing to this project!
We like to thank the following projects and sources which have helped us build this project: