Foodtrucks is a complete full stack project using modern web technologies with a frontend/backend split. Designed to be scalable and secure, fast and intuitive. Built to tackle a personal challenge of finding mobile food.
Potentially a 'Cambridge thing' a foodtruck is a van or similar designed to, or retrofitted to, provide grub on the go. These can be found camping outside Pubs around Cambridge and the surrounding area - their mobility offering a variety of quirky food. In my experience I found out about foodtrucks by a location (e.g. pub/venue) advertising the fact they had them scheduled to turn out - often given in a 'week ahead' summary posted on Facebook or the like - but I was frustrated that I couldn't access a complete, easy to navigate list. My plan is to look at different data fusion I could hypothetically use for this - and produce a simple list of trucks with a good UI.
The foodtrucks app is live and you can find it here.
Feeding the backend
Like a broken record, I once again turned to Flask for the backend. Although initially most of the data stayed within SQLAlchemy and I was just producing JSON output that I could start using in the frontend. Once the data was working how I wanted I went back to the backend and created a simple RESTful interface to provide foodtruck info (initially) for today, tomorrow, this week, and also the upcoming week for a specific foodtruck.
Pulling it together
So how is this all displayed? I wanted to create a proper web app and this required moving away somewhat from the more manual approaches to CSS and Javascript I have used in the past, and towards modern frameworks. For this I used React as the app framework, with Bootstrap for the interface - this was all setup using the create-react-app boiler plate.
I found React really intuitive in the end, although a bit of a learning curve to begin with compared to the templating engine style output I was more familiar with. I found it fast to get going and rewarding. I am newer to some of these web frameworks, and do find myself longing to dig under the hood - however, its so easy to find resources online and generally just import the features you need from NPM.
The frontend was a challenge in itself - getting it working how I wanted on both mobile and desktop with the right user experience took some time. Using full Bootstrap with React-Bootstrap was a joy however, and my experience was that things just worked out of the box. I used a custom SCSS file to make some more bespoke changes to the styles.
The frontend is hosted on netlify, and the backend on PythonAnywhere.
Next steps
Waiting on a development branch is a React Router integration such that the url is reflective of the current view. This is also my route in to a view of event by truck. The backend is written to query upcoming events based on a unique truck 'slug', and I just need to work out exactly the UI/UX for getting here (obvious option is a click on a foodtruck in the main event list - but I need to think how foodtrucks are findable outside of this).
Further search based extensions are categorisation of trucks so the user can search by cuisine. Ultimately however I want to be able to search based on location with some kind of map UI for this.
The next major iteration on the backend is using authentication to be able to securely add and edit info through the REST interface. I want to keep the frontend/backend split and want to explore security options in this realm.
More to come.
Top ^