DLM Tutorials


For this project, we’ll be integrating React, Redux, React Router, Rails in API only mode, Devise for Users with ActiveRecord to manage our object relationships, ActiveStorage to handle file uploads and JSON API Serializer to handle formatting JSON responses.

We’ll start by building out the bones of the API with 3 of our essential models: User, Group and Event. We’ll establish the relationships, but we’ll be holding off on building out authentication until later on in the series. We’ll also be building out some more user centric/interactive features at the end. Namely, users will have the ability to join groups, view their events and add their own events to the groups.

However, to start, we’ll be focused on a single user’s experience and get that working first so we can see progress more quickly. We’re going to mock out a current_user method in the controller that will just return the first User in our database (which it’ll create if it doesn’t already exist). Then we’ll be using that current_user method to create events associated with that user. Later on, when we add in JWT to support authentication, we’ll remove our mocked current_user method and use the one provided by the devise-jwt gem.

Part 1 Setting Up the Rails Api

February 20, 2021

In this part, we'll be setting up Devise (partially) and then we'll set up a CORS policy, configure active storage (local for now) and set up our model relationships.

Part 2 Creating the React Frontend and Adding Groups

February 23, 2021

In this part, we'll create the react application, add react router, tailwindcss and give our users the ability to view a list of the groups stored in the API and create new ones as well.

Part 3 Adding Events and Serializers for File Uploads

February 25, 2021

In this part, we'll be adding additional routes for Events and adding serializers so our /groups/:id endpoint will return group data and all of the group's events as well.

Part 4 Adding Redux to the Application

March 3, 2021

In this section we'll convert our GroupsIndexContainer and GroupShowContainer to use redux

Part 5 Reduxification of Forms

March 9, 2021

Complete the reduxification of our container components by connecting our forms to the store and adding validations with displayed error messages.

Keep working in the woodshed until your skills catch up to your taste.
If you'd like to get in touch, reach out on LinkedIn.