The Sandbox Guide to Building a Web App
As the Spring semester gets into full swing at Northeastern, whether you’ve just finished Fundies 1 or OOD, are searching for your first co-op or just secured one, many of you are thinking about where to go next with software. Some of you may be hoping to find new ways to apply your skills, while others may be seeking out new knowledge in a field they’re interested in.
For every student looking for a way to apply software in the real world — you’ve come to the right place.
One of the most common ways that computer science students achieve these goals is by developing personal projects: building small applications while learning something new or taking an existing skill set to the next level. These projects come in many forms, including building online or desktop games, designing mobile apps, and creating robots. But today, we’re going to focus on one of the most common types of project out there — web applications.
Why build a web app?
There are three properties of web apps that make them ideal for a personal project:
- Impact. Nowadays, web apps are everywhere. Much of the software you use on a daily basis exists as a web application in one way or another, from your social media to your search engine. As web apps become an ever-growing part of everyday life, having that skill set becomes indispensable.
- Freedom. The medium of the web allows virtually any idea to flourish as its own fully-fledged application. A quick search on the internet reveals an overwhelmingly wide array of websites and web concepts, such as sharing photos, shopping, blog-writing, and playing games. The sky’s the limit. And as an added bonus, web apps are super easy to extend once the core application has been finished, meaning those cool additions you come up with along the way are a great next step for your project.
- Support. There are a myriad of tools at your disposal to help make your web app stand out. Developers have had the last few decades to iterate on and refine new and more sophisticated tools for building applications. There are few other areas of computer science, if any, with the same level of technological and community support for a new engineer looking to get started.
In fact, that’s part of why web apps are a huge part of the work we do at Sandbox. Projects like SearchNEU, a search engine for Northeastern classes and professors, GraduateNU, a new schedule planner for Northeastern students currently in development, and Cheminformatics, a chemical compound categorizer and analyzer, use web apps for their ease of development and ability to have a greater positive impact. That same kind of power is available at your fingertips.
So, let’s get started!
Hold on, where do I start?
Glad you asked.
Before we get into building the web app itself, it would be good to start with an idea. While it can certainly be valuable to learn a new technology or piece of software for learning’s sake, but unfortunately, going in blind without any idea will make it much more difficult to build something interesting with that new knowledge. Besides, watching an idea of yours come to fruition is one of the most rewarding parts of building a personal project to begin with.
Fortunately, almost any idea will do! But, a small word of advice: just as you don’t want to rush in without any idea at all, don’t wait for the perfect idea either. Analysis paralysis is a common problem for software engineers. It’s always better to jump into something you’d be happy with than delay until the perfect idea comes to mind. It never will. And if you do come up with something new while working on your project, all the better! By the time you’ve finished with the first one, you’ll be more than ready to jump into the next.
Anatomy of a Web App
To better understand the components necessary for your application, it’s crucial to understand what normally constitutes a web application in the first place.
Roughly speaking, a web application can be split into two parts: the frontend and the backend.
The frontend is the part that you, as a visitor of the site, can see: the visuals, the HTML and interactive layout, the stuff that you use and click on.
The backend is what controls the logic and data behind the scenes of the application: it’s what keeps track of users and account information, manages transactions, and makes sure all data is reliable and up-to-date.
This division is reflected in what’s happening from a technological perspective as well. When you visit a website, your browser sends a request to a server that lives somewhere on the other side of the internet. That server responds with the information your browser needs to generate the frontend for you.
When you interact with something on the site, or change a piece of data, that information is sent to the same server, where the backend of the application receives it, follows its set of instructions for handling the request, and sends you a new response, sometimes with an entirely new web page, and other times with updates to the one you’re currently on.
Wait, does my site need a backend?
Technically, every web application has a backend. Your browser requests some information and a server returns it to you. Whatever lives on that server, and however it decides what information to send back to you, is the backend!
But, obviously, this comes in different forms. Some backends only ever return a single static file (or a handful of files) with all of the HTML and information necessary to render the same version of a site every time. This might be something like a personal website, a portfolio, or a blog. For this type of project, a full backend web application is unnecessary, and all you need is a frontend framework and some server able to return the information necessary to bring the frontend to life.
Other backends, however, are doing a lot more work behind the scenes. Applications that store data, such as user accounts and transactions in a marketplace, will need to have programs running on the server that are able to store that data and know how to handle it. For that kind of application, a backend framework is the right tool for the job.
I have an idea, now how do I build something?
Great!
Now comes the time to pick the best tools for the job. There are many to choose from, but we’ve curated a list of some of the most effective and popular frameworks in active use today to help make this choice easier for you.
Frontend Frameworks
GatsbyJS
Built on top of Programming Language: JavaScript
Released: May 2015
Significant Users: AirBnB, Nike, PayPal
Recommended Tutorial: https://www.gatsbyjs.org/tutorial/
GatsbyJS is a revolutionary standalone framework that makes bootstrapping the frontend of a web application from scratch a cake walk. GatsbyJS is one of many static site-generation tools, including Jekyll and Hugo. Gatsby creates an environment for you to leverage any other web technology, like HTML/CSS, JavaScript, and other tools and packages to create your site, and bundles it together for painless deployment. That’s part of why Sandbox’s very own website, sandboxneu.com, uses it!
React.js
Built on top of Programming Language: JavaScript
Released: May 29, 2013
Significant Users: Facebook, Instagram, Netflix, New York Times
Recommended Tutorial: https://reactjs.org/tutorial/tutorial.html
React is part of a family of frontend frameworks, also including Angular.js and Vue.js. All of these offer a similar set of impressive tools: the ability to create many interactive components for your site, with tons of community and software support to create sleek and impactful web pages. React is our favorite, and is a big part of many of the web apps we’re working on, including SearchNEU and GraduateNU.
And the best part is, React easily integrates with any backend web framework as well, so don’t be afraid to use it for your frontend in conjunction with your backend!
Backend Frameworks
Express.js
Built on top of Programming Language: JavaScript/NodeJS
Released: November 16, 2010
Significant Users: Intuit, Uber, Twitter, IBM
Recommended Tutorial: Express web framework (Node.js/JavaScript) — Learn web development
Express.js is a web framework built on top of Javascript, and has exploded in popularity since its release in 2010. Given Javascript’s popularity for developing the frontends of applications, one of Express’ biggest draws is the opportunity to use javascript, and a similar javascript development environment, both for the backend and frontend of an application. Express.js is one of the fastest growing web application frameworks today.
A small warning though: unlike some other web frameworks, Express.js does not natively come packaged with the ability to generate web pages, but instead is primarily built to handle the routing of web requests and the management of programmatic logic and data for a web application. Express.js is most commonly paired with a frontend framework, oftentimes React or another framework in that same vein.
Ruby on Rails
Built on top of Programming Language: Ruby
Released: December 13, 2005
Significant Users: AirBnB, Bloomberg, Github, Bottlenose
Recommended Tutorial: https://guides.rubyonrails.org/getting_started.html
Ruby on Rails has been an incredibly popular framework since its initial release, and for many years was the most popular choice for new startups and web applications. The biggest downside is that Ruby, the language, is used very infrequently outside of this particular framework. But, a significant portion of today’s web development continues to rely on Rails.
Rails is known for helping make quick web application building an easier process, embodied by its motto, ‘convention over configuration’. Rails promises that, if you follow certain conventions, such as the naming of classes, it’ll help build all the scaffolding and configuration you need to get your application completed, while leaving the option of configuration on the table when necessary. This makes Rails one of the best frameworks for quickly building a complete application from scratch.
Django
Built on top of Programming Language: Python
Released: July 21, 2005
Significant Users: Instagram, Pinterest, Udemy, Coursera
Recommended Tutorial: https://docs.djangoproject.com/en/3.0/intro/
Django has been a vast and widespread web framework for many years. Django’s biggest advantage is being built on top of one of today’s most popular and most powerful programming languages, Python, which also allows developers to use many of the powerful tools that have been designed for the language over the years. Django is a versatile tool used to build some of today’s most high-intensity web applications.
At the end of the day, though, each of these frameworks has the power to build the application you envision. Make the choice you’re most comfortable with or excited about, and jump right in!
But wait — after I picked, what do I do?
Fortunately for you, there are thousands of excellent resources out there for helping you learn one of these frameworks. We’ve linked some of those resources above.
One of the best techniques for learning to use a new technology is to invest the time to go through a quick tutorial, and then learn through the building process. It’s important to have a basic footing in what you’re looking at so that you aren’t totally stuck, but there’s nothing more boring and soul crushing than reading a 500-page manual just to build the site you were trying to tinker with. And anyway, the most valuable lessons you’ll learn will be from the mistakes you make during the building process.
How will anybody see my website?
‘Deploying’ a website so that your friends (and, potentially, recruiters) can see it can come in many forms. There are many ways to deploy web applications, including GitHub pages for purely static web pages, and AWS for very fine-grained configuration and control. For a standard web app, a service that manages much of the configuration for you is probably the easiest way to do it, using something like Heroku or Digital Ocean. But, again, anything will do — pick something and stick with it!
Ready to go?
Building your first personal project is a daunting task. There will inevitably a lot of stumbling, confusion, refactoring and backtracking. But it’s one of the most rewarding things you can do as a Computer Science student. Not only that, you get to walk away with a new set of skills that you get to carry with you for the years to come.
To help make the personal project process less intimidating and help students connect with others who’ve tackled these challenges, Sandbox will soon be starting Sandbox Office Hours! Students will be able to schedule a time to meet with a Sandbox member to discuss your project, from your high-level ideas to the nitty-gritty details you’ve been wondering about. Stay tuned for more information to come!
