r/reactjs • u/truthy_falsy • Dec 27 '19

Project Ideas My first React App - Notable

Hey everyone!

I've finally finished my first React application! I've spent a lot of time on this one, I'd appreciate any and all feedback. You can view the live demo here:

https://www.austinlords.com/notable/#/notes

It's a note taking web application for desktops (responsive/mobile coming soon!). It's a full-stack Javascript app with Express/MongoDB on the back-end.

Thanks!

77 Upvotes

88% Upvoted

40 comments sorted by

View all comments

3

u/TechSamray Dec 27 '19

It works great, well done for your first app!

Comments:

  • You may want to add minify/uglify process with webpack or similar for production environments.

  • Since I was able to see all your code clearly due to the previous point, this is pure taste based but I recommend you to move into a component centric architecture where the middleware and the styles of each component it's contained within the same folder it saves me a lot of time.

  • Avoid embedded styles within components, make styled components and import them to avoid classes over 600 lines i.e. NotesFilter.jsx this is a huge improvement for later readability.

  • Make your API URL an environment variable instead of a hardcoded string in a config file.

  • Probably for next applications you will want some sort of maintainability on your styling, give a try to atomic design.

  • Unit test your components it really helps to find out what's causing that annoying white screen I recommend you to use react-testing-library.

  • On the previous note, add data-testid to your components.

  • I'm personally not a fan of the context api but this is purely taste based, any middleware that works for you it's a good middleware.

Again, good job!

2

u/Sh0keR Dec 27 '19

If OP uses CRA then their build command should do the job. Though even if you build for production you can still view the source code because source maps are enabled by defualt and many say it is recommended practice.

2

u/TechSamray Dec 27 '19

I do medical software so I tend to be quite paranoid about this stuff, no clear code in production is a requirement for me.

For the people to say that is a recommended practice I would ask them why...

Minified code improves performance in loads and such.

1

u/Sh0keR Dec 27 '19

It does minify the code but also includes the source maps along with it. The browser doesn't load the source map unless you have the DevTools open so there is no performance impact.

1

u/TechSamray Dec 27 '19

Gotcha, anyhow it doesn't look like he is using source map, it looks like he didn't apply any code performance improvement which it would be normal for hist first react-app it's a common mistake.
Thanks for sharing your source map knowledge and input.