Bootstrap a Vue3 project
Budget: $30 – $250 USD
I am reworking a UI which I am not happy with and I need a Vue3 expert to set it up right. To begin with I will ask you to re-produce a specific view which will prove your skills ,then if I am happy I will ask you to add more views via new projects on this platform. Existing UI is like this: (screenshot 1&2)- Screenshot 1 you can see a table of Rulesets : they have a name and 1 or several 'scopes'. If you click its name, then it will send you to the Ruleset editor page (screenshot #2)- Screenshot 2: this is the Ruleset editor where you can edit the Ruleset properties which has mainly 2 sections: - Scopes: 1 or many scopes defined by 2 labels - Rules have 2 sub sections (intra & extra scopes) which are listing their rules
What I need:Using Vue3 JS you would build from scratch a view/component which will re-make the Ruleset table but each Ruleset will be a collapsible element , when you click on it will expand it and will display the Rulesets elements from screenshot 2. The idea is that people will not change screen/page to view and edit a Ruleset/rule in the end.Now it's important to note on the performances : there could be up to 1000 rulesets and 100,000 rules. All of them should be displayable/scrollable at once if all rulesets are expanded.
I am not asking you to handle edits etc or do any backend API thing, I will provide you sample data that you have to display in said view. You will only need to produce the view I am requesting (yet keep in mind that in a future project I could ask you to make the edit buttons and menus and other so your code must be compliant with best practices).
Requirements:use TypeScript as much as possibleVue3 JS, use a maximum of officiel Vue3 utilitiesUse tailwind-CSS as much as possibleGood performance even if all Rulesets are expanded (use Clusterize or alike?). There could up to 1000 Rulesets and 100,000 rules in total.Compliance with best practices and toolsI will provide:a private GiHub reposample data (js/json format) to mock the data to be displayed
What I need:Using Vue3 JS you would build from scratch a view/component which will re-make the Ruleset table but each Ruleset will be a collapsible element , when you click on it will expand it and will display the Rulesets elements from screenshot 2. The idea is that people will not change screen/page to view and edit a Ruleset/rule in the end.Now it's important to note on the performances : there could be up to 1000 rulesets and 100,000 rules. All of them should be displayable/scrollable at once if all rulesets are expanded.
I am not asking you to handle edits etc or do any backend API thing, I will provide you sample data that you have to display in said view. You will only need to produce the view I am requesting (yet keep in mind that in a future project I could ask you to make the edit buttons and menus and other so your code must be compliant with best practices).
Requirements:use TypeScript as much as possibleVue3 JS, use a maximum of officiel Vue3 utilitiesUse tailwind-CSS as much as possibleGood performance even if all Rulesets are expanded (use Clusterize or alike?). There could up to 1000 Rulesets and 100,000 rules in total.Compliance with best practices and toolsI will provide:a private GiHub reposample data (js/json format) to mock the data to be displayed