Your have to implement simple board for bus stops. Directory docs
contains openapi
specification for the api
response - feel free to play with that to check how api was implemented. Don't install any other library
npm 8.11
and node 16.15
"axios": "^0.27.2",
"bootstrap": "^5.2.1",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
"sass": "^1.32.7",
"typescript": "~4.5.5"
Font: Inter 300, 400, 500, 700
8080
- for the Vue application
3000
- for the API server
npm install
- install dependenciesnpm run api
- run the APInpm run serve
- for the Vue application
-
As a user I can open the url
http://localhost:8080
and see entry page with listed lines (https://www.figma.com/file/Dj4FdiwG7uYUqV8ml7xKSL/Interview-Task---Frontend-Dev?node-id=2%3A57)- User can see title "Stops Board"
- User can see navigation with links "Lines" and "Stops" ("Lines" is active link)
- User can see listed "lines". The "lines" should be sorted in the ascending order
- User can see placeholder "Please select a line"
- User can click at line
- Placeholder disappear and user can see listed stops. Stops should be sorted ascending by field
order
from the api (https://www.figma.com/file/Dj4FdiwG7uYUqV8ml7xKSL/Interview-Task---Frontend-Dev?node-id=701%3A27993) - Use can see placeholder "Please select a stop"
- Placeholder disappear and user can see listed stops. Stops should be sorted ascending by field
- User can click at stop when line is selected
- Placeholder about selecting the stop disappear
- User can see listed hours for the selected stop sorted (https://www.figma.com/file/Dj4FdiwG7uYUqV8ml7xKSL/Interview-Task---Frontend-Dev?node-id=701%3A36989)
-
As a user I can open the url
http://localhost:8080/stops
and see "stops" page with listed stops (https://www.figma.com/file/Dj4FdiwG7uYUqV8ml7xKSL/Interview-Task---Frontend-Dev?node-id=701%3A38100)- User can see title "Stops board"
- User can see navigation with links "Lines" and "Stops" ("Stops" is active link)
- User can see the search bar
- User can see listed "stops" sorted in the descending order
- User can filter list by the search bar
- The "stops" list should be filtered after user input
- If search bar is empty all stops should be visible