Please review my first full-stack app

Please review my first full-stack app
0

#1

Hello again all! It’s been awhile, but I was hoping that people would give my Voting App a look and provide feedback.

I know of one breaking bug that I can’t fix: on refresh of authenticated pages it breaks. It works fine when navigating normally though.

Also, I’m very happy it works, but I’m pretty unhappy with how hacky my Source Code seems. I would love if someone could take a look and mentor me on what is wrong/right with it. I still feel like I don’t fully grasp how all the pieces of the project work together. I wanted to implement Redux even, but I was pretty frustrated at the end of this project.

I look forward to the responses, and thanks in advance!


#2

This is really great! I like the look, and the interface mostly works well. I noticed a few things while playing around with it:

  • After voting, it takes me to the main page, which was awkward.
  • I voted on one poll as an unauthenticated user, and it wouldn’t let me vote on any of the others. I expected to not be able to vote on any of them, but all polls but the first said “already voted”.
  • I voted for “Linux Nerd” in the OS poll, but it seems to have submitted “Obvious Windows”.

As far as your code goes, I’m sure it’s not as bad as you think. It’s very readable, and you’ve done more right than I can list here. I have only one comment: On line 60 in server/routes/routes.js, you have an if/else in one of your routes. This could be cleaned up by splitting them up into different verbs. put is used for modification, but I’d restrict it to the modifications which replace an entry in the database, like you’re doing when adding poll options. You can use app.patch() for operations that just update a record, like you’re doing when incrementing the poll.

Are there any parts of the code in particular that you’re confused about?


#3

Thanks for taking a look! Appreciate the kind words as I’m very self conscious about my coding (for some weird reason).

To your points:

  • Agreed that the main page being the redirect is a bit awkward. I’ll have it go back to the poll page.
  • I couldn’t replicate that issue from my network, so I’m not sure why it’s doing that. I’ll test a little more though and see if I can catch it in the act.
  • I can confirm that there are no votes for Windows on that poll. I think the issue there is the color scheme I picked. It’s difficult to distinguish all the shades of blue. I thought about potentially adding a hover tooltip for each wedge though, so that could be a future feature.
  • Wasn’t aware of the app.patch() method! I’ll have to add that to have better separation of concerns.

I think my biggest issues with understanding what I wrote are:

  • React-router: it’s very easy to get basic routes set up, but when I started adding async onEnter hooks or trying to sync up the client and server rendering, I started to get confused.
  • Along the same lines: async rendering of React components. I had some difficulty with rendering components that depended on API calls. It led to what I thought was some hacky rendering of placeholders until the actual data had been loaded. It seems like there should be a better way.
  • How to even implement Redux. I wanted to, but by the end I was a little burnt out on the project. I get really confused about what should be container vs component when refactoring for Redux. On top of that, there is the added layer of complexity as to how to get Redux and React-Router to work together (from what I’ve read it’s not always easy).

Sorry for the unloading of questions, but I really appreciate the help so far!

I did have one last question about the app too. If I were to add it to my portfolio, how would it look to potential employers (with fixes in place)? I’m going to continue to work on projects (and learning Angular as there are many jobs for it here), but I’m thinking about putting out feelers for a job now.

Thanks again!


#4

Those are great questions, and I wish I could help. I used React Router a while back, and then they changed the API, and the last I checked they didn’t support ES6 syntax well, so I gave up learning more. Redux, on the other hand, is great. Instead of typing anything else, I’ll just give you this link and let you sign up for Microsoft’s Visual Studio dev essentials program where you’ll get 3 months of Pluralsight training for free. Once you have that, you can go through this course to learn all about writing an app with React and Redux.

I think that if you put yourself out for a job now you’d be in good shape. I don’t think any potential employer is looking for perfection in any of these student projects, just an example of what you can learn and to show off your enthusiasm. I say go for it!


#5

Thanks so much for the link and encouragement! I will definitely have to go through it and up my Redux game.

Guess it’s time to get my GitHub page up for a portfolio as well. Wish me luck :grin: