Date: 31.12.2021
Building features where parts of the website are visible only to user or admin quickly turns into a huge amount of variants for your website. Some examples,
- Private activities - 404 but show to user
- Public activities - most components are visible, but things like heart rate are visible only to the owner
- Public activities, the "Make Private" button is visible only to the owner and hidden for other users/not-logged in users
- Admin can view everything
Â
To tame this complexity properly, you need a lot of tests and a lot of CI time and maybe even a QA team.
I wanted to make it very easy for me to visually see the access level of various components, so there is a less chance of making a mistake. To achieve that, I made a couple of components on React side
- ShowToAdmin
- ShowToOwner
And only to admin, they show borders and make it easier to just "see" the access levels of various components. Here is what I mean

Note that this is only a layer on the front end to aid the development, and proper access control has to be implemented on the backend to complete the security for these features.