Skip to content

PocketSystems/TestTask-Laravel-Vue

Repository files navigation

Test Task for Laravel & Vue.js Devs

So the idea for this test task is just to evaluate your workflow and make you more familiar to our software development processes.

This repo actually contains a laravel project already integrated with admin panel theme on Vue.JS.

Useful Links

  1. Install Yarn
  2. Install Composer
  3. Install Laravel
  4. Install Sass
  5. Theme Documentation Vuexy

Project Setup

  1. Clone it
  2. Update .env with your DB credentials
  3. Run composer install in project root dir
  4. Run yarn
  5. Run yarn run hot
  6. Run php artisan serve without stopping yarn run hot (In a new command window since php artisan serve & run hot should be running at the same time to make development easier with laravel mix)

Application Features

  1. Make login screen functional with secure API's and store token according to theme workflow.
  2. After login show a page which contains a datatable (Included in theme) showing all users with their image thumbnails and a status switch button which should toggle user status in database. It should also show edit Icon on each row.
  3. User add form button should be at the top of data table. clicking it will popup a form containing Full Name,Email,Phone,Image,Password fields. All field's should be validated on server side via API as well as Client side and should show the error below that field. (Like if we get error from API Invalid Email Address , it should show below that email field)
  4. Upon adding user, close the popup and show user in data table
  5. Upon clicking edit Icon on datatable , edit popup will appear with already fill info to update user. Upon saving the info, close the popup and update the table
  6. Create a del button in datatable to delete that record
  7. Create API to get/post/put all the saved data in this module with access token generated by login API by sep user which token shouldn't work with admin login

Application Expected flow

  1. At first entry http://127.0.0.1:8000/, it should point to Login.vue screen.
  2. Login Screen should properly validate credentials and show responses from the API's (If email/password is incorrect or even if server is throwing any other errors .i.e. 500)
  3. After login, if i visit http://127.0.0.1:8000/ it should point us directly to listing screen instead of Login
  4. Listing screen should match the details provided above in (Application Features) section.

Workflow to follow

  1. Each Model of Application should contain its seeder.
  2. Create a public git repo and push the initial project there in maser/main branch
  3. Create a branch for each feature like login with name feature/login and after finishing your login work, create a pull request for master (Don't merge it). Then create a new branch for feature/users-listing from feature/login and so on.... follow the same process for each feature
  4. Each commit should be well descriptive and should not contain much work in it
  5. Send the repo url when its done on ishaq.hassan@pocketsystems.pk

CRITICAL Mistake to avoid

Lets say, If i copy the listing page url and then clicked the logout button. Now am on login screen and should be considered as un-authenticated. If i use listing page url now, it should Not Allow one to do that .i.e. Redirecting to login screen.

Goodluck!

About

Test task for laravel Vue Devs

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages