Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wooiseong/sleeppower-project
This is a web application built with Vue 3 and JSON Server. It imitates a bedding shopping website where you can readily find pillows, sofas and beds.
https://github.com/wooiseong/sleeppower-project
javascript pinia shopping vee-validator vue3
Last synced: about 1 month ago
JSON representation
This is a web application built with Vue 3 and JSON Server. It imitates a bedding shopping website where you can readily find pillows, sofas and beds.
- Host: GitHub
- URL: https://github.com/wooiseong/sleeppower-project
- Owner: wooiseong
- Created: 2024-12-14T10:51:50.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-23T07:09:15.000Z (about 1 month ago)
- Last Synced: 2024-12-23T08:20:41.161Z (about 1 month ago)
- Topics: javascript, pinia, shopping, vee-validator, vue3
- Language: CSS
- Homepage: https://sleep-power-project.vercel.app
- Size: 292 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SleepProject :sleeping::zzz:
This is a web application built with Vue 3 and JSON Server. It imitates a bedding shopping website where you can readily find pillows, sofas and beds. You just need to add the items to your shopping cart and fill in some information to own these products!
Demo here :point_down:
## Project View
Desktop (1366px)
You can click on this link to view more pictures :point_right::point_right::point_right:
sleepProject
Demo here :point_down:
## Project View
Desktop (1366px)
You can click on this link to view more pictures :point_right::point_right::point_right:
sleepPower
## Features
| Components | Description | URL |
| :--------------------------: | ------------------------------------------------------------ | -------------------- |
| Home | 1. A navigation bar that directs to About, Product and Shopping Cart is provided
2. User can obtain general informations about sleep
3. Updated promotion items are exhibited via Swiper | / |
| About | 1. Users are provided with our brand stories
2. The retail store location is added ( iframe ) | /about |
| Product | 1. A full list of products is displayed.
2. Users can select products through category filters | /productList |
| Product Detail | Users can view all details of the intersted product and add it to the shopping cart | /detail?itemId |
| Payment-Total | A summary of products stored in shopping cart is provided | /payment/total |
| Payment-Information | 1. Informations about the users are required
2. Users will get a warning message for invalid input format | /payment/infromation |
| Payment-Confirmation | 1. A summary of products and information is set up
2. A modal will popped up for final confirmation | /payment/confirm |
| Payment-Success | 1. Congraz!
2. The order reference number is produced and click-to-copy function is provided | /payment/success |
| Page not found | Users will be directed to this page if the URL does not match any route | /anyURL |
| Shopping Cart | Users can change the quantity and drop unwanted products | |
| Breadscrumb | Users can be directed to parent pages | |
## Tools
1. Designs ( Bootstrap + Sass )
2. Framework ( Vue 3 )
3. Building tool ( Vite )
4. Storage ( Pinia )
5. Validation ( Vee-validate + Yup )
6. HTTP request ( Axios )
7. Backend ( JSON Server )
8. Deployment ( Vercel )
9. Code check ( Husky + Lint-staged )
## Backend database (JSON server)
* Github
* Vercel
## Installation
Please follow the instructions to get a copy of this project.
### Prerequisites
* pnpm
### Clone
```sh
git clone https://github.com/wooiseong/sleepPower-project.git
```
### Install pnpm packages
```sh
pnpm install
```
### Compile and Hot-Reload for Development
```sh
pnpm dev
```
### Compile and Minify for Production
```sh
pnpm build
```
### Lint with [ESLint](https://eslint.org/)
```sh
pnpm lint
```
### Contact
* Email: [email protected]