PrangonGhose / Earthbnb-frontend

This web application is built to enable users browser through different houses which they can reserve on choice basis. The users can add their own houses to let other users reserve that for extra income. Users can register an account to use the website with full access with a unique username.

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Key Features
    • Live Demo
    • User Interface
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
• 📃 Kanban Board
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 License

📖 Project Name

EarthBnb Frontend

About this project

This web application is built to enable users browser through different houses which they can reserve on choice basis. The users can add their own houses to let other users reserve that for extra income. Users can register an account to use the website with full access with a unique username. The whole application is built in two major parts. The Earthbnb_backend holds code for the API backend that returns and handles the database on API request from the frontend of this website. The Earthbnb_frontend contains the user interface of the website where the users can interact with the database. The backend of the website is created with Ruby on Rails API and the frontend is created with ReactJS and Redux.

🛠 Built With

Key Features

Key features of the application.

• A full stack webapp where users can register and sign in using a unique username.
• Users can add, delete and browse through the reigstered houses and reserve any house on choice.
• API endpoints /houses and /houses/:id are available publicly whereas API endpoints /reservations and /reservations/:username is private only to registered and logged in users.
• Users will be able to reserve a house in an available date. It is made sure by the developers that a user cannot reserve a house within a date range if any other user has already reserved it.
• Users reservation data is private to every user and none can access each others data.
• The API returns different type of organized errors for bad requests.
• The UI of the website is built following this design guidelines.
• The API is documented using rswag here.

(back to top)

🚀 Live Demo

Live demo is available here.

N.B: The backend API is not available anymore due to free account restrictions on PostgreSQL database of Render.

(back to top)

📺 User Interface

Take a look at the below pictures to have an idea of the User Interface.

Landing Page	Primary Interface

My Reservation	Reserve a House

Add A House	Delete a House

💻 Getting Started

To clone the repository in local environment try following steps.

Prerequisites

• A code editor like Visual Studio Code with Node.

You can check if Git is installed by running the following command in the terminal.

$ git --version

Likewise for node and npm for package installation.

$ node --version && npm --version

Note: This project is built with Ruby version 3.1.3

Setup

Clone the repository using this link.

Install

In the terminal, go to your file directory and run this command.

$ git clone https://github.com/PrangonGhose/Earthbnb_frontend

Get into development

In the terminal, run these commands to get into development.

$ cd Earthbnb_frontend

$ npm install (install dependencies)

Note: You need to start the rails server first to ensure proper use of the frontend. So make sure you have followed the instructions available on Earthbnb_backend.

$ npm run dev

Usage

This website is applicable for both mobile and desktop version.

(back to top)

📃 Kanban Board

The Kanban Board made for this project can be found here. The initial state of the Kanban Board can be found here. There are four members in our team. Their details can be found in the authors section.

(back to top)

👥 Authors

👤 Prangon Ghose

• GitHub: @PrangonGhose
• LinkedIn: Prangon Ghose

👤 Shinhyo Belliard

• GitHub: @ShinhyoBelok
• Twitter: @Bell_iraki
• LinkedIn: LinkedIn

👤 Glenda Diaz

• GitHub: @Gdiazdiaz
• LinkedIn: Glenda Diaz

👤 Victor Gonzalez

• GitHub: @Vgonma
• LinkedIn: Victor Gonzalez

(back to top)

🔭 Future Features

• Add animation to create smooth user experience.
• Enable only admin users to add or delete houses.
• Implement proper user authentication from the front-end to the server.

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome! Add suggestions by opening new issues.

Feel free to check the issues page.

(back to top)

⭐️ Show your support

Give a ⭐️ if you like this project!

(back to top)

🙏 Acknowledgments

Authors would like to thank:

• Murat Korkmaz for the Original Design Idea.
• Microverse
• Code Reviewers
• Coding Partners

(back to top)

📝 License

This project is MIT licensed.