React/Redux Application
By: Cory Pavitt
Tags: React, Redux

My first app!

This is my first major attempt at creating a fully functional React/Redux application. It’s available to use (Beta version) at https://kids-star-chart.herokuapp.com/.

When creating this application I used a back-end language Ruby on Rails. The front-end of course has JS React/Redux. I implemented a fully working authentication JWT(Json Web Token) that will authenticate/authorize a user when they sign up and login. The password a user uses is fully SALTED. Very important!

As a new web developer I would like to say a few thing I struggled. I always want to improve my work and need to remember the parts that took me the longest to do. I would say this app took me a little over a month to make. Once or twice I was stuck for several days trying to figure something out.

CSS. -Designing the way an app looks and feels can be overwhelming especially to a beginner web programmer. You have so much you’re trying to understand and keep in your head and then you have to figure out how it looks. I have a background in photography so it very important to me how it looks and it’s really not easy if you don’t know CSS. I initially wanted to create the function of the app first and then work on the design. I came to realize you just can’t really do that. When creating the front end and it’s components it’s best to create the design as you go. It slowed me down a lot but I learned and I’m getting faster. The CSS can be extremely tedious and especially if you need something lined up. I can’t say how many hours I spend trying to fix something. Properly fetching information. -I think I did it correctly. I mean it works and I’m sure there are a ton of ways to get a User and their relationships displayed but I struggled with the amount of fetch requests that were unnecessary. I would research, read posts all over and every time someone would say something different or something I didn’t understand. I eventually got the correct information and was able to display everything correctly. I pretty much learned how not to do something for my next app. Lifecycle components- Seriously WTF?? I learned a lot here and still have a million questions. It’s so easy to get lost when dealing with the lifecycles shouldComponentUpdate, componentDidMount, ect..ect. Any other components connected to a component with a specific lifecycle will create havoc because it’s hard to pinpoint where the error is coming from. It’s very confusing and takes a lot of focus to understand. Naming things. -I started out with this as a very important objective to do correctly because in previous small projects I would always get confused with the names of components and props especially if they were similar. Well it didn’t take long for me to get things mixed up. When creating a component and passing props I would name them similar but my problem came when I would also name the actions or state/Reducer very similar as well. I can’t say how many times I was working on the wrong prop or component trying to fix something yet breaking something else. I guess i have to have the name “prop” in a prop and action in an action function. Live and learn.

In the end it work and I’m very excited to have created a web app from scratch. I would like to implement a few more things like adding a reward when the child reaches 10 stars, have photos for each child next to their name and have the choice for a user signing up to select from either family or school. I think a school might find this useful.