How I Build: Next.js + React Bootstrap = Micro App Magic
Growth engineer at Triplebyte since 2020. Previously a marketing and development consultant. Hack Reactor grad 2015, UCSB grad 2010. I write about a combination of marketing and engineering topics.
Sometimes, when a project is the right size and scope, it can make for a fun opportunity to try out a new framework on a stand-alone app.
We recently had such an opportunity while working on Triplebyte’s new startup equity value calculator.
The goal for the startup equity calculator was to create an engaging and educational experience, and offer supportive and informative content for users who may be considering an equity offer from a company. There were no significant technical integrations necessary with the core Triplebyte application (which is powered by Rails) – this app could stand alone.
This was the perfect opportunity to try out a new framework that should be perfect for a light-weight front-end functional app with heavy content – Next.js!
Those are some nice features 😍
What we like about Next.js
React, Node, Express, Webpack
Under the hood, Next is running on React, Node, Express, Webpack, Babel, and other React / JS tooling that has been growing in popularity over the past few years. Next.js is putting it all together with a lot of reasonable defaults that allow us to skip over a lot of boiler plate and get to working on the main app.
Simple & fast deployment
Next.js is made by a company called Vercel, which is a hosting platform. And Next.js is technically called ‘Next.js by Vercel’. In the Next.js documentation, it is recommended that you deploy with Vercel, but you can also deploy to a host like Heroku or AWS. The deployment process to Heroku (what we used) was particularly easy since Heroku runs the build and start commands by default, which is what Next.js provides on initial setup.
Bootstrapping design with React Bootstrap
One potential drawback of building a standalone app is that it may not have access to commonly shared design components that are in the core application. Obvious examples would be the general site header and footer, as well as more complex design components like modals and forms.
To quickly get a large set of customizable frontend components, we used React Bootstrap. The library is lightweight, at only 34kb minified and g-zipped, and it provides a wide array of basic components like grids, forms, modals, tooltips, buttons, and navigation.
One common complaint about Bootstrap is that sites that use it look too ‘bootstrappy’. Which is true – Bootstrap has a particular look if there are no modifications done the default styles. However, Bootstrap provides hundreds of SaSS variables that can customize the different elements of Bootstrap, and that gives excellent flexibility for different designs.
Here is Bootstrap 4’s variable file, which is made to be overwritten with customized values.
Here is the basic variable overwrite implementation we used for the equity calculator:
By customizing just these few variables – especially the primary and secondary color – we get a lot of useful buttons and font-color utilities for free.
Below is an example of how the React Bootstrap components look in React when put together. Nearly every component here is coming from React Bootstrap – Container, Col, Form, and InputGroup. The InputGroup in particular has custom designs applied to it, but since those are customizations that are done with Bootstrap variable settings, there is no need for custom styles applied directly to the React components.
Overall, the component selection options from React Bootstrap are just about perfect. And by doing a bit of customization of primary colors and forms, it’s easy to avoid the problem of looking ‘bootstrappy’.
Solving the subdomain problem
External apps are often added to a primary domain via a subdomain: ‘blog.example.com’.
A much more clean approach, however, is to add the external app as a subdirectory of the main site: ‘example.com/blog’. This helps the app appear to be a part of the primary content of the site, with no obvious indication that the content is being served separately.
Nginx to the rescue
Thankfully, we can use the load balancer – nginx – and forward traffic that matches a certain URL pattern to a different host address. Heroku explains how to achieve this with nginx in this article.
This allows us to achieve a subdirectory URL, specifically: triplebyte.com/startup-equity-value-calculator!
After the great success we’ve had with the equity calculator app, we’re excited to continue exploring different micro application implementations, so stay tuned for more!
For now, go try out the first version of our startup equity value calculator here!
Triplebyte helps engineers find great jobs by assessing their abilities, not by relying on the prestige of their resume credentials. Take our 30 minute multiple-choice coding quiz to connect with your next big opportunity and join our community of 200,000+ engineers.