As I come to the end of my Software Engineering bootcamp journey, putting together my final project, I notice how many concepts and ideas have come together in my head. Going through the coursework often like looking through a pinhole at a part of the entire picture. I now finally feel like that pinhole has opened up and I can see at least a large part of the picture.
I started my project by, of course, building the API with Ruby on Rails. I wrote out what data I’d need to accomplish what I wanted to accomplish. I was making a journal so I needed the concept of an entry, with a title and content. After I planned out how the data and what my components would be I got to building. I used the rails new command with an --api flag and--database=postgresql because I may want to host this on Heroku and I know Heroku doesn’t work with the defaul rails database, Sqlite.
After that I wrote the command for generating a scaffold for the entries:rails g scaffold entry title content: text , and boom. My Rails API is pretty much done. Something that I could barely wrap my head around a few months ago was accomplished in a few minutes and I knew everything that was happening and why.
The first step was complete, now I needed to create the front end. I used create-react-app journal-project , waited a minute or so and there it was. I then had to create my file structure. I needed a folder for all my components, a folder for my actions, and a folder for my reducers. I new the components I wanted to create were an entry, a list of entries I’d call index, the form for creating an entry, a nav, and home, about, footer, and error components. I created each of those, starting with the stateless components. I then created the entry component which would receive props from Index. Then I created the Index. Once I could view the data I had seeded on the entries page, I moved on to create the form for creating an entry.
The most complicated part of this by far was setting up Redux. I understand the huge benefits of redux, managing state all in one place, but it’s quite a lot for me to wrap my mind around. I started by creating the store. Then I moved on to creating my reducer. Next was creating the actions, and then finally I had to use connect to connect it all. I know I’m breezing through this explanation. That’s because I couldn’t possibly do a better job than this blog post I used to understand this complicated subject: https://www.taniarascia.com/redux-react-guide/
The last thing to do was to style the app. I wanted to use bootstrap. I first looked over react-boostrap and as I was reading over the documentation I realized I didn’t really have anything that made using react-boostrap necessary. I went back to the regular bootstrap docs and started implementing things like a Card for my entries and nice looking forms and buttons. Once I had all that hooked up I was done! Bringing everything together was an incredibly rewarding experience and I look forward to doing it again and again.
