Development process

General development process from the backend to the frontend

This is the general process to create basic elements such as a CRUD, you don’t always have to follow these precise steps

Backend

It is generally recommended to start from the backend to develop a new feature, so that once finished we would have the base and the api ready to be used in the frontend.

• Create a migration to define the table structure for the database.

• Create the model associated with the table

• Create custom requests based on the validations used in the individual fields of the table

• Create a resource to return the data to the frontend

• Create the repository and its interface where we will specify all the queries to do on this model

• Create the service and its interface where we will do backend operations for its model, use the repository to execute queries and implement any needed business logic

Remember to associate the services and repositories to the respective interfaces within the RepositoryServiceProvider.phpfile

• Create the controller that will use the custom requests previously created to validate the data and send them to the services to make them perform the operations

• Create the API of this template within the api.php file.

---

Frontend

Through the frontend we can make calls to the backend using Pinia stores and manage the data returned through resources and controllers.

• Create a model with typescript to define the types of its properties, which will then be used in stores and Vue files

• Create stores with Pinia, generally both an index store (to manage a collection of the model created) and a single store (to manage the single element of the model)

• With the stores, create methods that through Axios will make API calls on previously created APIs registered within the api.php file

• Manage data in Vue files by using stores

Once all the files have been created remember to create and define all the routes in the index file of VueRouter