I went with Laravel for this project due to it requiring quite a large amount of backend functionality which would be a messy task using Wordpress or another framework I am not familiar with. Much of the set up for this site is very similar to another project of mine which you can read about here. This project is a chance to showcase complex Vue components and data storage in Laravel which came about from the need for a custom surveys and polls builder similar to Survey monkey.
The site would very much be a case of function over style. As the Volunteering research hub was a new concept, there were no existing brand guidelines or anything, only a newly designed logo. The client advised that she liked the look of these sites:
Which I took some inspiration from in terms of layout but wanted to incorporate a modern touch. Below you can see the process of changing up the design based on client feedback. The original site used a purple themes which the client feared would be to heavily associated with the university's brand which prompted me to switch to a more monotone site and finally one more in line with the design and colours of the logo.
Because the site did not require any sort of complex styling, I decided to learn Tailwind CSS to speed up the process.
To learn it I used a combination of the documentation and Traversy media's tailwind crash course. To summarise Tailwind allows for inline styling with a variety of classes in the library. For example shown above, some of the classes used change margins, colours and other aspects without having to make seperate style sheets or need to think of unique class names. Taking this approach greatly sped up the development of the site and meant that I could focus on functionality.
The main feature of the hub was being able to create custom surveys and collect data from responses. To do this, I used two Vue components, one to create a survey and one to visualise them. A survey has many questions which can be open, multiple choice or ask for a response using a given scale. The survey builder works by using an array of questions. Clicking on the add button on the builder will push a new question object to this array which takes in a type and question input. Finally when the survey is saved the data is serialised as JSON and sent to the API which deals with storing the information.
When the add button is clicked on the survey builder, this function pushes a new default question object to the questions array ready to be edited. When added to the array, it is rendered out with a v-for loop in the DOM so that additional forms are added to the page to be edited by the user.
Rather than sending the information as a form, the data can instead be serialised in Javascript and sent through Axios rather than a php form with simple fields.
When the JSON data is received by the controller it is decoded by php back into an Array structure. The controller than then loop through the array and create questions with the given survey id. The survey is then created normally using the form data.
The Poll builder works identically to multiple choice questions in the survey builder where answers are separated by commas. When this data is received by the front end Poll component, it can then loop out an array of answers using array.split(','). Each answer will be made into a button which will send an axios request to add an extra vote to that poll's result.
Once data has been collected by surveys and polls and have been stored in the database, The admins have the option to export it into excel spreadsheets. To enable this, I used the Maatwebsite\Excel package which can create excel sheets using a blade view. I created an export class which takes a survey id as a parameter and sends the data to a view. The view is then used to construct a html table which is replicated as an excel file, shown below.
After deploying the site, the client gave the following feedback:
Lewis (Red Squirrel Studio) designed a research website for us: www.volunteeringresearchhub.co.uk. We wanted the site to be a place where we could disseminate our research to a variety of audiences, collect data in future, and track who was using our site and our resources. Lewis designed us a site that had a newsletter and a survey function, and where we could upload (and people could download) our toolkits and other resources. The website enables people to sign up to a newsletter. The site is very easy to navigate and use, and Lewis has been extremely helpful in guiding us through the process of us working out what we needed, and which of the different possible options might be best. He has been flexible and communicative and has worked to our timeline, which we have greatly appreciated. We knew nothing about website design, but feel we have a great website that works well for our project.