DEV Community

Molly
Molly

Posted on

My First React Project

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
Form to create a Code Log

Display of all Code Logs
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

Discussion (19)

Collapse
dmahely profile image
Doaa Mahely

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!

Collapse
mccarronmollye profile image
Molly Author

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!

Collapse
billturner profile image
Bill Turner

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.

Collapse
dmahely profile image
Doaa Mahely

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! 🙌🏽

Thread Thread
billturner profile image
Bill Turner

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.

Thread Thread
dmahely profile image
Doaa Mahely

Thank you so much for the tip, Bill! 😊

Collapse
morinoko profile image
Felice Forby

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.

Collapse
mccarronmollye profile image
Molly Author

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!

Collapse
anthonyharvey profile image
Anthony Harvey

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.

Collapse
mccarronmollye profile image
Molly Author

Thanks so much Anthony! Best of luck with finishing up your final project.

Collapse
xoxsimba profile image
nannuflay

Nice keep going <3

Collapse
abdulbasit313 profile image
Abdul Basit

Very nice idea. You can turn this in startup.

Collapse
maxdevjs profile image
maxdevjs

Congratulations for the app and the articles. And thank you for pointing Semantic UI out :)

Collapse
mccarronmollye profile image
Molly Author

You're welcome! Glad I could share the resource!

Collapse
wkabk profile image
WKABK

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?

Collapse
mccarronmollye profile image
Molly Author

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!

Collapse
wkabk profile image
WKABK

Thank you for your answer :)! It's really nice to reveive experiences from other people.

Collapse
chadsteele profile image
Chad Steele

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-...

Collapse
mccarronmollye profile image
Molly Author

Thanks for sharing!