In this blog, we are going to show how you can create a web-based application, a simplistic Learn Management System prototype that uses Strapi as its back-end. Most of the technologies that we are going to use here have been introduced in the latest blogs:

  • Strapi: a headless CMS system which is our back-end system, providing a back-end UI and all REST and GraphQL based interfaces. It has been described in this blog and this other blog about legacy data migration.
  • Nextjs: a React-based framework for pre-rendered apps with developer-friendly routing. See this blog for more information.
  • React: A JavaScript library for building user interfaces
  • Bootstrap: a CSS framework for building responsive, mobile-first sites that we used together with Reactstrap
  • Node-fetch and GraphQL which are the libraries/technologies used to fetch the data from the API's provided by Strapi

The prototype

The web application prototype we built provides a simple, responsive UI to navigate through the pages of the course and to access separate views of the course data.

The front-page of our web application looks like this:

And the main course page allows navigating through the lessons and playing all audios and videos saved in Strapi's media gallery:

You can also navigate through lessons via the Lessons drop-down menu:

There is also a page dedicated to aggregate all audio files of this course accessible when you click on the "Meditate Now" button:

Steps to build the prototype

Before building the prototype, we had already a development Strapi server running with some migration data and REST and GraphQL interfaces set up. We also had npm, and nodejs (v13.11.0) already installed. So we needed to create a front-end web application. Since we wanted to use Nextjs we decide to generate on the command line a Nextjs app:

npm init next-app learnmeditation-frontend

Then we installed some other libraries using yarn and npm:

cd learnmeditation-frontend

npm install node-fetch --save

npm install --save reactstrap react react-dom

npm install classnames --save

npm install apollo-boost @apollo/react-hooks graphql

npm install --save react-audio-player

npm install react-player

npm install @fortawesome/react-fontawesome

npm install @fortawesome/free-regular-svg-icons

npm install @fortawesome/fontawesome-svg-core

After these installations our package.json file looked like this:

The development instance of the web app can be started like this:

npm run dev

Project Structure

The project was structured much like other Nextjs projects. Here is the structure:

The main folders are:

  • components: just contains the Layout component, which is a wrapper component around all pages. It renders the menu bar and then takes any children as subcomponent and renders these. Here is the main code: 

https://gitlab.com/gil.fernandes/learnmeditation-frontend/-/blob/master/components/Layout.js

  • context: we ended up using React's own Context API to manage a centralised state. I end always battling with myself about either using Redux or React's Context API. Because React Context is a little bit easier to implement and is built into React (no extra libraries needed) and this is a prototype I decided to use it in this project. For those who want to read a bit on the Redux vs React Context API here is a nice blog about this topic.

https://gitlab.com/gil.fernandes/learnmeditation-frontend/-/blob/master/context/CourseContext.js

  • lib: The lib folder contains functions which use Strapi's REST API's and GraphQL. One file (learnMeditationServerFetch.js) is used on the server side by Nextjs. Here is the GraphQL in graphQLClient.js code:

https://gitlab.com/gil.fernandes/learnmeditation-frontend/-/blob/master/lib/graphQLClient.js

  • pages: like the name says it contains the pages that render the jsx files which render the main page, the course page, the "Meditate Now" page. They all use the previously introduced layout component. The two [id].js files under the lessons and meditateNow folders are Nextjs style files which expect the course ID to be specified in the URL. Here is an example of such a file, the index.js file:

  • css: just using regular CSS here.

All code for this prototype is available here:


Conclusion

Actually, a pleasant developer experience overall, because I already knew about Nextjs, Strapi and React. I just was not acquainted with GraphQL, but it makes a lot of sense to use it because GraphQL lets you query API's and extract the relevant fields thus reducing the amount of data reaching the client. It took me around three working days to develop the prototype (without the setup of Strapi and the data migration)

Also using the context API is much easier than using React Redux and feels more natural and less bloated. It just seems that Redux is more scalable and offers more Enterprise-grade support, but I think these days it is OK to use React's context API on smaller projects and prototypes. In my opinion, you should first see if the context API is good enough for you and start off your projects with it and only in case there are performance problems or deeper debugging needs switch over to React Redux.

Strapi lets you get faster to results because it generates a back-end UI with support for multimedia assets and generates GraphQL and Rest interface for you out of the box. You then need to work on the front end, which is typically what matters most to you and your clients.