For now I'm parking this NFR here. Not sure if it really need to be a docs as well but that's something we can discuss.
The idea is to create a video tutorial that will show how to create a basic api with a good looking datatable frontend builded with Vuetify. It should be easy to follow for non experienced users. The basic flow can look something like this.
Video 1
Step 1
Initialise new basic micro application with a MySql database. The needed services should be easy to setup. Thinking about using docker containers in combination with docker-compose.
Step 2
Create a table + model with some basic columns. Table can be created with phpmyadmin. Devtools can be used to generate the model.
Step 3
Create a controller + route that uses the model to retrieve all the records and return a json string on specified route. It should be a GET request so users can easily test this in the browser.
Step 4
Setup a new Nuxt project and run show basic project in browser.
Step 5
Add datatable to nuxt project and connect it to the api endpoint to retrieve all the records.
End Video 1. Sum what we did tell about are next steps.
Video 2
Step 6
Discuss problem with large dataset and use database seeder to insert a large dataset into the database and show loading / memory issues.
Step 7
Introduce paginator in controller. Add get params like page, number of items etc. Test in browser manually.
Step 8
Implement pagination in datatable and show issue with sorting (client side will only sort the items loaded).
Step 9
Implement sorting in controller and test sorting in browser.
Step 10
Implement server side sorting in datatable.
End video 2.
Video 3
Not part of this scope but will introduce content editing and testing your application.
- Handle model changes
- Simulate put request with codeception (1 field first..keep it simple)
- Connect to Datatable
Video 4
Not part of this scope but will introduce full crud and searching.
Video 5
Not part of this scope but will introduce authentication.
- Cmd line task to add user
- Login window in nuxt
- Setup axios with authentication (JWT)
- Secure api