My first SPA on Vue.js as an introduction to this JavaScript framework. Modnikky is an online store of women clothes with PLP, PDP, bag, wish-list and authentication pages. This project created using a build setup based on Vite that allowed me to use Vue Single-File Components. As a state manager I used Pinia because of proper TypeScript support. Also I used Vue-lazyload for lazyloading images in my application and Swiper for implementation of most modern mobile touch slider with hardware accelerated transitions and amazing native behavior to my application. I performed the authorization myself using localStorage Web API and Cookie.
UPD: API isn't working.
Home page and product page in desktop view, and bag page in mobile view
- Flexible and correct layout according to the design;
- Authentication on Client-side;
- Filtering by category and searching by name and description for products on the page;
- Ability to change the number of products in the bag and add products from wish-list to the bag;
- Subscribe to news by email.
npm installnpm run devnpm run buildI tried to build a good application architecture, but in the end I ran into a few points that I hadn't fully thought through as logic processing - is there more logic in the components, in the store, or is it taken out separately in utilities? In the end I used a mixture of Options and Composition API to get familiar with the two approaches. Next I would prefer to use Composition API because better logic reuse, more flexible code organization, better type inference, smaller production bundle and less overhead.