Overview

Manager: @Ulad Palinski

Wiki: 42 Hackathon - Adaptive User Media Experience Wiki

Quickstart guide

Go through Wiki page

42 Hackathon - Adaptive User Media Experience Wiki

Setup environment

  1. Clone GitHub repository: ‣
  2. Download and install Node.js: https://nodejs.org/en/download

Run Developer Console

  1. Start application

    1. Install dependencies:

      npm i

    2. Copy ENV file:

      cp .env.stage .env

    3. Run an application:

      npm run start -w apps/developer-console

    4. Open http://localhost:5173/

  2. Use your email to login
  3. Top Up your DDC Account in order to be able to upload and download files
  4. Now you can create a bucket and upload any file (better to prepare some image because you’ll need it later).

Start coding

Image resizing

  1. You can read some articles explaining why it’s important to optimise images: https://blog.cloudflare.com/announcing-cloudflare-image-resizing-simplifying-optimal-image-delivery/, https://www.wearediagram.com/blog/optimizing-images-better-web-performance
  2. You can use resizer library to resize images client side (inside Developer Console): https://www.npmjs.com/package/react-image-file-resizer
  3. Before starting coding, please go through contributing guide: https://github.com/Cerebellum-Network/cluster-apps/blob/dev/CONTRIBUTING.md
  4. To keep the UI part as simple as possible, the suggestion is to add ‘resize’ feature to already uploaded files. The user can upload image as a regular file and there is a new ‘resize’ button that client can click. So the flow is next:

    1. Upload image

    2. If file type is image, show extra ‘resize’ button. Link to the code: https://github.com/Cerebellum-Network/cluster-apps/blob/76d49876a3587d67822e30165f90728726851085/apps/developer-console/src/applications/ContentStorage/FileManager/Row.tsx#L321. Place on the UI:

      Screenshot 2025-02-25 at 09.22.42.png

    3. When user clicks on ‘resize’ button, show to him a dialog window with most popular image sizes as a checkboxes list so user can select the sizes he is interested in. You can select icons here: https://mui.com/material-ui/material-icons/?srsltid=AfmBOoo2zd66oRuaJbOSquaaVM6VqiItUh91ssr6xs9TsRhrq0EU03A5&query=image. Components that you can use: dialog and checkbox.

    4. Once user selected sizes and clicked Resize & Upload button (in dialog window). Execute resize and upload one by one (per each size). Ideally show to user progress (e.g. https://mui.com/material-ui/react-progress/?srsltid=AfmBOoqyY0J7WTB5g8bZNynNAcAAVvIXGJxT09jAJmPQU0oQvAvllwTA#circular-with-label). The flow is next:

      1. Download image from DDC into memory.
      2. Iterate over selected sizes and for each execute resizer.
      3. Upload resized image to DDC using this method: https://github.com/Cerebellum-Network/cluster-apps/blob/76d49876a3587d67822e30165f90728726851085/apps/developer-console/src/applications/ContentStorage/ContentStorage.tsx#L201. Insert size as image name prefix.
      • Resized image naming convention
  5. After image resizing and upload user should see original images and separate image per each size that has been selected.

Your Challenge - Tasks

Task Objective Students
Images resizing Update Developer Console to suggest image resizing on image uploading into multiple sizes so that user can select the sizes he would like his image to be resized to <students can tag themselves if they want to work on this task>
Videos encoding into HLS (multiple qualities) Update Developer Console to suggest video encoding into HLS with multiple qualities options so that user can select the qualities he would like his video to be encoded to <students can tag themselves if they want to work on this task>

Execution logs