Species Tree SPA

This project was done using React and Strapi CMS. The application will run locally on a touch-screen display in a browser in a kiosk mode.

Let's get to the SPA now.

The task

Build the application for a browser to show content to guests and visitors of a small museum. The app should show about 450 articles about species presented in the exhibition. Those articles (or let's call them species) must be grouped in accordance with their scientific classification. In other words, this is a catalog, a kind of Species Tree.

My plan was the following:

1. Setup Strapi, create Schema for various content types - the main ones are Species and Catalogues
2. Fill Strapi with a few entries for testing purposes
3. Start Application with CRA and connect it to Strapi RESTful API.
4. Build the front. Sounds sort of easy...

This pic roughly shows the structure of a future application.

The problem

How could it be just that easy? I build the app, created a bunch of layouts, and then I stuck with navigation via React Router. I had never thought that the application will require creating a menu with an unspecified number of items in it and on top of that recursively... Here is a post about that problem with more info about what and how. I will just say that I did what I wanted but that was tricky and really, really hard to implement while learning a new tool.

The application

Here are a few pictures of the app.

The final words

It was not easy for me but the experience is priceless. After doing testing training projects for a while it might become hard to keep motivated, not to lose your goal, and just do more and more. Real word projects, on the other hand, can push us further, give us new motivation, and overall this is a great opportunity to improve your skills. That's how I think and that's how it was for me.

The one and only bad part about that project was a terribly difficult first-time use of React Router. Hopefully, next time it will not give me such a headache.