Code Review Partner? App feedback?

Code Review Partner? App feedback?
0

#1

Hey guys,

I made this SpeedDrill app over the last few days with React / Redux / Bootstrap

link: https://raddog25.github.io/SpeedDrill/
Github repo: https://github.com/RadDog25/SpeedDrill

What do you guys think?

I’m wondering if someone somewhere near my level would be into looking through my repo and I could look through one of your current projects in return.

As an aside I really recommend using Redux for anyone getting into React. It really allowed me to clean up my code and work fast once I figured it out.


#2

First off… Kudos my friend! This is a super fun little app and represents some great work.

I’ve been coding for 20+ years and I’m not looking for anything in return, but I thought I would chime in with some constructive feedback. I just took a quick look and these are off the top of my head, so they’ll kind of jump around all over the place. Hope that’s okay with you.

  • Avoid using let unless you explicitly intend to assign a new value to a given variable later on. Use const instead.
    • Specifically, using let to define functions should be avoided. let sends a signal that it’s okay to assign a new value to a variable and you probably never want someone overwriting a function in your app. Use const
  • jQuery is unnecessary. It’s a big library and you’re doing very little with it. React is already taking care of most of the DOM manipulation behind the scenes. Just use document.querySelector or document.getElementById when you need to grab a DOM element.
    • Generally, the fewer third-party dependencies an App has, the better.
  • Prefer one default export per module. This is what TC39 had in mind when they created the module system for ES2015

ECMAScript 6 favors the single/default export style and gives the sweetest syntax to importing the default. Importing named exports can and even should be slightly less concise.

  • Move business logic out of your reducers and into their own modules.
    • For example, the CLICKED_ANSWER case in the historyReducer contains logic that should be put in its own module.
    • Generally, you want to create as much separation as possible between the logic of your app and the frameworks and libraries that you are using. This allows your app to be far more resilient in the face of changing libraries.
  • At first blush, it seems like there is too much local state for a Redux app. I could be wrong, though; this would require more analysis.
    • Related to the above, I expect Redux apps to have more Container components that leverage the connect function. See the docs if you’re not sure what I mean.
  • I would add a feature that prevents the same question from being presented twice in a row. This happened a few times while I was playing.
  • I would generally expect to see more tests. Try using TDD and writing the tests before writing the code. This is a habit that will serve you very well, especially as you tackle more complex projects.

That’s all I have time for at the moment. Hopefully, you found it constructive. Fee free to ask about any of my suggestions if you need more info.

Again, kudos on the great work. Keep it up!

Regards,
Bill


#3

Nice app! The only thing I found was there is no way to stop the app and start over immediately. For instance, if I was on the addition easy and want to start a completely new drill with multiplication hard, it allows me to switch in the middle of a drill but does not allow starting over with only multiplication hard unless I completely finish out the current drill.

This will be easy to fix. I do not know enough React/Redux to give feedback on the code itself.


#4

Wow what a great response. Thanks so much.

Everything you’ve said makes sense to me. I’ll be reading up on some of this tonight.

I don’t know how to run Bootstrap’s javascript library without jQuery, so the only way that I know I could get away from it is to just write my own javascript to handle the dropdowns and modal.

Yeah, I wrote those tests after I was done all the other code. Next time I’ll try to stay on top of it as I code.

My question to you would be this:

Based on my app and my code, how would I compare to the other junior devs that you have worked with? I have yet to work professionally, and am curious as to where I’d fit in, or if I am even clearly employable yet.

Thanks again,
Chris


#5

Glad you found it useful.

For Bootstrap, consider using React-Bootstrap

I’d also like to amend one of my bullets regarding document.querySelector and document.getElementById. Generally, it’s a dangerous idea to go after DOM elements directly in a React app because React is tracking a virtual DOM of its own.

As far as being employable. You are more ready than you think. I’d start applying now and use it as a learning experience. I have worked with junior devs at all levels. Some of them demonstrated more experience than you, but some are far behind where you are (please keep in mind, this is me making a lot of assumptions based on only skimming through one app you built).

The point is, get out there and try.

If you want areas to work on. My suggestion would be to build something that persists and retrieves data. @rmdawson71’s suggestion is a good one. But also think about using localStorage to save games or implement a high score feature.

Hope that helps.

Regards,
Bill