DEV Community

Cover image for Root. A simple react redux application with bootstrap
michaella latkovic
michaella latkovic

Posted on • Updated on


Root. A simple react redux application with bootstrap

I wrote a quick overview of the react redux app I built recently. I wanted to build an app I would actually find useful while also practicing building a React/Redux application.

I brainstormed any challenges I was having that could be aided with the help of a useful app. As I am constantly learning and taking online courses, I began to think about all the digital platforms I use.

Udemy, Coursera, Khan Academy, EdX, online textbooks... with so many wonderful resources online, it would be great to have one place you can go to manage and organize all your learning platforms!

I created Root. Root allows you to consolidate all your digital learning platforms into one application.

Alt Text

You can see all your courses for a single application.

Alt Text

Each course, also has the functionality to add to do items.

Alt Text

Backend - a rails api

I built the backend as a Rails API with a PostgreSQL database. I wanted to keep this app simple (at least to start) - I included 3 models as a basic framework.

  1. Platform
  2. Course
  3. Todo

Alt Text
For serialization I used the active_model_serializer gem and intentionally nested everything into the platforms index page.

Frontend - react/redux/bootstrap

To organize the frontend architecture, I have 3 containers and 12 components.

The top-most component, the App component, is responsible for three main things.

It renders the NavigationBar and Jumbrotron components. It renders The Platforms container, which holds all other containers and components. It also renders a Layout component and holds the same layout for entire application.

Enter fullscreen mode Exit fullscreen mode

Overview: Containers + Components

Navigation (functional)
Jumbotron (functional)
Layout (functional)

Platform Container
Platforms (functional)
Platform (functional)

Course Container
Courses (functional)
Course (functional)

ToDo Container
ToDos (functional)

The redux store holds the platforms which will hold all courses and each course's todos as this is this way I designed my backend. This meant I could use only one single reducer, the platformsReducer which made it easier on the frontend to keep track of which platform courses and todos belong to as I always returned platforms.

Alt Text
(expanded - to show courses nested)

Alt Text

I built 4 actions fetchPlatforms, addPlatform, addCourse, and addTo.


One thing that was important to me for this project was to really understand Bootstrap. For all my prior projects, I have done all by CSS by hand, which was great because I wanted to really understand how to do all the styling without help.

However, I am at place where I feel comfortable and can now upgrade to Bootstrap and save TIME!

Once I got the hang of importing the react-bootstrap components - the app really came together. The bootstrap docs are fantastic!

To see all this code in detail, feel free to visit the GitHub repos!

Root - backend repo

Root - frontend repo

Next Additions:

These are additions and functionalities that I'm currently working on adding:

*Add a user model.
*Ability to login/sign up for an account.
*Delete/Edit a platform/course/todo
*Check off a todo

Happy coding,

Top comments (0)

An Animated Guide to Node.js Event Loop

>> Check out this classic DEV post <<