test-project

This is a demo vue3 + ts boilerplate project made to cover the dummyJSON api with UI (Link to Demo)

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint

Optional: install pm2 globally

npm i pm2 -g

Preview

npm run preview

Preview with pm2

pm2 start pm2.json

Current main features

• All labels made with i18n for future internationalization support
• Client-side API made as a wrapper around Fetch API method. Can be easiley changed to axios or whatever.
• Simple input component with error state, different sizes + before/after/ slots for icons + clear icon option prop
• Simple Login form validation with vee-validate
• Simple button component with props for size/variants
• Modals/dialogs/snack notifications components
• svg-icon component
• Data flow through Pinia store on Users page
• All icons are from remix icon pack https://remixicon.com/
• Two different layouts for admin and main for products

TODO list of improvements and possible features

• Github actions to automate the deploy
• Product card improvements(rating, add to cart, add to favorites)
• Filters for products (Categories page, categories sidebar -> Products by category > Product page)
• Auto-minimization of sidebar
• Github actions to automate the deploy
• Not found route and page(404)
• Initial pagination on landing page
• Initial popper component
• Initial mobile and tablet support (responsive styles)
• Initial Vite PWA plugin setup + caching fetch requests for offline
• Iniital localization
• Initial storybook setup
• Initial unit tests setup
• Initial E2E tests setup
• Add some other language support, add dropdown with options
• Dropdowns + Select component (might be with popper.js)
• Product page
• Breadcrumbs for product categories
• Image slider on product page
• Cart, save, edit, remove products
• Checkbox component, progress page with chart
• Add fancy login page with some cool animation so people would likely choose to stay
• Table component, header config for table as a prop, list items in single slot
• Comments, posts
• Listing search, pagination
• Login with google account?
• Detailed user page
• Edit user info on user's page
• Cover all buiseness logic on all pages with E2E tests
• 80% code coverege
• Storybook for common components
• Currency converter