Skip to content

The 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.

License

Notifications You must be signed in to change notification settings

EvgenyWas/modnikky

Repository files navigation

Modnikky online store

Overview

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

Home page preview in desktop view Product page preview in desktop view Bag page preview in mobile view

ORIGINAL DESIGN

Requirments

  • 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.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Summary

I 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.

About

The 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.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published