How to structure your web/mobile app (part 1): URLs

If I ask why do we use URLs for, the straightforward answer would be that URLs are how you reach certain parts of a website, either by clicking on a link or by typing it in the browser URL bar. If you are more savvy, you could say it’s to locate a resource. That’s correct, but there is more to URLs than just website navigation. You can start organising the codebase itself around URLs. And, URLs are not just for websites, but for mobile apps too.

Let’s examine this in the context of SPA and mobile apps.

URLs for organising project files

---- pages/
-------- index.js
-------- categories/
------------ index.js
-------- products/
------------ index.js
-------- products/details/
----------------- index.js

When you visit , your router points to src/pages/index.js where you may render the home screen. When you tap on a link on, you will be taken to which corresponds to src/pages/products/details/index.js. The implementation of the router or anything else is not in the scope of this post. You can also have slightly different conventions here. But the gist is that the path in URL should be same as the path to the component which handles that URL.

If you have used Next or Nuxt, you are already familiar with this approach. What you might not be familiar with is the fact that same approach can be used in mobile apps as well.

URLs for mobile apps

  • Deep links: You don’t have to figure out a new way of mapping deep link values with screens. Deep links are URLs, so the routing convention is already setup!
  • Analytics: The URLs uniquely identify the screens, which can be used to identify the events with a specific screen
  • Namespacing: There is a direct mapping between folder structure and URL paths. This unification removes the need for unnecessary decision making towards where to put the code that handles a specific screen

A good URL structure


I am not a fan of path params though, especially in mobile apps. Keep it at one level, and accept whatever query parameters you need. /products/details?id=1000 is a lot simpler than/categories/15/products/1000. Your routing becomes much simpler. In a website, there may be SEO concerns which favour the path params. I will go with path params in such cases.

In conclusion, keep the project files organised based on the URLs, and organise your URLs based on the app features in a resourceful way. Here’s a talk by Adam Wathan which can help you in structuring those URLs in a nice way. While the talk itself is mostly in the context of a Laravel application, the approach is applicable for any URL.



You may check my website for my bio, at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store