Final Project: Heard

blackwellsmith profile image blackwellsmith ・2 min read

Twelve months ago, returning "Hello world!", simple array manipulation, basic math, and loops in python was the extent of my abilities. That was fun... it opened my eyes though. You really have to apply yourself if you want to make a career of programming. In comes the search for a course. Applied to a few online programs, took a few tests, then I stumbled upon Flatiron and I was sold. They had everything. They pushed me, they challenged me but they also picked me up. Now we are at the end of the curriculum. Job search services are in full affect but something was missing. A way to keep track of all the suggestions made by my career coach. Why not make a job search journal for this? I had come up with my final project!

The basic requirements are build a Rails API, use React for our front end, use Redux for client side data management and make sure it works upon assessment day. So I decided to make a job search journal, keeping track of contacts, daily accomplishments and setting goals. I am calling it Heard.

On the landing page we will see our bootstrap navbar and a slick-react carousel sharing information about Heard. Using Rails sessions controller and the bcrpyt gem, during signup the password is encrypted and emails are checked for proper formatting. When a user makes a login post request the sessions controller validates the credentials, authenticates user, sets a current_user, authorizing the user to the restful API and returns a cookie that is stored in the browser for future use. In the App component, Heard then checks to see if a currentUser exists and then presents the logged in navbar. The currentUser value is kept in the Redux store and is validated by the cookie whenever the page reloads or you visit the page at a later time. Heard uses react-router, this help us define the correct route for each component and set a value for each component in the URL. After selecting a page from the navbar, you are routed to that component displaying a contact list, your daily journal entries or to the goal page where you can create and update your dream job goal. Creating new journal entries and contacts follows the React/Redux flow of handling onChange events(typing in the form inputs). Passing that input into the actions, actions calling the reducers, reducers updating state on and passing the state back to the form compotent. The component then passes the updated state as a value in the forms, with the help of mapStateToProps and connect. Upon submit the data saved in the form is passed as a POST fetch request where the instance is saved to the DB and the store is update with the new entry.

This has been a wild journey so far, the beginning of life full of learning and evolving.


markdown guide