By: Zishaan Hayath, CEO, Toppr.com and Gautam Chaudhary, Product Engineer, Toppr.com
From the traditional pedagogic models to computerized learning and cloud computing, the Indian education sector has evolved immensely. Its evolution has urged several EdTech startups to make effective use of modern technology in delivering a superior educational experience to its students. But despite carving a niche for themselves, they are finding it difficult to scale up and survive the market. Not only do they have to compete with offline rivals, they are also forced to deal with the unlimited availability of free content online.
Creating the Single-Page Application (SPA)
Although one has to put in a lot of effort to initially build one, and also maintain and update the system afterwards, if built in the right way – SPAs are not only faster than a traditional website, but also provide a better user experience. Companies should be prepared for the project to go slightly more indirect as there are more codes involved, more people to interact with, more points of failure and chances of more things going wrong along the way.
Choosing the right framework
For building a web app, the most crucial decision concerns the framework or library. While today there are vast options available, such as Angular, React, Vue.js, Ember.js, Meteor, etc, finalizing one from these depends on various factors like project requirements, company goals, team size, expertise, etc.
Toppr has been using React and Redux in many of its internal systems and has been satisfied with their performance and speed of development. Some of the reasons as to why they work really well are:
- React enables Toppr to easily build reusable user interface components.
- React allows high rendering performance in the browser with its Virtual DOM diffing algorithm.
- With the help of both React and Redux, Toppr renders the pages on the server, and reuses the server state in the client.
- Moreover, both React and Redux provide great Developer tools, which make it much easier to inspect the components of their hierarchy. They facilitate Toppr to look into their props and state, observe the dispatched actions and watch changes in the store.
- The Redux time travel feature allows Toppr to record and go back to any state of the app for debug purposes.
- Both React and Redux have amazing developer communities, well-written docs, and tons of free resources available online.
Considering all the advantages, Toppr decided to go ahead with React and Redux for its web app as well.
Our new stack
The Toppr React web app is written in ES2015+, and is transpiled to ES5 using Babel. It uses Webpack as its bundler for offering an incredible support to loaders, plugins, hot module replacement, code splitting, and tree-shaking. Redux has been used here for state management driven by its simplicity and benefits like unidirectional data flow, hot reloading, server-side rendering, etc. For the routing, React Router 4 was used to leverage its ability to do dynamic route matching and lazy code loading.
Using CSS with React
The CSS-loader module has been used in Toppr’s new web app for its ability to generate unique class identifiers during the build. In order to ensure that all of its React components are reusable, and can help in eliminating dead CSS code without worrying about its usage across the code base, a style file was created for every React component, which if not used will automatically get the related CSS code excluded from the bundle without bloating Toppr’s CSS output.
While styled-components have been gaining traction recently, we decided to use Sass for writing the style code as we found that styled-components are not yet stable and mature enough for our requirements. We compiled our Sass code to CSS using sass-loader, added vendor prefixes by using Auto prefixer along with post CSS-loader, and generated the CSS output using CSS-loader. We also used URL-loader for in-lining some of the images within the CSS file.
Using SVGs for Icons
Since icons are an essential part of our new vibrant design, and many of the icons have been reused across the product in different size and colors, Toppr came up with the best solutions and approaches for using icons in its web app like Image Sprites, Font Icons, SVG Icons, Background image in CSS and Inline SVG, after thorough research.
Delivering high-performance images
Images are an integral part of Toppr and are used for displaying diagrams in questions and concepts, photos in doubts on chat, thumbnails in videos, and profile photos of our users. It uses Cloudflare and CloudFront CDN for faster fetching, and uses Cloudinary for on-the-fly resizing of images based on device dimension and screen density.
While giving you all a low down on our design journey and product decisions and taking you through the reasoning of various architectural decisions that helped us build this new single page app (SPA), Toppr has identified that EdTech platforms like theirs are transforming the way that educators and students learn in a remarkable manner from simple apps to AI-powered gadgets. And, the day does not seem far when EdTech, regardless of being real or virtual, will enable educators to create a tech-savvy population that is well-equipped to navigate a rapidly changing world.