Web application (API and Front-end) - routes design

Question

I suppose this type of topics always exist, but i like to have an specifics opinion for my case. Since 1/2 month i'm thinking about make a listing web application for my daily life (shopping, due, etc.) I started out define my object model like this (very simple design model)

Models image

So, i decid to create a NodeJS API for back-end, and Angular 7 for front-end. It's not a technical problem for me to develop the application and the API, but my problem is in the design of this, and particuly to the routes design.

My first suggestion for routes API is : User :

• /users
• /users/:id

List :

• /lists
• /lists/:id

Element :

• /elements
• /elements/:id

Technicaly it's ok, but i'm not sure it's the good practices. As User contains List and List contains Element, Wouldn't it be better to have routes like this :

• /users/:id
• /users/:id/list
• /users/:id/list/:id
• /users/:id/list/:id/element
• /users/:id/list/:id/element/:id

Thanks for your answers, or suggestions !

PS : If you have any web sites / video / topics ... to suggests, do not hesitate.

Answer 1

I'd say you got it OK in the first place, the second approach is messy as you can get huge routes, and you're sending a lot unnecesary data. Why do you need the user id to get an element? An element is an entity by itself, and it will probably grow, you may need to get related elements, filter them... its better to just have /elements

What you can do is find simple relations, like:

• /users/:id/lists
• /lists/:id/elements

I'd recommend reading building apis you won't hate :)

Answer 2

Firstly you are in absolute correct path of defining Routes in angular, at the same time you have to use Lazy loading concept of Routing.

I would recommend you to, go for plural sight course , by Deborah Kurata. I'm not trying to promote or advertise anything but for your current situation that course would be the right guidance. It would provide you all the necessary things that you need to build enterprise ready apps.

Alternatively Core UI Angular provides some best designs which are already implemented with Angular Route and things. Lazy loading and other Angular routing are implemented, all you need to do is understand it.

Hope this helps.,