여행 상품 등록 및 결제 사이트
- React
- Redux
- React-Redux
- React hooks
- Ant design
- MonogoDB + heroku
- PayPal
- Register travel packages
- Select travel packages and add a shopping cart.
- Pay for of travel packages
npm install시 발생한 error 해결
$ rm -rf package-lock.json node_modules
<-- you need both$ npm install
- Create an empty Upload PAge
- Create Upload Page Route
- Create Upload Page Header Tab
- Make all the Form except for Drop-Zone -> This time, we will make component for file upload
- Make onChange Function for all the inputs
- Create File Upload File Inside Utils Folder
- Install Drop-zone dependency -> npm install react-dropzone --save
- Make Template for File Upload Component
- Make onDrop Function
- Make onDelete Function(클릭 시 이미지 삭제)
- Make Product Model
- bring Upload File Component
- Update File Datas from upload file component to parent component
- Make onSubmit Function
- Submit all info to Server
- Save them in MonogoDB
-
Make Empty Landing Page
-
Fetch All Product Datas From MongoDB to Client
-
Create Landing Page Template
-
Display Product Lists in the Landing Page -> Use map() methods
-
Make Load More Button
-
Make onClick Function for Load More Button
-
Make state for SKIP $ LIMIT
SKIP
the position from where you start fetching the product datas
start will be 0, next one will be if Limit is 6 2rd Skip = 0 _ 6
Mongodb Method,
LIMIT
how many product datas will you fetch data to the maximum whenever you click Load More Button
-
Change API for fetching Products Data to use Load more feature
-
Add the datas we brought
- Make CheckBox Lists Datas
- Make a template for checkbox
- Make onChange Fucntion
- Update Checked State into Parent Component
- Make handleFilter Function
- Trigger getProducts Function with Filter Condition
- Change getProduct API for Filter
CheckBox Filter By Continents(2)
- Make Radio Lists Datas
- Make a template for radiobox
- Make onChange Function
- Update Checked State into Parent Component
CheckBox Filter By Continents(3)
- Make handleFilter Function
- Make handlePrice function for handlefilter
- Change getProduct API for Filter
- Make SearchFeature Component
- Make a template for search feature
- Make onChange Function
- update search Data into parent Component
- Trigger getProduct Function with search condition
- Change getProduct API for search feature
- add something for product model to be searchable
- Make empty product detail page
- Make a route for product detail page
- Fetch product information from DB
- Makea template for product detail page
- productInfo Component
- productImage Component
- npm install react-image-gallery --save
- Send http Request whit redux
- Make AddToCart API
inside the cart the product i will add to cart Alread exist (Duplicated)
-> Increment Quantity for the product by1
If not -> Quantity will be 1
- Store this information inside Redux User State
- Create an empty cart page
- Create a route for cart page
- Create a header tab for cart page
- Fetch the products stored in Cart from the DB
- Make template for cart page -> UserCardBlock Component
- populate fetched Data in browser
- Calculate Total amount of Products Price inside the Cart-> item price x quantity
- Make Remove From Cart Feature
https://catnap-jo.tistory.com/19
- sandbox paypal sign up
- create test id for paypal
- make transactionSuccess function
- Make a Paypal Button -> npm install react-paypal-express-checkout--save
-> 1. Empty the cart
- Save Payment Information
- Payment collection (detail)
- user collection
- Make an empty history page
- Make a route for hisotry page
- Fetch the History datas
- Populate datas in the browser