└── README.md


/README.md:
--------------------------------------------------------------------------------
  1 | # Frontend Interview
  2 | 
  3 | Implement either 1 of the 1-3 challenge assignments. Please fork this repo and share it with us.
  4 | 
  5 | # TypeScript Test
  6 | 
  7 | Candidate must use typescript to complete challenges below.
  8 | 
  9 | ## General Expectations
 10 | 
 11 | For the assignments, we expect candidates to:
 12 | 
 13 | - **Write clean, readable, and efficient** TypeScript code.
 14 | 
 15 | - **Don’t overuse features** provided by the standard library.
 16 | 
 17 | - **Don’t overcomplicate** the code.
 18 | 
 19 | - Organize the code into **well-defined components** and adhere to TypeScript best practices, using strong typing and modular organization.
 20 | 
 21 | - Follow the **TypeScript coding guidelines** and aim to make the code scalable and maintainable.
 22 | 
 23 | - Use modern TypeScript features, including **generics and advanced typing** where necessary.
 24 | 
 25 | - **Apply performance optimization techniques** and, if relevant, use Web Workers or other methods to handle computationally heavy tasks in a frontend environment.
 26 | 
 27 | ## Challenges Base Criteria
 28 | 
 29 | - **All challenges below must be dockerized**: Make sure the frontend can be run in a container environment.
 30 | 
 31 | - **All challenges below must implement** light / dark mode without any glitch when moving into different parts of the website / tab.
 32 | 
 33 | - **All challenges below must consider browser behavior**: Make sure the platform runs smoothly on multiple browsers (Firefox, Chrome, Microsoft Edge, Opera, etc).
 34 | 
 35 | - **All challenges below must have error handling**: Any unexpected result must be handled, this will include failed to fetch data or data fetch failed when  mid-scrolling (Implement Retry Mechanism), and empty data handling.
 36 | 
 37 | ## 1. Video Streaming Platform
 38 | 
 39 | Design and implement interface for video streaming platform which have core functionality and these criteria:
 40 | 
 41 | 1. Search:
 42 | 
 43 | - Implement debouncing to avoid excessive requests.
 44 | 
 45 | 2. Filter:
 46 | 
 47 | - Implement multiple filtering so the user can filter videos by category, uploader.
 48 | 
 49 | 3. Sorting:
 50 | 
 51 | - Implement sort by views, likes, and upload date.
 52 |     
 53 |     ****For search, filter, and sorting, implement an infinite scroll feature or “Load More” feature.**
 54 | 
 55 | 4. Must Have Feature:
 56 | 
 57 | - Implement pre-loading video (thumbnail).
 58 | 
 59 | - Add to favorites, retain the user data so it remains available for future visits unless the user clears the browser data.
 60 | 
 61 | 
 62 | ## 2. E-Commerce Platform
 63 | 
 64 | Design and implement interface for E-Commerce platform which have core functionality and these criteria:
 65 | 
 66 | 1. Search:
 67 | 
 68 | - Implement debouncing to avoid excessive requests.
 69 | 
 70 | 2. Filter:
 71 | 
 72 | - Implement multiple filtering so the user can filter items by category, seller, price range, availability (Available or Out of Stock), and rating.
 73 | 
 74 | 3. Sorting:
 75 | 
 76 | - Implement sort by price high to low or low to high, recommended seller, and rating.
 77 | 
 78 |     ****For search, filter, and sorting, implement an infinite scroll feature or “Load More” feature.**
 79 | 
 80 | 4. Must Have Feature:
 81 | 
 82 | - Implement pre-loading video for products with video (pre-loading when the user lands on home page).
 83 | 
 84 | - Add to cart feature, retain the user data so it remains available for future visits unless the user clears the browser data.
 85 | 
 86 | ## 3. Crypto Tracker Website
 87 | 
 88 | Design and implement interface for Crypto Tracker Website which have core functionality and these criteria:
 89 | 
 90 | 1. Search:
 91 | 
 92 | - Implement debouncing to avoid excessive requests.
 93 | 
 94 | 2. Filter:
 95 | 
 96 | - Implement multiple filtering so the user can filter crypto by category such as AI / Memes / Solana Eco / ETH Eco, market cap, top gainer, and top loser.
 97 | 
 98 | 3. Sorting:
 99 | 
100 | - Implement sort by ticker name, market cap, 24h volume, 1h% price change, 24h% price change, 7d% price change, and circulating supply.
101 | 
102 |     ****For search, filter, and sorting, implement an infinite scroll feature or “Load More” feature.**
103 | 
104 | 4. Must Have Feature:
105 | 
106 | - Implement web scraping, give some list of crypto news.
107 | 
108 | - Add to favorites, retain the user data so it remains available for future visits unless the user clears the browser data.
109 | 
110 | # Cryptocurrency Test
111 | 
112 | 1. Explain what you know about layer 1 and layer 2. Use ELI5 to explain this.
113 | 
114 | 2. Explain this scenario, a user wants to withdraw Arbitrum using Arbitrum One Network from exchange A to exchange B but the user has a mistake copy paste the Ethereum Main Net address deposit instead of Arbitrum One Network address deposit, what will happen? Say our exchange is the exchange B as a receiver, list all possibilities for this scenario and how will you as a frontend displaying the user balance regarding this scenario?
115 | 
116 | 3. Explain this transaction hash, include the details. 
117 |     
118 |     - https://mantlescan.xyz/tx/0xd43ce2aa598a75d9595a2c2779e5bf4b0375eef72a69c6d8e2b0bf5f676c66af 
119 | 
120 | 4. Explain about the funding fee on exchange, how it works, and how you will as a frontend displaying this to the user?
121 | 
122 | 5. What is network congestion? As a frontend, how will you display this to the user?
123 | 
124 | 6. Why do you want to work for Bitwyre?
125 | 


--------------------------------------------------------------------------------