Scribd
Upload
11 views

Web React JS Project

Uploaded by

Juli Yanti
Copyright
© © All Rights Reserved
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
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