[go: up one dir, main page]

DEV Community

Abhijit Hota
Abhijit Hota

Posted on

Can you help me review my MEN stack app?

You can find the app here.

I've been learning Node.js for the past few months and I recently deployed my first MEN stack app on Heroku. The app lacks a UI as I wanted to focus on the backend part.

The reason I'm writing this post is because I want to:

  • Ensure that I am following, if not all, but some of the best Node.js practices.
  • Know how well my approaches to the problems are and how can I improve them. Feedback on the directory structure, code modularisation, styling, etc. will be helpful.
  • Know what can I do to make my app more of a 'production-level' app.
  • Know something that I don't know I don't know!

The README file in the GitHub repository for the app provides a good overview of the app.

Any help will be appreciated πŸ˜„.

P.S. This is my first post on Dev.to

Top comments (6)

Collapse
 
alexanderjanke profile image
Alex Janke

Looks pretty good so far and I couldn't see any real issues when glancing at the code. So good job for that!

To your question to make the app more production-level:

  • Add linting
  • Add unit tests like AvaJs (github.com/avajs/ava) for the backend
  • Add E2E tests for the UI. Highly recommend Cypress (cypress.io/)
  • This is a pretty small app but consider TypeScript as a future option
  • Use input validation on routes as a middleware, for example npmjs.com/package/@dotvirus/yxc (biased opinion because my brother wrote the package but it's dead simple to use as a validation middleware in express). One example in your code would be here where you access req.notes_data_id but it is nowhere assured that this isn't undefined github.com/abhijit-hota/Node-Notes...

So with the package you could then say:

import { connect } from "@dotvirus/yxc";

app.post("/home",
checkLogin,
connect({
  body: yxc.object({
      notes_data: yxc.string().notEmpty()
  })
})
async (req, res) => {
        Notes.findById(req.body.notes_data._id, async (err, note) => {
            note.tasks.push(req.body.newTask);
            await note.save();
        });
    });

This would throw a 400 to your express-error-handler whenever the request wasn't met, thus completely skipping the express-route-body and you are ensured that all your variables you get from req are actually there :)

Collapse
 
kretaceous profile image
Abhijit Hota • Edited

Hey! Thank you for taking your time to write this. πŸ˜„
I will surely try to follow the tips you suggested.

I honestly had no idea that we can 'add' linting to our applications. I just have ESLint installed as an extension in VSCode and that helps me a lot. Will look into it.
I still don't know what exactly unit testing is and how tests are supposed to be 'written' but I've been thinking to learn more about it. Will check out Ava and Cypress after I know what they really are.
I appreciate the feedback on adding input validation as a middleware. πŸ˜„

Again, thanks for the info!

Collapse
 
alexanderjanke profile image
Alex Janke

When adding eslint into your project you ensure that everyone uses the same settings. If you change your VsCode-settings and I want to collaborate to your repo - how do I get your lint-settings? ;)

Okay for unit tests it's pretty simple. You write code that tests your code. Imagine you have a function that adds two values

function add(first, second) {
  return first + second;
}

To test your function with ava you could then say something like

/*
  you define what the result of your function SHOULD be.
  If your implementation of the add function was broken, 
  this would return an error telling you exactly what is wrong.
  */
test("add function returns 3", t => {
  t.is(add(1, 2), 3); // <-- this passes because 1+2 does indeed equal 3.
  // The line can be read as "Please ensure that the result of add(1, 2) equals 3"
});

I hope it makes sense!

Cypress is purely for UI to help you simulate user inputs. You could write cypress-tests that click a textbox, enter a specific text and hit your sign-in button. All automated.

Thread Thread
 
kretaceous profile image
Abhijit Hota

Thanks a lot for explaining the concepts!
I'll definitely try to implement them.

Collapse
 
harshvats2000 profile image
HARSH VATS

You are doing pretty good and it will be your first full project if you add UI. That feeling is just awesome dude. Good luck for journey ahead :)

Collapse
 
kretaceous profile image
Abhijit Hota

Thank you so much! =)
I'm working on the UI!