The final project for Flatiron’s Online Web Development Bootcamp is a React Redux project with a Rails backend. This project cumulates all of what we have learned in the course – Ruby, JS, HTML, CSS, AJAX, React, Rails, and Redux. React and Redux was tough for me to grasp. In addition to Flatiron’s curriculum I used Stephen Grider’s course on React and Redux: https://www.udemy.com/react-redux/. Stephen uses diagrams and analogies to help explain concepts, I highly recommend this course as he walks through building several projects from scratch.
The app that I built is called Daily Code Log in which you can document your daily coding progress. As a self proclaimed code newbie, I realize how important it is to document learnings, especially being aware of what you don’t know. Over time, as you seek out answers to your own questions, you will look back on answered questions and realize how much knowledge you’ve accumulated.
Now that I am on the other side, here are a few quick tips and pointers if you are thinking about tackling a similar project.
Map Out Requirements and a Schedule
The task at hand seemed daunting, so I decided to break the project into smaller parts. Here was my 9 day plan:
Saturday: Map project out- define relationships amongst objects and be able to answer the question “What is the point of my app?”
Sunday: Create seed data, setup Rails backend of project.
Monday: Create entire (mockup) UI of project.
Tuesday: Hookup fetch get requests to fetch internal API data.
Wednesday: Hookup fetch post requests so API endpoint could be updated.
Thursday: Set up React routes.
Friday: Final touches/ squash bugs.
Saturday: Record video walkthrough of app and write blog post on learnings.
Sunday: …Submit project!!!!
Setting a goal for myself each day was very helpful because each morning I knew exactly what I wanted to get accomplished. If I met my goal earlier in the day, I would move on to my next goal.
Use Semantic UI
I used Semantic UI for the web design of my app. Instead of a template, Semantic UI has many different elements- think buttons, cards, icons- that you can use in your app. Semantic gives you the different building blocks, but ultimately the final product can look original and custom made. In order to reference Semantic UI within your application you simply have to import the following link into the client/public/index.html within the <head> tag:
<link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css>">
I then used some CSS to reposition and style the elements further.
Here are some screenshots of the simple design of the app:
Form to create a Code Log
Display of all Code Logs
More Than One Way to do the Same Thing…
The trickiest part of the project for me was submitting forms to update my internal API endpoint. Doing a quick google search, most people suggested I use Redux Form, https://redux-form.com/, but my instructor helped me post data to my API without Redux Form. Instead, we used vanilla javascript. In the form’s handleOnSubmit function, we called on an action call addLog which made a post request to the API endpoint:
The reducer, “ADD_LOG”, then adds the form’s data to the Redux store.
I'm looking forward to diving into Redux Form but it was worthwhile to learn the vanillas JS way. Now, when I learn Redux Form, I'll have a solid idea of what Redux Form is doing behind the scenes.
I did it!
I am very proud of the way the project turned out. I have used the app daily to track my coding progress, and once I add authentication, I hope others use the app for their learning benefit as well.
P.S. Here's a link to the walkthrough of the app! https://www.youtube.com/watch?time_continue=1&v=8IQJEPKMCK8
Top comments (19)
Hey Molly. Your project sounds really interesting. I'd love to use it. Great job on finishing it!
I am currently learning React/Redux by way of freeCodeCamp and I'm also struggling 😓 Your post gave me a well-needed boost so thank you!
Thanks so much! I'll post a followup once I add authentication so others can use it! I've been using it every day :). I mentioned this in my post but I highly recommend this course: udemy.com/react-redux/. Udemy constantly has sales going on and I was able to purchase the course for $11 USD. Either way keep at it! React/ Redux takes a lot of practice!
I also strongly suggest Stephen Grider's React/Redux course (and all his others as well). It's the one tutorial that really made it "click" for me. He's a great teacher.
I’ll keep an eye out for your next article then, and when the course is on sale. There are a lot of great articles here on React and Redux that helped explain tough concepts, but my main issue is the syntax 😣
I definitely will keep practicing though! 🙌🏽
Do a google search for Udemy coupons and you'll find a bunch that will reduce the price of almost all of their courses. This one I just found makes all courses 11.99, and apparently doesn't expire until May 19th: UDEAFFFD419
But if that doesn't work, there are others out there. I don't know why they just don't make the courses the lower price to begin with.
Thank you so much for the tip, Bill! 😊
Cool project! I had a hard time with React/Redux Flatiron section too because for me, the explanations weren't quite enough for me. Thanks for suggesting the Udemy course! I'll definitely check that out.
I can totally relate to that! I needed more examples of building React/ Redux apps from the ground up. I'm starting to really enjoy it!
Great project and congratulations on finishing it! I just started my final project at Flatiron and used Stephen Grider's React and Redux course as well. His examples and teaching method helped me a lot.
Thanks so much Anthony! Best of luck with finishing up your final project.
Nice keep going <3
Very nice idea. You can turn this in startup.
Congratulations for the app and the articles. And thank you for pointing Semantic UI out :)
You're welcome! Glad I could share the resource!
Congratulations and thank you for sharing!
I want to build an application by myself.
But I am lacking inspiration.
How did you find the idea for your project?
The idea came to me because I was keeping logs of questions I had in notebooks, but then when I would try to look back on what I didn't know, the questions were amidst my other notes as well, and it was tough for me to find my questions! I also journal daily about other life happenings, so it felt natural to create a log for coding.
To come up with app ideas I typically think of an inefficiency or problem in my life or others' and create a tool to help out!
Thank you for your answer :)! It's really nice to reveive experiences from other people.
I love the goal setting in the article. As a new React developer, you might like my Reduxion here... for future projects.
dev.to/chadsteele/eventmanager-an-...
Thanks for sharing!