The goal: Create a AirBnB clone with a twist!
I have been invited to a Rockabilly themed party but I have nothing to wear! And I'm on a budget.
My fairy godmother VintHub is here to save my cinderella day!
I can rent out a whole Rockabilly outfit for the weekend, and put my dress up to rent to make a bit of extra cash for the party!
Demographic: 20-60 year old vintage lovers.
People who love the style and elegance of the past but have a limited budget.
Users who love variety but hate fast fashion.
Rent out items or put your own up for rent.
Search based on title, description, category, brand, and size.
Manage your bookings in 'My wardrobe'.
Challenge: Assigning the correct data type to each column in the models.
Solution: Created a DB schema to map out the back-end and assigned data types which we confirmed with a TA before coding.
Challenge: One of the biggest challenges was adding all the necessary validations for the bookings model, to ensure users could not create an invalid booking.
Solution: To solve this problem we added validations to the dates to format them correctly and to check the booking is in the future. We also validated and formatted the duration and price. Lastly, we stopped users booking an item that was already rented out.
Challenge: Lack of free vintage API.
Solution: Overcame seeding-related challenges and lack of vintage API by using faker and sourced vintage images that I renamed to the extact name on the product to be able to link them.
Challenge: This was our first group project with only one week in which to complete it.
Solution: To collaborate in an agile work environment we created a KanBan board using Github projects. This helped us to keep track of the progress of the project and make a plan for everyone that maximised efficiency and prioritised urgent tasks.
Ruby models, controllers, and routing
HTML for views to build structure of the webpages
Git version control and code reviewing practices
Accessibility implementation best practices
Responsive design
SCSS stlying using partials, nesting, and chaining
Creating inclusive user experiences
Balancing information density with usability
Building trust through transparent design
Color theory and contrast for accessibility
Used DB schema to visualise the back-end structure
Breaking down large problems into actionable solutions
Prioritising features for maximum impact
I mapped out the key user journeys and the purpose behind each step. I prioritised them as we were working to a tight deadline.
Next I selected the path, verb, controller, and action for each step to help us set up the back-end.
Lastly, I assigned each step to team members, according to their interests and skill sets.
I planned the DB schema for the website, getting feedback from my team members and TA.
This helped me visualise the back-end structure and ensure each model table contained the correct columns.
The biggest challenge was assigning the correct data type to each column.
To manage my team in an agile work environment I created a KanBan board using Github projects. This helped me to visualise the "Things that were, things that are, and some things that have not yet come to pass."
It enabled me to track the progress of the project during our morning stand-up and make a plan for everyone for the coming day that maximised efficiency and prioritised urgent tasks.
We also used a dedicated slack channel for communications throughout the project.
I created a new rails app and repo on Github, and invited my team members to collaborate.
Then I created the Heroku app to do the initial deploy, so I could test the app in production.
Next I created the models, based off the DB schema. Worked in pair-programming with Marianna reviewing. I used Devise to setup the user model.
The biggest challenge was adding all the necessary validations for the bookings model, to ensure users could not create an invalid booking.
To solve this problem I added validations to the dates to format them correctly and to check the booking is in the future. I also validated and formatted the duration and price. Lastly, I stopped users booking an item that was already rented out.
I created the base controllers, actions, and views.
We aimed to work with tasks as features, following the feature flow from route, to controller action, to corresponding view. So we could explore the full-stack development life-cycle from back-end to front-end.
I refactored the initial HTML into partials for code that was reusable, such as index and show cards.
This helped me organise my code to improve readability by seperating components into manageable elements, and enabled me to update it and apply tailored SCSS later on.
To create the new booking form, I split it into a partial and rendered it in the new.html.erb file using simple_form_for.
I created a datepicker controller using flatpickr.js to give users the option of adding the date on a calendar.
To allow users to search through the vintage items based on title, description, category, brand, and size.
I used the pg_search gem to build ActiveRecord named scopes that utilise PostgreSQL's full-text search.
Added delete feature to bookings and items a user has posted with a notification and redirect to the bookings index page.
Using the partials and classes I created in the HTML, I linked corresponding tailored SCSS stylesheets.
For example; I added box-shadow and border-radius to cards to make them stand out from the back-ground.
I used flexbox to arrange and align the image and content within the cards to ensure responsive layouts.
I changed the colour and styling of the CTA buttons so they stand out but still fit into the colour scheme.
To ensure my code is clean, organised and easy to read I utilised SCSS partials, nesting, and chaining.
As this was a one week sprint we had to prioritse the key user journey, below is a list of features I would like to add in the future to improve the user experience:
Filter or group items by category, brand or size on the items index page.
Create drop down menu for form inputs - category, size, and brand.
Add time period column to items (e.g. 1950s).
Add price if not returned column to items, and explain procedure to users.
Matthew Casey (Junior Full-stack Developer)
Mariana Barbieru (Junior Full-stack Developer)