The struggle of the blank page is real. Where does one begin? Do you dive right into building mission critical functionality or do you build a basic login system for the hundredth time? Maybe it’s better to focus on building a killer CI/CD pipeline before the first line of application code is written. And before you know it, the hackathon is over.
It’s easy to get caught up in the minutia when you’re starting a brand new project. Engineers are notorious for prioritizing “perfect” well ahead of “good” and time easily slips by.
— Sorry to interrupt this program! 📺
If you're interested in learning Node in a comprehensive and structured way, I highly recommend you try Wes Bos' Learn Node course. Learning from a premium course like that is a serious investment in yourself.
Plus, this is an affiliate link, so if you purchase the course you help Alligator.io continue to exist at the same time! 🙏
I’ve you’ve ever participated in a hackathon, you know that time is of the essence. Oftentimes teams have only one or two technical resources, so speed is of the utmost importance.
That’s what the Hackathon Start comes in clutch. The project is a kickstarter for Node.js web applications and being around since 2014, it’s fairly mature.
This boilerplate project is easy to get started with and takes care of a lot of the grunt work involved with starting a new project like basic UI theming, authentication and other API interactions that allow for you to quickly accept payments and more.
The project can be run directly via
node (version 8+) and requires MongoDB to be installed. Fortunately, the project has been Dockerized so you can skip the local development setup and just use Docker via
Getting caught up in how you’re going to host things? Resist that urge to build out a new server and deploy to Heroku in one easy step.
The easiest way to get the ball rolling is to clone the repository:
$ git clone https://github.com/sahat/hackathon-starter.git gator-app $ cd gator-app
# via npm $ npm install # via Yarn $ yarn install
And get to hacking:
# Local stack $ node app.js # Docker $ docker-compose build web $ docker-compose up web
Quick and easy, you should have a working boilerplate available from your web browser at
It's always a good idea to use a version control system with all of your projects, so it's recommended that you fork the project and clone that repo, or be sure to spin up a new project and change the remote host for the cloned project.
At this point you should have a functional web application running on your system, complete with a login system and contact form.
Depending on what you’re planning on building, the logical next step would be to configure any APIs that you need for your project.
API service credentials are stored locally in the
.env file in the root of the project. Out of the box, the file doesn’t exist, but you can create one based on the included
Since v2.0 of the Hackathon Starter, the
.env.example contains dummy keys to help you get up and running faster. Obviously, you’re urged to swap out these keys for your own keys before deploying to production.
Obtaining API keys is fairly painless and is unique to the service you’re wanting to use. Fortunately, the process for each service included in the project is very well documented
Well if all of the third-party APIs are configured, it would be good to start massaging the site to look less like the boilerplate and more like what your amazing designer has cooked up for your MVP.
The views of the boilerplate is conveniently located in the
views directory and are in Pug format.
While not my favorite template engine, as an owner of pugs, I approve!
Now that things are looking about right, it’s probably a good idea to delve into writing the back end for your system.
Back end code is housed in a few different places. Database-related code is in the
models and business logic and routing is grouped into the
Done already? Let’s get this thing shipped off to production and start getting some users!
While documented as a single step, the Heroku deployment process is actually a few steps, depending on where you’re at in the local setup process.
First, you’ll want to make sure you have a Heroku account. Next, you’ll want to down and install the Heroku Toolbelt.
With the toolbelt installed, run
$ heroku login and enter your Heroku credentials. Then, from within your project’s directory, run
Now that we’re logged in and the app has been created, run
$ heroku addons:create mongolab to setup the mLab add-on and configure our MongoDB environment variable.
After you’ve done all of that, simply run
$ git push heroku master and you’re good to go!
As mentioned, it’s a bit more than one step, but once the initial setup and configuration is done, it’s just a single command to get updates to your app up to production!
This Hackathon Starter helps to alleviate the dreaded blank page syndrome that can happen when approaching new projects. It’s been around for a while, is actively maintained, and is extremely feature rich, particularly in regard to the third-party APIs, which are readily available with minimal effort.
By cutting through the noise, you can focus on what matters at the next hackathon you attend, building your minimum viable product instead of losing time trying to build the most perfectest login system… yet again ;)
Best of luck and happy hacking!