For my final Flatiron project, I built a dive log using React/Redux with a rails back-end. Scuba diving has been one of my biggest hobbies to enjoy with my wife and I thought a dive log would be the perfect way to demonstrate all the skills I have learned throughout this course.
The website I built allows users to create an account to then log all the dives they have been on, it also allows users to see all the dives everyone else using the site has logged.
I began by first creating the back-end with models for a user and the dives that were to be logged. Since Flatiron did not have much materials on creating and implementing a user login with React/JavaScript, I was left to figure that one out on my own. This was the most difficult part of the project for me as there were so many different tutorials all with different methods. I tried out a few that I could not get to work, finally with the help of my module instructor I followed a tutorial she sent me and got authentication finally working in my app using sessions/bcrypt authentication in the back-end with JWT tokens on the front-end!
Next I began to build the layout of how users would log their dives and where/how the dives would show up on the website. I used Redux’s Thunk middleware to handle all API requests to the back-end, where users would log their dives and the dives would be fetched to the Redux store for display on the proper pages.
Once all functionality was complete, I began styling the page. I think I made it look really nice with a fixed navbar, a blue colored ‘ocean’ theme, and transparent dive log info divs that become opaque when hovered over. I also made it so that users can hover over the pictures from the dives to expand them.
All in all this was the hardest project I have ever worked on at Flatiron. I felt a bit shaky with Redux and using the thunk middleware with actions and reducers to get and post all my data. Through it all I made many mistakes which gave me plenty of opportunities to work on debugging and in the end I have created a bug-free and easy to use web app that I am very proud of.