For my final project for Flatiron I created a React app with a Rails backend. My project is my school portfolio that I hope to use in the future.
This time around I had a lot of fun creating my project as the initial phase of Javascript was a beast. As they say practice makes perfect and React was no different. So with that I knew that I wanted to create something based off my goals for enhancing my projects in the future. I will always think I could've done something better and I'm not ashamed to say that my CSS skills aren't the best.. so add that to the list!
To start off my backend I used postgresql and utilized the scaffold generator for easy setup to create my tables, Goals and Todos to complete that goal.
A goal has a project title, and description of what I would like to achieve to further enhance the quality and functionality. And Todo is a list of steps either completed or not to get to that goal.
Also the goal can be for anything I would like to do in the future as well, bigger projects, coding challenges, or whatever I'd like to set my sights on!
In the example above, My goal is to expand my Javascript project, as once again it lacked the CSS pizazz it need.
I went about this with a pretty standard React setup:
Actions || Components || Containers || & Reducers.
Actions used fetch to grab the localhost route for each table and their corresponding fetch, create, and delete paths.
Components for each table. To display and create.
Containers to wrap each component and their files to work as one.
And reducers that correspond with their actions.
The app also contains routes to my project repos, blog posts for each phase, and an introductory and about page!
My biggest struggle apart from debugging was actually figuring out how to default my node version to -v 16. I even created a new back and frontend. I spent more time than I'd like to admit on trying to figure it out, but alas theres always a very easy answer after hours of hard work.
As we're talking about goals, I hope to expand this project and be able to utilize it with future applications/interviews.
Cheers, React!
Top comments (0)