Scribd
Upload
11 views

Web React JS Project

Uploaded by

Juli Yanti
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views

Web React JS Project

Uploaded by

Juli Yanti
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Web React JS

Bootcamp Project
LMS Web Team 2023
Mini Marketplace Apps
(Storegg)

Notes:

 Individual Project

 Project must be made using React


Js

 Design does not have to be same


as mockup, as long as it fulfills the
requirements
Home Page 1 – List View Product

Functionality :
 Search Box
 Coins Balance (Integrated with Mini Games)
 List View Products

- Product data must be taken from API

- Button Icon on the right side of Available Products can


toggle List & Grid View
 Float Action Button (Shortcut for Mini Games SubApp)
 Button to go to My Products
 Back to Home Page when OnClick Logo Area

Note :
- OnClick Product List, direct to detail Page

- Loading system when loading the API (optional)


Home Page 2 – Grid View Product

Functionality :

 Search Box

 Coins Balance (Integrated with Mini Games)

 Grid View Products

- Product data must be taken from API

- Button Icon on the right side of Available Products can


toggle List & Grid View

 Float Action Button (Shortcut for Mini Games SubApp)

 Button to go to My Products

 Back to Home Page when OnClick Logo Area

Note :
- OnClick Product List, direct to detail Page

- Loading system when loading the API (optional)


Product Detail Page
Buy/Sell Page1

Functionality :

 Show Product Details (Image, Name, Price,


Description)

 Buy/Sell Product Button

- Buy: Deduct coin balance and add product to


My Products

- Sell: Add coin balance and remove product


from My Products

Note :
User can access this page directly from url (using
productid) or from view product menu
Product Detail Page
– Buy/Sell Page 2

Functionality :

 Success Alert

- Open Alert when Buy/Sell is


pressed

- Update & Show new balance


My Products Page

Functionality :

 Show Products that user have


bought

 Product must be stored in local


storage (Hint: use redux persist)
Collect Coin - SubApp

Functionality :

 Minigame MUST be a SubApp

 Show value of each prize (NOTE: Value does not


have to be same as mockup)

 Show egg that can be clicked to get prize


Collect Coin - SubApp

Functionality :

 Show image of cracked egg and the


prize

 Prize received must be random

 Add value of coin to balance


API Fake StoreAPI
List products:
https://fakestoreapi.com/products
Detail product:
https://fakestoreapi.com/products/{productId}
Assets
You can use assets from here
Or use your own assets.
Libraries you can use
Axios
React Navigation
 https://www.npmjs.com/package/axios
 https://reactnavigation.org/docs/getting-started/
Redux
 https://react-redux.js.org/introduction/getting-started  https://reactnavigation.org/docs/hello-react-navigation/
 https://redux-toolkit.js.org/introduction/getting-started
Redux Persist
 https://www.npmjs.com/package/redux-persist
 https://react-native-async-storage.github.io/async-storage/docs/i
nstall/
Project Submission

 Delete the node_modules folder before zipping the file. (to reduce file size)
 Zip with format [FULL NAME] – [NIM]. Example: Silvia – 2440010543.zip
Project Deadline -
If you have any questions, contact:
[email protected]
[email protected]

You might also like