How to build a microlearning app with Gatsby

Dennis Basyrov
Jan 13 · 3 min read

If you are thinking of building a static site with React and want it to perform as fast as possible, you should take a look at Gatsby. I decided to try it out and was surprised by how easy it was to set up, deploy, and how fast the site loads now. Gatsby uses the best parts of other front end tools to make the development experience feel like you don’t have all these regular setbacks.

Gatsby is a static site generator for React that helps you build fast websites. You can add multiple external data sources and use Gatsby’s internal GraphQL API to pull content into your templates. You can use a third-party template as a way to learn Gatsby and React, but there are lots of guides and tutorials out there.

To build this app I used this Gatsby starter. I this is a perfect starter to build a landing page or portfolio website with a minimum time cost. It is well-styled and easy to manage. All the data stored in code or in markdown files.

Features:

  • Fully Responsive
  • Styling with SCSS
  • Very similar to gatsby-starter-netlify-cms, slightly more configurable (e.g. set site-title in gatsby-config) with Bootstrap/Bootswatch instead of bulma
  • LocalizedLink — built-in link component handling route generation

The idea of this GURU app is to facilitate learning and provide a unique learning experience for every-minute-busy individuals. You can learn something new every day and the app will deliver a new 5-minute lesson straight to email inbox.

What I’m using to send all of this lesson-letters? There is an excellent email service called EmailJS which is a platform that connects your web form to different email services such as Sendgrid, Mailchimp, Gmail, and others. It allows you to send all your emails without any backend logic, just using a public key and parsing your form inputs into a simple Javascript object. Also, it provides statistics and the change to create your own template.

In the next updates of this project, I’m planning to add an auth functionality and build an algorithm on the back end to recommend different courses for different learners. Also, I plan to deploy this website on Netlify (or Gatsby cloud).

Thank you for reading and happy coding!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade