I have finally made it to my final project for Flatiron's Software Engineering course and it has been one heck of a ride so far. I started this program with just a little knowledge of programming and bitter taste that was left from my first go around. I have learned a great deal of things as I have progressed through the curriculum, some concepts were easy to get but others were challenging. So now all of this brings me to the grand finale and the only thing holding me back from graduating a software engineer.
I started this project not really knowing what I was gonna do. I was gonna try to pick something that was very basic to help me get a good grasp on what I have learned. I ended up building a course caddie which is a way of keeping track of rounds of golf that you have played. You are able to enter a course, the par of the course, your score for the round and a picture of your scorecard. It's a simple way to keep track of something fun people like to do.
I started building my backend using a Rails API to handle the data persistence. I laid the ground work for login authentication but I wasn't gonna integrate it completely. I did everything to get it ready so I could add it in later since it wasn't a requirement for the project. I proceeded to make a generic user so i could use it for testing the app as I was buidling it. I set up a retationship between user, course and round. User has many courses, course has many rounds and rounds belong to a user and a course. Once I had that set up I added basic seed data so i would be able to make sure that I was getting the correct JSON from the backend. Then I started figuring out what data I wanted to pull to use to display for the user to see.
My next step was to build out my controllers for the different actions that I wanted use for my program. I wanted to be able to create, find and show a course. So I built out the controls for that adding in what I wanted the JSON to render in my HTML. I then proceeded to set up my controllers for rounds. I also wanted to be able to create, find and show the rounds that I have added. The same concept I used for displaying the JSON for courses, I used the same principles for rounds also. So now that I have everything displaying the way that I wanted it to, it was time to move on and start building out the frontend so my user will be able to see what has been created.
I am using React as my frontend framework to display all my data from the backend. It was challenging trying to figure out exactly how I was going to set up my components and container to have it look the way I wanted it to. I was able the break it down into smaller pieces of code that I could reuse through my program which made things a little bit easier as I worked my way through the building process. I had to understand when I needed to use state and where I needed state to exist in the program. I also needed to understand how to use props and when to implement then correctly into the code I was writing. The easiest way to explain props is that they are attributes in javascript. So they are what we use to grab the data from the back end to display in the front end. According to w3schools website state is defined as "The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders." I like to think of state as the state of your program when you make changes it changes the state of it. The next thing to figure out is what is the best way to handle state and how to deal with all the changes that happens. Lucky for us Redux is able to take care of all that for us using a store that dispatches an action using a reducer.
If I am to be completely honest while I'm writing this then I need to say that I don't fully understand Redux and all that it does. In order to change state we need to dispatch an action and then to get them to work together we need to create a fucntion in a reducer. A reducers main task is to take the current state with an action and to update the component having it rerender with the new state. An action is a fetch request that we make to the backend to get the data that we want to display for our user to see. So bascially Redux handles all the changes of state throughout your program. It's a way of keeping your state in one place instead of having it throughout your entire program.
This was a very tough project and i learned a lot working my through it. I know I still have a ton to learn with React and Redux but once I get it the possibilities will be endless with what I can create. I'm excited to keep learning and growing as I continue with programming.
Top comments (0)