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:
Silvia.Wibowo@binus.edu
Excel.Antonio@binus.edu
