Home2Home Homestay Site Concept
Home2Home
Milestone Project 4 - Full Stack Development
Welcome,
This project is a property rental platform utilizing Django for the backend and HTML, CSS, and JavaScript for the frontend. The platform allows users to register as guests or hosts, list and book properties, and communicate through an integrated messaging system. It also includes Google Maps integration for searching and viewing properties on a map.
Key features include:
Live Project
Repository
Contents
User Experience
User stories
Viewing and Navigation
Guest
I want to be able to view a list of available properties to find one that suits my needs.
I want to view individual property details to see the price, description, images, amenities, and reviews.
I want to use filters to narrow down property options by location, price range, number of bedrooms, and other criteria.
I want to easily navigate the site to find and compare properties.
Registration and User Accounts
User
I want to easily register for an account to access personalized features.
I want to log in and out securely to access my account information.
I want to recover my password if I forget it to regain access to my account.
I want a personalized user profile to view my booking history, manage my listings (if I'm a host), and update my information.
Property Listings and Management
Host
I want to add a new property listing to the platform to make it available for booking.
I want to edit and update my property listings to keep the information accurate and up to date.
I want to upload images for my property listings to attract potential guests.
I want to delete a property listing if it is no longer available for booking.
Booking and Checkout
Guest
I want to easily select check-in and check-out dates to book a property.
I want to view the total cost of my booking to avoid any surprises at checkout.
I want to enter my payment information securely to complete my booking.
Administration and Platform Management
Admin
I want to manage user accounts to maintain the integrity and safety of the platform.
I want to monitor property listings to ensure they comply with platform guidelines.
I want to manage site content and updates to keep the platform running smoothly.
Design
Colour Scheme
The Colour scheme was generally kept simple and in line with best practices, with high WebAim contrast compatibilit as outlined in the test document
Main Colour
#008080 - This teal is a revitalizing and rejuvenating color that also represents open communication and clarity of thought.
Accent Colour
#004747 - This maintains the teal but darkens the colour to provide user feedback with elements such as hover and active buttons
Supporting Colours
#fff & #000 - Used black and white for high contrast, increased accessibility nad user experience.
Tyography
Logo Font : Playwrite ES Deco was used as the main font for the logo/brand of the site. It could not be used for general headings due to readability but for a brand identity it worked nicely as a decorative piece
Title Font : Montserrat was used as the title font due to high readability, compatability and versatility with differing font weights.
Body Font : Body was left as Arial/System font as it pairs well with Montserrat, is universal and highly readable.
Imagery
Little imagery was required for the body of the site due to the population of space with property images. The same image was used for both desktop and mobile hero/body images, though it was scaled accordingly for different viewport sizes.
Property images were largely from pexels and all credits will be included in a separate CREDITS.md
Icons
All icons used come from the FontAwesome library - they were used to provide information without the need for excess text, though often times they are supported by text for optimum UX. Used across amenities, navbar and search bars.
Cards
Used bootstrap cards for visual heirarchy and easy design for properties, profiles and contact forms. These worked especially well for organising content such as property listings when more than one occurs.
Wireframes
Please find all core wireframes here
Wireframe Deviations
There were little to no deviations from the original wireframe. I had a clear idea of how I wanted the User Interface to look and the general navigation of the pages.
One element missed on the wireframe is the location of the filter element on the all properties page. Located below the page title for easy access and maximum UX.
Added "view details" button below properties for easy navigation and kept property cards fairly minimal
Introduced additional interface pages such as my properties (for hosts), manage properties (for super users) and my bookings (for all users)
Database Schema
Considerations
Thins I had to take into account when compiling the DB models were:
How a user could be listed as a host or a guest and the different actions that would allow
How I could pass multiple amenities to a property whilst maintaining a clean model
How bookings would be marked as pending/confirmed for users viewing them in the basket or their my bookings page
How could I allow different levels of editing for guests, hosts and superusers
How to allow multi image capacity to property model
How reviews would link to specific properties as well as the hosts
Diagram
The following image represents the database models and relevant relationships as utilised within the project
DB Models
A list of database models used in the project can be found below :
Features - Inc. in final project
All Pages
Responsive design using Bootstrap columns
Semantic HTML
Custom CSS to give the website a cohesive and user-friendly appearance
Back to top button for easy page navigation
Toasts/JS for clearer messaging
Footer - to clarify end of page and provide business information
Header & Navigation
Logo consisting of text in Logo Font
Top navigation including:
Secondary navigation:
Footer
Company information
Social media Links
Flash Messages
Styled and located for increased UI/UX and includes messages for:
Homepage
Jumbotron - includes CTA and high contrast for readability
Featured Properties - another CTA
Become a Home2Home host - CTA to join the platform as a host
Featured Reviews - increase user trust with a final CTA to book a stay
All Properties Page
Clear title
Filter toggle button with clear indicator using fontawesome slider icon including functions such as:
Property Cards with bootstrap card structure and custom css:
Pagination - allows users to easily navigate through pages to view more properties
Propert Details Page
Property Title
Property averge rating
First property image with carousel if property has mutliple images
Date range picker allowing for booking date selection which includes:
Number of guests selector dropdown (maximum selection) with link to contact if need to book extra guests
Book now button, adds to cart with dates and guest number
Bed/Bathroom count with icons
Top amenity list (currently limited to 8)
Google Map with pin locator
Property reviews
Cart Page
Dynamic cart allowing for only one propery booking at a time for host convenience
Dynamic cart with delete/clear buttons to remove booking
Line item details including
Cart Total
Secure Checkout button
Checkout Page
Order summary including :
Checkout form that includes:
Checkout Confirmation Page
Checkout success page includes booking details
Marks booking as completed and adds to "My Bookings"
Booking confirmation email issues - see testing.md
Authentification Pages
Register/ Log In/ Log Out/ Reset Password Pages all styled to match theme
Custom signup form using DJango Allauth template allowing users to select whether they are signing up as a host or a guest
User Profile Page
Customised profile page including:
Users must be logged in
Users can only access their own User Profile
Edit Profile page
Allow logged in users to edit their own profile including all personal information
No authentication info can be edited here
My Bookings page
Logged in users can access a page displaying their bookings including:
Displayed inline multi-column on larger screens and as a sinlge column per booking on smaller screens
My Properties Page
Logged in hosts can access a "my properties" page that includes:
Manage Properties Page
Superusers can access all properties with the same styling as the my properties page and same edit property button
Edit property page
Allow hosts and superusers to edit the property details in full including:
Future Features
UX Features
Datepicker
Datepicker displays dynamic availability
The datepicker as present doesn't draw from an existing "availability" database and so a property could get double booked. Would like to implement the availability model/view within the booking app to allow for a more dynamic booking experience.
Datepicker UX improvements/optimisation on mobile
Mobile devices default override of the datepicker is frustrating. Seems a common issue and tried multiple workarounds found on a variety of forums. Would consider updating the datepicker to a more versatile open source library such as MobiScroll.
Property Pages
Interactive Map
Implement a "search by map" function, would need additional page space likely incorporated into the search results page
Sort By
Allow for property sorting in addition to standard filtering such as "Sort by Price (Low to High)"
Categorise properties
Allow hosts to add a category to their listing to allow for a more robust and precise search experience for users. This could include categories such as Luxury Stays, Seasid retreats etc.
Hosts/Guests
View host
Allow guests/users to view the hosts profile including property reviews/average rating for trust building
Review guests/hosts
Allow guests and hosts to rate eachother accordingly following a stay allowed only after checkout is complete
Cart & Checkout
Dynamic editing of booking
Allow the user to edit details such as checkin/checkout dates within the cart view and have it update cart total
Bookings
Allow for users to "rebook" a stay from their my bookings page if they enjoyed it
Additional Apps
Blog
Incorporate a site blog for increased SEO and user interaction
Custom admin interface
Utilise something like Jazzmin to customise the user interface in django easily allow for a custom admin experience and keeping admin/user experiences separate
Newsletter
Include a newsletter signup opportunity for future promotions and communications
Favourites
Allow users to "favourite" a property and add it to the navigation under a heading such as "My Favourites"
Technologies Used
Languages Used
Frameworks & Libraries
Storage & Hosting
Payments
APIs
IDE & Version Control
Other Tools
Testing & Code Validation
The following tools were used for testing and code validation. You can see results in the Testing section of this README.
Testing
Please refer here for more information on tests conducted on the Home2Home site
Deployment
Please refer here for more information on the deployment of the Home2Home site
Credits
Code
Code Institute:
I used the CodeInstitue github repo template and also utilised multiple elements from the Boutique Ado Walkthrough, though the site is largely custom built with similarities only being drawn in the navbar and the checkout (including Stripe Functionality)
Django:
I referred to the Django documentation whilst building my project. I used the docs a number of times including :
Bootstrap:
I have used Bootstrap classes throughout my project, including for layout utilities and cards. I sourced code from the Bootstrap documentation when building the navbar, image carousels, modals, dropdowns and cards. These were sourced through the Bootstrap documentation
Stack Overflow:
I used and/ or referenced code from the following Stack Overflow articles as listed below:
Datepicker
dateTime issues
GeeksForGeeks:
I used GeeksforGeeks for datetime functionality
Content
The images used are stock images sourced from FreePik and Pexels - more details can be found in the CREDITS.md
The host information and property details were ficitious and largely generated using Open AI's chatGPT
I took a lot of inspiration for the booking model from AirBnb
Acknowledgements
Thank you to the tutors and staff at Code Institute for their support.
Thank you to Ben Smith and Pasquale Fasulo at City of Bristol College for their support.
Please note this is a personal project. This website is purely for the sake of the developer's portfolio and not for public consumption.
Samuel Thomas, 2024.
Like this project
0
Posted Oct 21, 2024
This project is a property rental platform utilizing Django for the backend and HTML, CSS, and JavaScript for the frontend.
Likes
0
Views
0
Chat Down Under
ECO-CONSCIOUS, ANTIOXIDANT-RICH GREEN ROOIBOS TEA SKINCARE