Scaling the Flatiron summit with StackStore: running with React, Redux and Rails

Wednesday 22 September 2021 / coding


Having paced through three projects on Sinatra, Rails and JavaScript earlier in the year, I took a little longer to work through the curriculum and get started on the final Flatiron project, which is focused on React and Redux. After initially setting up the Rails API backend a few weeks ago, I took some time refamiliarise myself with the structure and flow of React/Redux apps by watching through the majority of a live build demo. I gradually started building out the structure of the app, then - as usual - couldn't stop once I got into the flow of things.

The task for the final project is to build a React/Redux app with a Rails API backend. I decided to create StackStore, a simple application for finding, keeping, tagging and making notes on Stack Overflow questions. With StackStore, you can:

It seems like a fairly simple app when you list the features - and the entity relationship diagram below is indeed much simpler than my last few apps - but some of the best apps are narrow in scope. The entity relationship diagram below is for the API backend; you can also open the diagram as a PDF.

Entity relationship diagram

With this app, I was more interested in doing one or a few jobs well than doing lots of jobs. I wanted to make the most of React, Redux and various packages in order to develop a more streamlined and straightforward user experience than in previous projects. The use of state, props and components in a React/Redux framework allows you to provide interactive features and responsive data (i.e. retrieval and manipulation) without requiring a bunch of reloads as with a traditional model-view-controller app, or highly complex and custom code as with a vanilla JavaScript single page app.

The full requirements for the project were as follows:

Throughout my Flatiron journey, I tended to have an initial sense of challenge about the projects and their requirements, not least because they often require putting together a number of different elements that the taught curriculum has covered in isolation. However, despite the challenge, I've always pushed myself to make a useable product and in the process learn new stuff as my idea would organically evolve during the development process. As a result, I end up feeling pretty confident by the end of each project, not only in want I've learnt through the curriculum, but in full-stack development and coding more broadly. Now it's time to advance the challenge one step further as I start looking for opportunities to pursue a professional career in coding.


Below is a demo of the app, which is hosted on Heroku and GitHub (Pages) and can be accessed via stackstore.yndajas.co (you will be redirected to GitHub).