Travel bee

The best booking website you will find!

About   |   Demo   |   Tech Stach   |   Features   |   Objectives   |   Starting   |   Documentation   |   Authors  

🎯 About

TravelBee is a responsive booking website where people can list or rent properties for short-term use. It can be anything from a cabin, an island, a boat or even a whole castle. Travelers can browse the site for the accommodation that’s best for them by applying a number of filters to narrow their searches. Filters include factors like available date, location and property type. After creating an account and login in the website, a place can be booked and the fun of going on vacation can begin.

We built this project as a part of our studies in Digital House for the Certified Tech Developer career. As we followed an agile approach, the process was divided into a series of sprints. Each sprint involved discovery, design, development, and testing - as well as a lot of teamwork.

Creating this project from scratch was a challenging and wonderful experience that changed us for the better. The learn-by-doing method allowed us to absorb and aquire not only technical but also soft skills.

👉 For more detailed information (in Spanish), checkout the project Wiki.

🔗 Demo

Link a TravelBee

🚀 Tech Stach

                                       

See more

• momentjs
• nuka-carousel
• date-fns)
• react-loading-skeleton
• sweetalert2
• react-lines-ellipsis
• jwt-decode
• react-day-picker

🔥 Features

• Responsive website
• Search bar with filters
• Lightbox gallery
• Interactive calendar
• Creation of an account
• Login in & JWT
• Booking an accomodation
• Sending confirmation emails
• Publishing new products
• Editing publications

💪 Main Objectives

✔️ Backend

• Create a CRUD Rest API with Spring Boot and Hibernate
• Document the API with Swagger
• Model UML and connect Java code to a MySQL database
• Implement register and login through Spring Boot Security
• Securing booking endpoint through JWT and roles assignment

✔️ Frontend

• Create a responsive web layout with React, HTML and CSS
• Manage interactions and events
• Connect to an API and handle response states

✔️ Database

• Model a database that satisfies the project's funcionalities with a DER diagram
• Create and implement database

✔️ Infraestructure

• Implement an EC2 instance for the backend
• Implement an S3 Bucket for the frontend and all images
• Deploy the app on AWS
• Connect to provided database
• Build an effective CI/CD pipeline

✔️ Testing

• Notificate errors
• Write test cases, smoke and regression tests
• Automate tests with JavaScript and Selenium
• Test web services with Postman

⚡ Project Database Structure

✅ Requirements

Before starting 🏁, you need to have Git, Node, VSCode, IntelliJ and MySQL installed.

Note that this is only if you want to edit the project, if not you can use the TravelBee app directly from this link.

🏁 Starting

# Clone this project
$ git clone git@gitlab.ctd.academy:ctd/proyecto-integrador-1022/0222-ft-c1/grupo-08.git

# Access
$ cd grupo-08/

# Initialize the project
1. Open the 'backend' folder in IntelliJ. 
2. In the application.properties file, modify the user and password with your MySQL data. 
3. Run the API.
4. Open MySQL and run [(this script)](url) to load data into database. 
Important: the admin users must be added from Postman or directly into the database.

# Install dependencies
1. Open the 'frontend' folder in VSCode and open a new terminal:
$ npm install
2. Run the project
$ npm run dev

# The server will initialize in the port indicated in the terminal

🎮 Scripts

• run dev: starts the application at localhost:3000

📃 Documentation

API Reference

Swagger

Testing final report

Documentation

👥 Authors

• Fiumana, Valentina @valenfiumana
• Urriza, Gisela @Gigi-U
• Marienhoff, Iván @ivanM
• Del Litto, Segundo @segudellito -

Made with ❤️

 

Back to top