Beachify

Overview

Beachify is the platform where customers can quickly browse & find any coastal recreational equipment that they need on vacation, compare between other businesses, and book, eliminating the headache of calling around to different places.

Browsing, booking, question answering, reservation and payment process is automated for the business.Built with modern, minimalist, and responsive design. It is free for customers to use.

• Service Management for Hosts.
• Host Profile View Page.
• Service Listing for Renters with filters.
• Renter Side - Both Instant Booking and Booking requests to the Host.
• Renter Side - Bookings Listings with calendar and status filter.
• Pickup & Delivery of booking.
• Drop off Equipment.
• Favorites Feature for Renters to favorite the Host and the products.

What We Have Done

We have developed this project both the frontend and backend from scratch in Laravel & React. In the admin side, we have provided various management like Beaches, Beach Gear Types, Services. And also displaying the registered Renters and Hosts listings.

In the Frontend, Home page has a filtering option with Location based, date range and Service, etc.. When searched, the customer will be able to choose from all the various items/services that Beachify has to offer in the search result page. In the host profile page, we showed their services which they offered with a price list.

• Frontend sign in with Facebook & Google. And also mail & Phone number with OTP code (using Twilio).
• Instant booking is a feature that allows customers to book with Hosts without placing a booking request. As long as a Host has the desired items or services available during the desired time period, customers should be able to complete an instant booking with that Host.
• For Delivery/Pickup, the system will calculate the quote based on what price per mile the Host has entered as their mileage fee during their signup process.
• Displays a calendar on the left side of the screen that the customer can use to click on specific dates. Any dates that have any one of the 5 types of bookings should have a red dot in the date signifying that there is past or future activity on that date. When a date that has a red dot is clicked, the system will display any of the 5 types of bookings that were completed/will occur on that date (pending, upcoming, in-progress bookings, completed and canceled).
• SMS notification implemented via Twilio and also email notifications for different actions like registration, pickup reminder, drop reminder, etc..
• The “Favorites' page will display a list of all the listings and Host profiles favorited by the customer. A customer can “favorite” a listing by clicking on the white heart at the top right corner of any listing or Host profile to turn the heart red, which signifies it has been favorited.

Code Snippets

Operation and written helper function for code reusability.

React JS framework is used in the frontend.In this we created a separate structure for common components and pages will use the common components file. Third party plugin code is created as separate components. So that we will reuse it in other pages.Laravel framework is used for the admin panel. Used traits for the CRUD.

• Auto Updation of latitude and longitude while changing google autocomplete using redux.
• How Common components are used all over the site.
• Cart Code
• Twilio Code

• Code Snippet 1
• Code Snippet 2
• Code Snippet 3
• Code Snippet 4

×

×

×

×