Listy! Phase 5 Flatiron School Project
For the final project at the Flatiron School’s Software Engineering program, we required to build a client-side application with React-Redux, with a Rails API.
I am the type of person that needs help to keep track of my neverending to-do list, so I decided to build a fun little app to help me keep track of and check off my daily chores and errands.
Requirements & Planning
- The code should be written in ES6 as much as possible
- Use the
create-react-appgenerator to start your project (instructions on this repo to setup the generator: create-react-app (Links to an external site.) - Your app should have one HTML page to render your react-redux application
- There should be 5 stateless components
- There should be 3 routes
- The Application must make use of
react-routerand proper RESTful routing (should you choose to use react-router v3 please refer to the appropriate docs (Links to an external site.); docs for v4 can be found here (Links to an external site.)) - Use Redux middleware to respond to and modify state change
- Make use of async actions and
redux-thunkmiddleware to send data to and receive data from a server - Your Rails API should handle the data persistence with a database. You should be using
fetch()within your actions to GET and POST data from your API - do not use jQuery methods. - Your client-side application should handle the display of data with minimal data manipulation
- Your application should have some minimal styling: feel free to stick to a framework (like react-bootstrap), but if you want to write (additional) CSS yourself, go for it!
For the planning portion of this project, my first goal was to get my application to an MVP status. This app has the potential to grow, and I plan on building out extra features such as user auth at a later time. My first version would be very bare-bones with only:
- 2 tables — List and Category. The List belongs to a Category and a Category has many lists.
- A home page, about page, list page, and a form page to create each list item.
- Other small features such as a navbar and a footer.
Build Out
The first thing I did was get my back-end up and running. Using the specified rails command:
“rails new listy-lister-backend — api — database=postgresql”
I created my database and some initial seed data to get me going.
By adding the above code, I am able to add categories as I go. As my application grows I can alter this by changing the category input on my form to a drop-down list.
To create the client-side of my application I ran the following command in my terminal:
“npx create-react-app listy-frontend”
The first thing that stood out to me about React is how modular it is. I really like this structure as it helps immensely with “Separation of Concerns”. This is mainly represented in the form of components. They contain information on how a portion of our application should be turned into HTML. Each component is then imported to App.js which is our top-level component which is then imported to index.js to be rendered to the DOM.
One of the requirements in this project is that we need to have 5 stateless components in our application. A problem I encountered during this process was struggling with an idea for my 5th stateless component.
I was pretty bummed about being stuck on what I could do and was talking with some classmates, throwing ideas around. What started out as a joke actually turned out to be my favorite feature. This may be a biased opinion but frankly, I think more websites should include similar features!
I decided to add a little pick me up to brighten people’s day. By clicking on the “click here if sad” tab, the application would display a random picture from a selection of images to (hopefully) turn that frown upside down!
If you need a little help staying productive AND want to brighten your day, then my application is the one for you! Check it out, my repositories are listed below:
