Udacity’s Front-End Tech Stack

Jennie Kim Eldon
Udacity Eng & Data
Published in
2 min readJul 18, 2016

Unceasing change turns the wheel of life, and so reality is shown in all its many forms.

When Amartya Sen spoke these immortal words, I’m pretty sure he was talking about front-end web development. The last year at Udacity certainly has been full of change; we’ve not only undergone a major site redesign, we’ve completely transformed our front-end stack to go with it.

Udacity’s Front-End Stack

Background

Udacity provides a guided learning experience to millions of students in over 130 countries worldwide. Our classroom is chock-full of interactive components: menus, quizzes, videos, progress indicators, downloadable resources, and more. The nature of our product presents unique (and fun!) challenges for our front-end architecture, particularly when it comes to handling user interactions and data.

Udacity’s classroom, where anything is possible, and everything you see is a React component

React + Redux.js

Everything you see in our updated classroom is a React component. We make a concerted effort to follow the single responsibility principle, prioritizing code reuse and maintainability over one-off customizations. As with any complex product, compromises and trade-offs are necessary, but we work closely with a team of excellent designers to build the most intuitive and composable UI elements we can.

We made the switch from RefluxJS to Redux last year to manage our application state and data flow. Redux is a lightweight implementation of flux, and it gives us just what we need to adhere to the fluxian principles of one-way data flow and immutability across our application.

Webpack

We use Webpack to bundle our JavaScript files, and to build and manage our static assets. We compile our JSX with Babel.

Bootstrap

We use React-Bootstrap classes very occasionally for convenience, but almost all of our components are custom-built and styled, and shared across all of Udacity’s React applications.

Sass/SCSS + CSS Modules

Sass/SCSS is our CSS preprocessor of choice. We also use CSS Modules to make writing and organizing CSS much more pleasant and intuitive.

GraphQL

We query our database using GraphQL, which allows us to make precise client queries, like fetching a user’s information and progress on a particular video within a lesson, in a single round trip.

CircleCI

We use CircleCI to build, test and deploy our releases. Our setup ensures that every pull request passes on CircleCI before it gets merged.

Interested in joining us @udacity? See our current opportunities.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in Udacity Eng & Data

from the engineers and data scientists building Udacity

Written by Jennie Kim Eldon

Senior Product Manager @udacity, learning enthusiast, programmer, cool mom

Responses (3)

What are your thoughts?

Recommended from Medium

Lists

See more recommendations