https://github.com/evgenywas/modnikky

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.
https://github.com/evgenywas/modnikky

authentication axios pinia scss swiper typescript vite vue-lazyload vue-router vue3

Last synced: 30 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/evgenywas/modnikky
• Owner: EvgenyWas
• License: mit
• Created: 2022-08-31T16:25:42.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-11-03T22:08:15.000Z (about 1 year ago)
• Last Synced: 2023-11-03T23:22:06.020Z (about 1 year ago)
• Topics: authentication, axios, pinia, scss, swiper, typescript, vite, vue-lazyload, vue-router, vue3
• Language: Vue
• Homepage:
• Size: 9.61 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://vuejs.org/guide/quick-start.html) that allowed me to use Vue Single-File Components. As a state manager I used [Pinia](https://pinia.vuejs.org/) because of proper TypeScript support. Also I used [Vue-lazyload](https://github.com/hilongjw/vue-lazyload) for lazyloading images in my application and [Swiper](https://github.com/nolimits4web/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

  

_[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

```sh

npm install

```

### Compile and Hot-Reload for Development

```sh

npm run dev

```

### Type-Check, Compile and Minify for Production

```sh

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.