Silver Bullet of Front-End
# File naming
## Routing Slug
Use `/folder/[slug]/index.jsx` instead of `/folder/[slug].jsx`.
In `Next.js` project, folder tree may look like this:
```plain
.
├── _app.tsx
├── _document.tsx
├── index.tsx
└── posts
└── [slug].tsx
```
However, this way is not extendable, when we need to add a sub page like `/post/[slug]/comments`, you need to change the previous file name.
The best practise is that:
```plain
ROOT/pages/
├── _app.tsx
├── _document.tsx
├── index.tsx
└── posts
└── [slug]
└── index.tsx
```
Similar, in `Nuxt.js` project, you may adapt it to this way:
```plain
ROOT/pages/
├── index.vue
└── posts
└── _slug
└── index.vue
```
## Do not use `UPPERCASE` in file names
Especially in routing directories. It's wierd to see an URL like this:
```plain
https://example.com/SomePath/WithUppercase?Params=something
```
URL should be case insensitive.
# Data Structure
## Do not use `UPPERCASE` in data structure
Almost all data stuctures can be generated automatically, by using scripts among with MySQL, Graphql, OpenAPI etc. If you use all lowercase naming, you have no need worry about the casing issues.
BAD:
```javascript
{
"createdAt": "2021-05-22 16:00:00"
}
```
GOOD:
```javascript
{
"created_at": "2021-05-22 16:00:00"
}
```
#
# Params, State or Storage
## When to use params
Unique IDs, such as:
- `/post/:slug`
- `/product/:id`
- `/anything/detail/:id`
Do not use paths like `/anything/detail` to show a single fetched data. When you share the link to others, they will get a `404 error`.
## When to use states
Such as dark mode status, localization config, page/component data to share.
## When to use storage like LocalStorage
Persistize a state, or offline data.
