Web Mobile Tokodistributor

📝 Description

Tokodistributor is an online marketplace. This website appears for mobile size because Tokodistributor has its own website for Desktop screen mode. The features I developed on this website include Cart & Checkout, Transaction History and Paylater. This website was my first product when I joined the Tokodistributor development team, continuing the development results from the previous developer.

My experience in product-based web development started here. I started to be orderly with a team of designers, a strong agile system and a complete data structure that had to be in accordance with mutual agreement. So, different from previous experience, I can adjust it according to my needs as the sole project holder. When developing Cart & Checkout, there were many bugs that had not been resolved. Moreover, when I first picked it up, the coding was still quite messy, so slowly as I studied the environment in Tokdis I managed to complete the task in 1.5 months. I succeeded in reducing rendering loops, spaghetti code and implementing reuseable components with JS Doc.

What was interesting for me was when developing Paylater. Precisely when implementing the camera. Because this feature will also be used by the Tokodistributor Android application, I must be able to operate the camera for KTP and face photos. The problem is, when you try it on your cellphone browser, there are no problems with the website, but when you open it via the application's webview, the camera cannot be accessed because the camera access permission trigger does not appear. So at that time the Android application developer and I were struggling to solve the problem together. And in the end, I found a suitable library, and the Android developer got a chance to provide camera access for the webview.

 

🍱 Frontend tech stack :

  • react 18.2.0
  • @react-google-maps/api
  • @slider-captcha/react
  • branch-sdk
  • ali-oss
  • dom7
  • emoji-to-short-name
  • firebase
  • framework7
  • js-cookie
  • lazysizes
  • react-camera-pro
  • react-copy-to-clipboard
  • react-facebook-pixel
  • react-html-parser
  • react-image-file-resizer
  • react-player
  • react-qr-code
  • redux-deep-persist
  • styled-components
  • sweetalert
  • tiktok-pixel

📝 Description

Tokodistributor is an online marketplace. This website appears for mobile size because Tokodistributor has its own website for Desktop screen mode. The features I developed on this website include Cart & Checkout, Transaction History and Paylater. This website was my first product when I joined the Tokodistributor development team, continuing the development results from the previous developer.

My experience in product-based web development started here. I started to be orderly with a team of designers, a strong agile system and a complete data structure that had to be in accordance with mutual agreement. So, different from previous experience, I can adjust it according to my needs as the sole project holder. When developing Cart & Checkout, there were many bugs that had not been resolved. Moreover, when I first picked it up, the coding was still quite messy, so slowly as I studied the environment in Tokdis I managed to complete the task in 1.5 months. I succeeded in reducing rendering loops, spaghetti code and implementing reuseable components with JS Doc.

What was interesting for me was when developing Paylater. Precisely when implementing the camera. Because this feature will also be used by the Tokodistributor Android application, I must be able to operate the camera for KTP and face photos. The problem is, when you try it on your cellphone browser, there are no problems with the website, but when you open it via the application's webview, the camera cannot be accessed because the camera access permission trigger does not appear. So at that time the Android application developer and I were struggling to solve the problem together. And in the end, I found a suitable library, and the Android developer got a chance to provide camera access for the webview.

 

🍱 Frontend tech stack :

  • react 18.2.0
  • @react-google-maps/api
  • @slider-captcha/react
  • branch-sdk
  • ali-oss
  • dom7
  • emoji-to-short-name
  • firebase
  • framework7
  • js-cookie
  • lazysizes
  • react-camera-pro
  • react-copy-to-clipboard
  • react-facebook-pixel
  • react-html-parser
  • react-image-file-resizer
  • react-player
  • react-qr-code
  • redux-deep-persist
  • styled-components
  • sweetalert
  • tiktok-pixel