Time to React to my experience with the Flatiron School and hopefully Reduce some stress
The final project! I honestly cannot believe that I am writing my final blog to meet the requirements for the final project of my software engineering track with the Flatiron School. This time with this program has taught me so much as a developer and as a woman overall. I feel like after this program I have taken my problem-solving skills and deductive reasoning to a whole new level. When there is a problem in code or in real life I realize that now I automatically think how can I fix it and I think about what could be the actual root cause of the problem, I am not just a surface thinker. Over the last 5 projects, I have had my fair share of problems and issues to debug. Thinking back to the CLI project and seeing the difference between that project and the Final, React/Redux project I cannot believe how far I have come. From coding in the command line to making stateless components work and interacting with JSX React and Redux. I personally really loved the react project even though I feel like the transition from Vanilla Javascript to React was fast and a bit bumpy, I liked the fact that React has a lot of patterns that can be followed which makes it better to comprehend.
My project is a tracker that tracks the accounts and expenses of artists of all kinds. Being an independent singer-songwriter I know first hand that keeping track of expenses that have to do with music is a very hard yet important task especially as I’m getting to the point where I am legitimizing my business by making it an LLC. Expenses and transactions used for music can be used as tax write offs so keeping track of them has become essential. I knew that building this application would be a bit complicated but it would solve a major pain point for me as well as other artists. The official name of this Application is Artist Wallet. I would like to for the first time publish this project on the internet after it passes reviews.
The project is set up in a way where the backend has accounts and transactions. Relationships are Accounts have many Transactions and Transactions belong to Accounts. The transactions have a name, kind, accountId, date, and description. Accounts have names and balances. Transactions are nested under accounts so that a user could only interact with transactions through accounts. I created the resources for both data structures just in order to be able to do full CRUD on them if need be. Based on the convention for building API’s all my routes are namespaced under Localhost:3000/API/v1/accounts. On the front end, I had 2 container components accounts and transactions accounts held the state and 5 stateless components to handle the account and transaction show pages and forms.
In terms of creating the API I first worked on the Associations and migrations then Set-up Models using rails g resource for both accounts and transactions. I then created a seed.file
And seeded some accounts and transactions in my backend to use as test data to have some information for my use. I then Added Serializers so that my information would come to my front end formatted in a way that was usable. The one I used was ActiveModel::Serializer-The which translates my info to the front end. I then built my routes using resources and namespacing. After this, I finally built out my controller actions so that my future fetch requests had some actions to hit.
Starting to build the front end of my application I used create-react-app
Which comes with the files needed to build a single page react application.
I then moved to incorporate Redux from the very beginning. Because i did not want to go back and change things later, I began adding React-Redux to the project, by incorporating Store, Provider, and Connect.
Redux is the pattern in which the store dispatches an action to the reducer, which then takes that information in an action object to make changes to state, in turn causing components to re-render with new data. I liked this process because it made building the project very routine and less complicated to conceptualize in my brain.
I then incorporated the Redux-Thunk middleware as well as the router. When a user interacts with my frontend for example inputting info or clicking a button I call the handleChange() function which then calls the action creator, the fetchAccounts function. The action creator then hits my Backend API and returns the data. This then updates the state using the reducer. React Router allows us to build a single-page web application with navigation without the page refreshing as the user navigates. React Route calls components, which display the appropriate information. I incorporated this feature by wrapping it around my application in the main component.I then built out the components of the application which would be rendered.
All in all this time with the Flatiron School has completely changed my life; it has genuinely been invaluable. I can now confidently say that I have built 5 diverse applications and I am leaving this program having full confidence in myself as a developer. I Am so thankful for this opportunity and I can’t wait to hopefully add to the workforce of Software Engineers soon.
