What’s for lunch? Voyage and LNCHBX solving real problems
Using Voyage to quickly deploy a fun, internal tool that we decided to open-source.
Here at Voyage, we’re excited about building cool shit that solves real problems; A real problem we had here in the office (pre-COVID) was figuring out where to go for lunch! Today, I’m going to walk you through a little project I built just for fun that we use within our team, including how Voyage saved me a ton of time on development and QA
“UGH! Someone just pick a place!”
Yeah… I’m usually the one who says that, but I can’t be the only one, right? I’m a creature of habit. When someone asks me what I want for lunch, I will tell them the same 5–6 places. Inevitably, the discussion devolved from there.
There were times that we would spend 30–45 minutes trying to figure out a place to go, just for someone to exhaustedly claim “forget it. I’m going to {some fast-food chain}” — cough cough talking about you Brayden cough cough — . We were spending a lot of time with the same discussion everday, and my developer brain realized this would be a great opportunity for some automation.
Disclaimer: I’m officially the worst developer on our team. There was a time when I thought I was a pretty solid dev but that time has certainly passed. As CEO, I’ve had to move into a leadership role, and that’s been difficult (another blog post on that later). However, I still like to tinker, so this became an excuse to mess around with ReactJS and “automate the same freaking discussion we have all the time!”. With that said, please do not massively critique my code. I know it’s not perfect; Hell it’s probably not even that good, but it gets the job done…for the most part.
Show me what you got
So let’s start off with some of the tools I’m using. First, I set LNCHBX up as a mono-repo project with a Laravel 7.x API and a ReactJS front-end. LNCHBX is built using Docker and since this is Voyage, naturally we used Voyage to create the demo environments.
I’ll be showing screenshots as I go, so I figure I’ll list off the other programs I use:
- VSCode Dark+ theme
- TablePlus as my Database GUI
- FourSquare’s Restaurant API
Great, let’s get going.
What’s for lunch?
I’m glad you asked.
HERE is a link to the open-source repository and HERE is a link to the demo. We’ve made it really simple to get started. You can view the READ.ME for more information, but let’s start with a couple of quick commands to get you up and running.
Before you get started, you should do two things. 1.) clone the repo and make it yours :) and 2.) make sure you have Docker and Node installed. The development environment is configured via Docker so no need to worry about installing PHP locally or any extra Laravel configuration.
First, copy the `server/.env.example` file and paste it into a new `server/.env` file. You can make do with everything I’ve provided. However, you will need to sign up for a developer account with FourSquare. Create an app and generate your Client ID and Secret Key variables. Paste them as follows:
From the project root run:
npm i
npm run dev
In the root package.json file you can see that by running the command above, we kick-off:
“dev”: “concurrently \”docker-compose up\” \”cd server && php artisan serve\” \”cd client && npm run dev\””
Which in turn also kicks off the following commands found in `deploy/build_run_app.sh`.
These handy scripts create the entire environment for you in a few minutes and could be a really great baseline for future projects! Let’s move on to the database.
If you would like to seed the database with members of your team, check out `server/database/seeds/DevSeeder.php` and edit lines 31 through 53. If you don’t use seeders and migrations, then you’re missing out. (Read Jaden’s blog about it HERE.) It makes life so much easier.
That should be all you need to do to get the app up and running! Just navigate to `localhost:8080` and you’ll be directed to the login screen. (Check the DB for the Faker generated user accounts if you didn’t create your own)
As the app sits, it will query for restaurants within 1500 meters of Oklahoma City. To change the location, radius, and the number of restaurants available, head to `client/src/constants.js` and checkout lines 10 through 23. You can change the location, radius, limit, and lat/long.
Bon Voyage (aka my shameless plug)
The last step is setting up Voyage. Head HERE to create a free trial (no credit card required because we hate that) and you’ll be able to deploy this full-stack up in minutes each time you create a PR.
Once you’ve created your workspace and connected your repo here is all you need to create your configuration file:
As you can see there are environment variables within the Voyage Config file. In my instance, I use AWS S3 to store images for users. You may not need that information so you can remove it. However, the app relies on FourSquare so by adding the variables into this config file, and then adding the actual value into the Voyage dashboard, Voyage is able to deploy the application properly without exposing your secret keys. Here’s how to do that.
By declaring the variable `name: FOURSQUARE_CLIENT_ID` we have to then give the corresponding value to Voyage. Here are the steps to do so:
- Go to Voyage Dashboard Projects Tab
- Select your project
- Select Setting in the top right corner
- Select the Environment Variables tab
- Add the variables and their values
- All Done
Now Voyage can access your application’s variables without exposing them in the codebase.
Let them eat cake
Setting that up took less time than getting my team to decide on where to go eat. All you have to do now is push up a PR and Voyage will deploy the app, and give you a URL to view your very own LNCHBX. Hopefully, it helps you and your team spend quality time together bonding over delicious meals rather than sitting at your desks eating lunch.
If you feel like contributing, here are some features I will (hopefully) be adding as time goes on:
* Ability to update your categories. As of now they are just randomly seeded 🙁
* Better location services
* User registration and password resets
* Some better UI (I came up with this on a whim)
Feel free to leave comments with suggestions or open up an issue on Github!
