Click here to access the GitHub Repository for this project
Production Deployment Client https://crafty-tukka.vercel.app
Production Deployment API https://crafty-tukka-api.herokuapp.com
Staging Deployment Client https://crafty-tukka-frontend-staging.vercel.app
- 1. Purpose
- 2. Functionality and Features
- 3. Target Audience
- 4. Tech Stack
- 5. User Stories
- 6. Application Architecture Diagram
- 7. Dataflow Diagrams
- 8. Wireframes
- 8.1 Planning and Implementation
- 8.2 Wireframe Images
- 8.2.1 Landing Page Views
- 8.2.2 Map View With Event Details
- 8.2.3 Food Truck List and Details Views
- 8.2.4 Venue List and Details Views
- 8.2.5 Venue and Food Truck Filter Views
- 8.2.6 Registered User Sign In Views
- 8.2.7 Food Truck and Venue Sign Up Views
- 8.2.8 Food Truck Booking Request and Prior Booking Screens
- 8.2.9 Registered User Dashboard and Existing Booking Screen
- 9. Project Management
- 10. Testing
In recent years, the city of Brisbane has seen the rise of numerous independent craft breweries whose locations range from the inner-city through to the outer-suburbs. Many of these breweries serve as community hubs where people can go to enjoy a locally produced beverage and quite often, purchase culinary offerings from one of the fantastic food trucks that operate in this great city.
A challenge faced by breweries wishing to book a food truck has been the inability for them to instantly view the availability of a truck before making a booking request directly to the business operator. Quite often, this results in a brewery having to contact numerous food truck operators before they find one that is available for a particular day and time.
Customers who wish to know what food truck will be at a particular brewery location at a given date and time can struggle to easily find this information. Usually it is achieved by trawling through the breweries or food truck businesses' social media channels in hope that they have posted their upcoming events for the week.
Crafty Tukka is a web application that aims to solve these problems by facilitating bookings between breweries and food truck operators and then displaying them with an easy to navigate user interface.
Crafty Tukka initially featured 2 types of user accounts that require an initial sign-up and secure login credentials: Venue and Food Truck. However due to time constraints, the developers have given booking functionality to only the Venue operator with Food Truck authentication to be implemented in the future.
Upon creating a new account, a brewery venue will be required to enter general information such as the business name, description, email and phone number with an option to include a website and social media links. Unique fields exist for each type of account with breweries being required to provide an address.
Once registered and logged in, a brewery venue will be able to search for food trucks that are available on a given day . When the venue has found a food truck that they wish to book, they will be able to create an event. Venues are able to view, edit and cancel bookings.
When a booking is created, the details of the booking are added to the Crafty Tukka main page. This page features a map with pins showing the location of food truck events happening today with a list of upcoming events displayed adjacent to the map.
Any member of the public can view the map and event list. They also have the ability to view the individual details of all food trucks and venues.
The Crafty Tukka application was created for use by food truck and brewery businesses in Brisbane. It also aims to serve members of the general public who wish to find out which breweries are hosting food trucks on a given day.
| Front-End | Back-End | Front-End Libraries | Tools | Dev-Ops | Deployment | Testing |
|---|---|---|---|---|---|---|
| React.js | Ruby on Rails | Axios | Draw.io | Git | Heroku | Jest |
| HTML5 | Ruby | Material UI | Whimsical | GitHub | Netlify | Rspec Rails |
| CSS3 | Postgresql | Google Maps API | Notion | VS Code | ||
| JSX | Bcrypt | Dotenv | Discord | |||
| Knock | Date Picker | |||||
| AWS SDK S3 | Places Autocomplete | |||||
| EsLint |
Axios: We used Axios to make all of our React frontend API calls to our rails backend.
Material UI: We used the material UI styling library in our app to help keep a consistent styling theme throughout the application.
Google Maps API: The google maps API was required to render a map for our users to view upcoming events on a map.
Dotenv: We used Dotenv to store our environment variables such as our Google Maps API key.
Date Picker: We used the React date picker to enable users to select a date for their event.
Places Autocomplete: We implemented this feature to try and eliminate user error when entering addresses and this way once the user chooses the correct address we know we will have the correct lat and long coordinates.
EsLint: This came pre-bundled in our React template and helped keep a consistent codebase.
Bcrypt: We used Bcrypt to assist with password hashing so that users passwords are kept secret even from our servers.
Knock: Knock handled our user authentication in the back-end
The developers of Crafty Tukka created four personas whose needs have guided how the application looks and functions:
-
The Craft Brewery Patron
- Visits craft breweries on a regular to semi-regular basis.
- Is happy to make a journey across town to visit a particular brewery or attend an event held at one.
- Enjoys the social environment created by a craft brewery and will often visit one with family and friends.
- Choice of visited brewery sometimes dictated by the choice of food or entertainment on offer.
-
The Food-Truck Foodie
- A culinary adventurer who is seeking the best food truck fare that Brisbane has to offer.
- Has favourite food trucks that they will seek out on a regular basis.
- Will actively search for trucks and cuisines which they have not tried yet.
-
The Brewery Events Coordinator
- Responsible for organising and marketing events to be held at the brewery.
- Looks for unique and innovative themes concepts to attract patrons to the venue.
- Is time-poor as this role is often part-time or shared with other brewery duties.
- Handles social media posts and online promotion of the venue.
- Requires tools to make the performace of their role more efficent and effective.
-
The Food Truck Operator
- A small business owner/operator whose existence depends of securing ongoing locations in which to trade.
- Responsible for their own marketing, social media accounts and brand awareness.
- Takes great pride in creating high-quality food.
- Cost margins are often razor-thin so having a full operating schedule with access to adequate patronage is essential to the viability of the business.
- Is looking for ways to make the operation of the business more cost and time efficient.
Following the creation of the four concept personas, the development team determined which functions each user would want to perform in the application. If was determined that the Craft Brewery Patron and Food Truck Foodie personas shared overlapping needs and were therefore amalgamated into a single General Public user type. The joining of these personas into the one user story was possible due to the fact that they did not require authentication to use the application.
Amendments to the actions a Food Truck user type could perform were also made after consideration of real-world requirements. An example of this occurred where, in the original user story, a Food Truck user could request a booking from a Brewery Venue user. Upon consultation with brewery venues, it was determined that this feature would not be desired by breweries and add unnecessary complexity to the application. As a result, the feature of food trucks requesting bookings from a venue was scrapped from their story.
In order to manage the application user stories, the developers created a kanban board dedicated to tracking their changes and implementation. The board categorises each user story as Minimum Viable Product (MVP) or Sprinkles (optional features). Within each of these categories, the stories are tagged with the attriutes Epic (User Type) and Priority for ease of identification and are assigned a unique number identifier for referencing in the development phase. Stories that have been removed from either MVP and Sprinkles shifted into a Backlog list.
Using the concept personas a guide, the developers of Crafty Tukka created clear stories for the three user types that will interact with the application. The aim of creating a streamlined Minimum Viable Product (MVP) guided what was to be initially included and excluded from each user story. A committment to constantly seek feedback from users during development and production means that these stories are subject to change.
As a General Public user type:
| I want to... | So I can... | Related Feature |
|---|---|---|
| View today's operating food trucks on a map | See a visual location of today's events | Home page map with venue pins |
| View today's operating food trucks in a sidebar list next to the map | Quickly reference each event's details | Home page map sidebar |
| View a list of all registered food trucks | Select a food truck to find out more about them | Access via a view trucks navbar link |
| View a list of venues | Select a venue to find out more about them | Access via a view venues navbar link |
| View the details of a particular food truck | View their bookings, website and socials | Access via a clickable link on each truck |
| View the details of a particular venue | View their website and socials | Access via a clickable link on each venue |
| Filter food trucks by cuisine type | Narrow down my search results to help me make a choice | Access via a dropdown menu in the view trucks component |
| Filter venues by event date | Narrow down my search results to help me make a choice | Access via a dropdown menu in the view venues component |
As a Food Truck Operator user type:
| I want to... | So I can... | Related Feature |
|---|---|---|
| Be able to do everything that a General Public user can do | Keep up to date on the status of current venues and competitors | |
| Sign up as a food truck user type | Have venues contact me to make a booking | Sign up page accessible from navbar |
| Receive booking requests from venues | Grow my business revenue | A booking request alert in which the truck can accept or reject booking |
| Define my primary cuisine category | Have users find my food truck by cuisine | |
| Log in and out using secure credentials | Be confident that my private information is secure | Created using brcrypt and knock authentication |
| View my existing bookings | Be aware of my upcoming obligations | Access via clickable link in the user dashboard |
| View my pending bookings | Approve or reject them | Access via clickable link in the user dashboard |
| Upload my business image as an avatar | Have recognisable branding on the map | Required at the time of sign up and can be edited by the user in the edit profile page |
As a Venue user type:
| I want to... | So I can... | Related Feature |
|---|---|---|
| Be able to do everything that a General Public user can do | Keep up to date on the status of current food trucks and competitors | |
| Sign up as a venue user type | Make bookings with food trucks | Sign up page accessible from navbar |
| Log in and out using secure credentials | Be confident that my private information is secure | Created using brcrypt and knock authentication |
| View available food trucks | Target food truck bookings appropriately | Access via a date select tab in the create booking page |
| Request bookings from a food truck whose availability on a particular day and time is displayed | Have confidence that I am not wasting my time by requesting a booking from an unavailable truck | Trucks who have existing bookings on a day are excluded from list of trucks |
| Submit a request to edit a booking | Make changes if necessary | Access via clickable link in the my existing bookings page |
| Submit a request to delete a booking | Make changes if necessary | Access via clickable link in the my existing bookings page |
| View my existing bookings | Be aware of my upcoming obligations | Access via clickable link in the user dashboard |
| View my pending bookings | See if a food truck has approved or rejected them | If a booking is rejected, the venue has the ability to request a new truck without having to create a new booking |
| Upload my business image as an avatar | Have recognisable branding on the map | Required at the time of sign up and can be edited by the user in the edit profile page |
When creating the wireframes for Crafty Tukka, the developers were guided by the requirements of each user story/epic with priority given to minimum viable product (MVP) features. As all users of the application will be able to perform the actions of a general public user type, the developers prioritised the development of the wireframes for their page views before starting on those for the venue and food truck users.
Each wireframe was annotated with a reference to the corresponding user stories and links inserted into the User Story Card components of the User Stories Kanban Board.
A mobile first methodology will be used in the development of the application components and this has been reflected through careful consideration of UX/UI features in the mobile views.
Below are examples of how each user story is to be rendered in mobile, tablet and desktop views with links provided to the corresponding user stories.
Referencing MVP User Story #1
Referencing MVP User Story #2
Referencing MVP User Story #3 and MVP User Story #7
Referencing MVP User Story #4 and MVP User Story #8
Referencing MVP User Story #5 and MVP User Story #6
Referencing MVP User Story 12 and MVP User Story 25
Referencing MVP User Story 13 and MVP User Story 23
Referencing MVP User Story 26
Referencing MVP User Story 19 and MVP User Story 29
Link to Main Project Management Platform and Kanban Boards
We have decided to go with agile methodology with the use of epics and sprints. This allows us to take an iterative approach to our project management and to ensure that we are kept accountable to our goals. We found that by setting up a collaborative workflow environment in Notion we were able to improve our efficiency and reduce any double handling of tasks.
The overall project management will be handled by the Project Deliverables timeline that we set up to help keep us accountable to our daily targets. This is the single source of truth for our project and all of our documentation, processes, ideas, goals and code snippets live here.
General task management will happen on the tasks board which will serve to pick up any once-off project-related tasks that aren't directly related to implementing the epics and sprints. Any Bugs that we come across will also be caught and triaged on this board as well. These will be referenced in the GitHub pull requests as necessary.
Any tasks associated with the epics and sprints will happen in the user stories board and will be referenced in our GitHub pull requests. Each of these individual story cards will be made up of sub-tasks which we will use to help implement the code for the user story.
Project Deliverables
Tasks Board
User Stories Development
Tasks Board
Project Deliverables
Tasks Board
Project Deliverables
Tasks Board
User Stories Development
The Crafty Tukka Project used a combination of both automated and manual testing. In the backend, rspec-rails was used to test models and routing. Jest was to be used for front-end tests but was ultimately shelved due to errors implementing tests in this framework while using global state.
Manual testing of the application in development and production was performed by a third-party. Testing was performed at regular intervals during development and at the point of deployment to production.
