HapsHub

A new app that takes away the stress of event organisation. Struggling to decide what to do? We can help out and auto-generate ideas based on your selected date, location, and category. 

• Suggestions for adventures based on users date, location, and category preferences.

• Search  through suggestions.

• Create personalised event pages.

• Invite your friends! 

• Challenge:  Our biggest challenge was seeding the suggested adventures based on the users preferences. 

• Solution: We overcame this challenge by using Google Places API. 

• 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

I planned the DB schema for the app, 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, with the corresponding data-type.

This was also an invaluable step for checking foreign keys and associations, as you can see there are quite a few! 

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 bought hapshub.xyz on Namecheap and linked it to the Heroku app.

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 creating them in the right order with the correct foreign keys. Especially for the adventures and events models as they both dependent on each other. I overcame this challenge by creating events model first, then adventures model with events foreign key. Next, running a migration to add adventure id to events. And another migration to allow null adventure id on events to avoid a loop.  Lastly, under the "belongs_to" associations, I added "optional: true".

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. However, due to dependencies this wasn't always possible.

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 event form, I split each input into a partial and rendered them in the new.html.erb file using simple_form_for. 

I used nav tabs and next buttons so users could easily navigate through the form.

I added HTML5 for the date input to give users the option of adding the date and time on a calendar.

To allow users to search through the suggested adventures I used the pg_search gem to build named scopes that utilise PostgreSQL's full text search.

Added delete feature to events with a notification and redirect to events index page.

Our biggest challenge was seeding the suggested adventures based on the users preferences, we overcame this challenge by using Google Places API.

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.