Project: Img3

Title: Img3 Project Proposal Champion: Muxin Date: 2022-12-29

TLDR:

Img3 is a Web3 image solution that includes image rendering, upload, Web3 storage SDK adaptors, etc. Img3 is an open-source public good. In this proposal, we will implement it based on IPFS.

This will be a standalone project in LXDAO with a project number.

Description:

Questions in the real world

When I buidl an image upload feature on the website, editor, profile, etc. it takes time to decide where to store the images, which CDN I need to use, and how to buidl backend API.

This simple requirement costs a lot of time and resources without prior SDK and API integration.

IPFS is a perfect solution here, especially for public images like Avatar. You don’t need to think about where to store the images. All are on the IPFS network. And the files last forever. You don’t need to worry about the backup. And different IPFS Gateways are like CDN. Try to load your files to their servers and cache them.

In short, this solution makes a set of OpenSource components easy to integrate with the existing system and implements the Image uploading features in mins.

Requirements

• An effortless way of uploading images to IPFS
• Super easy to integrate with the existing system (FrontEnd, BackEnd, and SDKs)
• Try to match the fastest IPFS Gateway to render the image

This project consists of four core components, all based on React at the beginning

• ImageUploader3: choose images and upload them to IPFS by using SDK Connectors or BackEnd API
• Img3: find the fastest IPFS Gateway for the viewer and show the images
• SDK Connector: common IPFS service providers' SDK adaptor
• BackEnd Endpoint Handler(optional): HTTP controller for accepting payload from ImageUploader3

Project Details:

Architecture design:

1. Img3:

This is the rendering image component, and the usage should be:

*// Web2 image
<img src="https://xxx.com/xxx.jpg" alt="" />

// Web3 image
<Img3 src="https://snapshot.4everland.link/ipfs/bafkreibswn...xulzesp33fu" alt="" />*

Features:

• Accept https:// or https://snapshot.4everland.link/ipfs/ for src and handled well
• By default, try to find the fastest IPFS Gateway to render (send multiple requests in parallel to the common IPFS Gateway)
• Support custom IPFS Gateway, for example, you want to use a self-hosted IPFS Gateway or a dedicated Pinata API Gateway
• Provide fallback handling logic, for example, display a default loading error image

This component can be the first choice of image rendering component in Web3.

Actions:

• Component development: total ~6hrs Senior Frontend Developer
• Release the component and open source: total ~4hrs Senior Frontend Developer

1. ImageUploader3:

This is the image uploader component, which will provide the following features:

• Click to choose images
• Convert the image to Base64 and uploading to IPFS in two ways
  • Pure FrontEnd mode: the most straightforward way, but it needs to expose the IPFS Pinning Service access token in FrontEnd, recommended to use in the safe internal network system
  • With BackEnd mode: set up an API endpoint, this component will pass the Base64 image to that API, and the API invokes the SDK connector to upload. This can keep the access token safe.
• The API design should be loose coupling, which means it should be able to work with other Image related components well, like react-image-crop - npm

Actions:

• Component development: total ~16hrs Senior Frontend Developer
• Release the component and open source: total ~4hrs Senior Frontend Developer

1. SDK Connector:

This is the logic for wrapping logic for different IPFS Gateway service providers, for example:

• NFT.Storage
• Pinata
• etc

This will provide unified APIs to upload with the Service Provider Name and Access Token and return IPFS CID after uploading successfully. We will support NFT.Storage at the beginning and integration with more based on sponsorships.

Actions:

• SDK Connector development: total ~4hrs Senior FrontEnd Developer

1. BackEnd Endpoint Handler(optional):

We can also provide a controller library for handling the request from ImageUploader3. In the BackEnd mode, ImageUploader3 will post the Base64 image to the API endpoint, this BackEnd Endpoint Handler can create this endpoint.

In short, this creates a controller and accepts the payload from FrontEnd. Then it will invoke the SDK connector to upload to IPFS and return the IPFS URL to the FrontEnd to render.

Actions:

• BackEnd Endpoint Handler development: total ~4hrs Senior Backend Developer

1. Others:

• UI/UX Design and support: ~6hrs Senior or Intermediate UI/UX
• Official Document Website: ~6hrs FrontEnd Developer
• Writing posts and tech promotions: ~10hrs

Team settings:

• Project Manager: Muxin
• UI/UX Designer: 1
• Frontend Developer: 1 or 2
• Backend Developer: 1 (optional)

Milestone:

After the proposal got approved:

• ~ 1 week, share this collaboration news and assemble the team from the community
• ~ 2-3 weeks for design, development, integration, and testing, then deliver the product
• ~ 1 week promoting this product

Revenue distribution:

First Filecoin Grants

This project has got the file coin grants. It’s a total of 5000U, so LXPs are not needed. According to the Various types of Web3 role salary research the distribution plan is:

• 20%(=1000U) for LXDAO treasury
• 80%(=4000U) for contributors
  • Project Manager: 500U
  • Early contributors (MVP, proposal creator, etc.): 500U
  • UI/UX Designer: 300U
  • Frontend Developer: 2000U
  • Backend Developer (optional): 200U
  • Others like promotions, maintenance, etc.: 500U

Sponsorships/Grants/Hackathon/Donation:

• 30% for LXDAO treasury
• 60% for project treasury for maintainers and contributors
• 10% for early contributors

Grants for big versions or features:

• Will draft a new proposal for it

Key results:

• Finish the product improvement on time with good quality and user experience. It will be production ready and can be used publicly
• Share this product with as many as possible users