Hi Sary Team, This is my assignment demo on Front-End based on your requirement in this Document: ((U.N.I.S.H.F) United Nations Super Heroes Fund) https://www.notion.so/sary/Hazem-Nabil-Frontend-Task-a687a77f5c444998a7e211d248a045d5
I Build it Based on VueJs and Vuetify.
The VueJs is very lite ,and I like the Vuetify because it is a complete UI framework very rich with useful components and a lot of good feature.
Angular also is very good ,but I think Vutify is more rich than the Angular Material.
- Basic Ui design based on Vuetify
- Nested Components
- Dynamic Filter
- Auto Built based on requested Json from the back-end
- The Accepted Field type is (TextField, Select, DatePicker)
- The Select Field Type can accept dynamic options from requested Json from the back-end
- Dynamic Date
- Emit Change for the Parent on submit the filter form
- On the parent on submit the filter form, the query parameters on the url will be changed with the new filter params
- On the page Loaded or on the Query changed it will make new request to the back-end
I didn't receive on the requirement document any end-point even the Country Endpoint is not working for that I create some demo Json files to call the and make the demo Those files located on : "sary_demo/public/demoApi"
- Countries.json
- data.json
- filter.json
And Finally, I hope that like this small demo and THANKS :)
- Best Regard
- Hazem Mohamed Nabil
- Full stack Developer and Web Developer
git clone https://github.com/strikerh/SaryDemo.git
cd SaryDemo
yarn install
yarn serve
yarn build
yarn lint