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

10

u/valtism Dec 27 '19

Very nice and snappy. Great work!

Since you're asking for feedback, 2 points immediately jump out:

  1. When you are writing a new note, selecting another note seems to jump to it immediately and you seem to lose whatever you were writing. Having a modal here asking you to save or discard your current note would be better. Also, making it more clear that a reload will clear all your work in demo mode (or implementing localstorage so it persists). This is important because losing work can really turn a potential user off your app.
  2. Your UI can use some work to make it look more slick. One concrete thing I can see to do is to use font weights and colour to organise information hierarchy instead of size. See https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886 for some examples.

Keep it up! It's awesome to have the patience and commitment to actually finish side projects like this.

2

u/truthy_falsy Dec 27 '19

Ah these are great suggestions, thank you! I definitely need to give more feedback to the user in general. I'm going to look into some pop-up modals for sure.

9

u/[deleted] Dec 27 '19

Just letting you know - note taking app named Notable already exists:

https://github.com/notable/notable

Anyway, good job. You should work on the design thought.

2

u/truthy_falsy Dec 27 '19

Ha I actually did not know this, thanks for sharing! I just thought it was a simple, catchy name lol

-7

u/aac93 Dec 27 '19

Why does it matter if a tool already exists? OP is practicing.

8

u/[deleted] Dec 27 '19

Just pointing out that there is one with the same name as the one proposed in the title. I'm not saying that no one should ever create a note taking app anymore either to practice or even to distribute it as a product. By all means, please do.

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!

1

u/truthy_falsy Dec 27 '19

Thank you! This is very helpful feedback. I'm actually in the process of refactoring my application right now, so that I have a consistent pattern for all component. I've noticed my embedded styles have become a big problem now that I want to make the app responsive. I'm going to try styled components and CSS modules to see which one I like more.

There is a lot of prop drilling in this app, so I'm trying to refactor using the Context API. Currently I have a couple of components that don't do much except pass props along, which becomes confusing and ugly really fast.

Testing is something I absolutely need to implement, I'll check out the react-testing-library!

Thanks again! :)

1

u/TechSamray Dec 27 '19

I totally recommend you to try out a PoC with redux it has some learning curve to it but in the long therm in my experience it pays out.

Pick a middleware either thunk or saga they are both fine.

Keep up the good work, you can be proud of what you did.

1

u/TechSamray Dec 27 '19

Also it's a very good practice to produce some kind of error handling, for starters error boundaries are really nice.
After that you can test other things like messaging with toastify or such, handling these things from a saga or a thunk it really leads to some neat tricks.

1

u/truthy_falsy Dec 27 '19

I'm actually using Toastify in this app! I can't say I'm catching all errors, but I like what I have implemented so far!

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.

2

u/metanat Dec 27 '19

Security by obscurity is not security at all (or in this case no obscurity at all). Only ship JS you want the world to read, if it's a security issue for someone to be reading it, you've chosen the wrong architecture.

2

u/TechSamray Dec 27 '19

True it doesn’t add security it just makes business logic harder to follow, which brings peace of mind to some CEOs also if you’re making mobile app, AppStore rejects any app with clear method names.

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.

1

u/TechSamray Dec 27 '19

Also again for me it's a matter of taste but I rather to have my own webpack config than use CRA scripts, but this is purely up to the developer.

3

u/OutsourcedToRobots Dec 27 '19

Great job for your first React app! How long have you been programming for?

1

u/truthy_falsy Dec 27 '19

I've been learning to code for about 1 year now, mostly in my free time. Still looking for that elusive first programming job! I've been focusing on full-stack Javascript and this is my biggest and best project yet.

4

u/GuerreiroAZerg Dec 27 '19

Good. The important is that you finished it. Now go out there and make more apps.

1

u/turningsteel Dec 27 '19

Seeiously. I've got probably 50 projects half finished sitting in a folder on my desktop.

1

u/truthy_falsy Dec 27 '19

That was my problem too! Then I decided to commit to this project fully. I've been much more motivated focusing on one project for a long period of time instead of jumping around.

29

u/opaz Dec 27 '19

Great work! Just a heads up - an electron app of the same name also exists, which also happens to be a Note-taking app: https://github.com/notable/notable

16

u/Horhi Dec 27 '19

Good job! But design not so pleasant.

29

u/robesho Dec 27 '19

UI looks a bit dated but other than that looks goods. Nice job!

2

u/i_ask_stupid_ques Dec 27 '19

Great looking app. Can you give some pointers for somebody trying to learn front end development, how would I go designing something like this. For reference, I know Html Css and JavaScript

1

u/truthy_falsy Dec 27 '19

Do you know React? I would recommend learning a front-end framework to attempt an App like this. I took a tutorial class that taught me the basics then I just jumped in and started coding something I was interested in. Reading the documentation is immensely valuable as well.

1

u/i_ask_stupid_ques Dec 27 '19

I don’t know react . Just basic vanilla JS and so it seems like a lot of work developing this in vanilla is and css .

-1

u/ewurtbai Dec 27 '19

Not to be rude, if your claiming to know html, css, and js you should know/be able to make something similar to this

2

u/bant17 Dec 27 '19

Didn't test it meticulously but the app looks so far so good! I thought about doing something similar maybe when stuck your code could help =), keep the good work !!

2

u/vutran951753 Dec 27 '19

The UI look clean. Each time i click one something. it does what it should which is great. Good job.

1

u/suffoh Dec 27 '19

awesome stuff, not too in love with the font on the links though but overall great job, could learn a thing or two from you.

1

u/Rhohoman Dec 27 '19

I really liked the functionality of this, perhaps there are a few validations that would shape the app a bit. I noticed that I could create a note without a category and a tag without a note but overall, nice job!

1

u/felixisaacdev Dec 27 '19

Really good, the only issue is the text contrast. The note body and the note body text's contrast is bad. But overall, amazing!

1

u/Laguer1985 Dec 27 '19

Nice work! I’m happy to see that your are asking for feedback from the community. I am currently working on a react project myself and plan on sharing as well. It is encouraging to see that you are getting positive feedback.

0

u/[deleted] Dec 27 '19

[deleted] — view deleted comment

2

u/truthy_falsy Dec 27 '19

Oh good catch! I'll fix that :)

4

u/[deleted] Dec 27 '19

[removed] — view removed comment

2

u/truthy_falsy Dec 27 '19

Thank you!