Background
When I joined the Niche team, I knew that I would be a part of a new adventure. They had just decided to begin an entire platform overall by starting from scratch. The process was fast, iterative, and agile. We embraced the latest technologies to build a modern, mobile-first platform in a period of just 15 months.
The Front-end
Our front-end team is a close-knit group of passionate developers that are always trying to find the best solutions for complex problems. The Javascript world moves rapidly and we are constantly trying out the latest modules and libraries. Our website is very user-focused and the front-end packs a lot of power to support the features that we implement. Due to our data-driven nature, we process a lot of data structures into presentational React components that are simply and easy for our users to interact with.
Our process starts with research analysts and designers. The front-end team is brought into the discussion once features have been deemed a priority. Since we're a small team, we generally have one lead developer on each project, but are all able to some from feature to feature if need be.
Code quality is imperative, so that we can all be on the same page. After 15 months of very fast development, we put effort into bring our quality up to a set of standards, which we modeled after other leading Javascript standards. Unit tests and documentation have a vital importance to us in new feature development, as well as our code review process.
The front-end acts as one of the final steps in the overall process, just before QA, design review, and deployment.
Projects
Because of the expansive nature of the website, it's easy for all of the developers to have their hands in various sections of the code, which often overlap. We also do a lot of iterations, so multiple developers may have created one feature. Some of the various features that I have spent a lot of time on are listed below.
Profiles
If you've ever used the Niche website before, then you've probably realized the abundance of schools, colleges, and neighborhoods that are available. Each page that shows specific data these places is a profile. These pages are completely dynamic and data-driven.\ \ Using a completely custom back-end CMS, these pages are easily deployable and maintainable. The front-end expects a unique form of data, which it then renders many different React components to form a valid page. The process took a few iterations, but the front-end features a component library where we can easily add, modify, and create new areas of content on any given profile page - all from one data object.
Rankings
Another large feature of the platform are the annual rankings. Our data scientists use unique algorithms and processes to calculate a methodology for grading schools, colleges, and neighborhoods. Displaying this data on the front-end also required an extensive integration of back-end data.\ \ Unique challenges came up through the integration of rankings because of the mixture of content that we show on a rankings page. Most of the information that you will see is data provided from our back-end, but we also mix in ad units and various calls to action. All of the rankings pages are built on-the-fly with up-to-date information; therefore, creating modular components that can mix together various content types was a challenge.
Internal Administration
As I mentioned above, there is a lot of data that supports the business. Having a way to intuitively manage this data is crucial for internal operations. I was recently tasked with building out the first administration system for internal use. This application was only the second major application to be developed from the ground up since my time at Niche. Starting fresh definitely has its benefits, but is a daunting task given the many ways that front-end architecture can be designed.\ \ Without straying too far from the norm, the front-end team definitely agreed that this was an opportunity to focus on some newer modules and libraries that we had always wanted to toy with, but never found a good way to incorporate into the existing website. Most notedly, redux has become what seems like an industry standard with React applications. As well, package management with Yarn was a new development that seemed to have taken strong hold in the community. Together, I created a brand new application running on Node and Express that integrated redux into our React setup for state management.\ \ The project was a fun opportunity to learn new technologies while also creating a foundation for internal tooling.