Dwetransfer IPFS Demo App

This web application is created to demonstrate how files can be uploaded to ipfs in an simple react application.

The project uses Web3.Storage JS SDK to interact with IPFS.

This project was bootstrapped with Create React App.

How does it work?

The single page react application will take one or more files uploaded via a simple HTML form and use the client.put(files) method provided by web3.storage package to upload them to IPFS.

The app will display the successful dweb.link gateway url of the uploaded resources for user to download.

The intention is user can uplaod to ipfs gateway and have the links sent to a friend via email to received and download temporarily.

File Upload Page

Upload in progress page

Successfully uploaded to IPFS

Download page hosted by dweb.link

Error with Web3.Storage

Before you run

Signup with Web3.Storage Create an account with Web3.Storage by one click:

Get an API key from Web3.Storage:

Create a .env under /dwetransfer directory and populate it with your Web3.Storage as such:

    REACT_APP_WEB3STORAGE_API_TOKEN={YOUR_API_TOKEN}

Navigate to /dwetransfer directory, you can build the project by running:

yarn or npm install

To run the application

Navigate to /dtransfer directory, you can run:

yarn start or npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

To package the application for deployment

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

CD/CI Deployment (powered by Fleek)

The application is hosted via Fleek. Fleek integrates with Github.com and continuously integration and deploy the main branch into the IPFS network and provide a Web 2.0 url link for the users to visit.

Whatever is merged into main branch, fleek will recieved a github.com webhook to pull down the latest branch to build using some kind of workers.

Feature backlog

If I had more time, I would work on:

• add "Email to:" & "Sent from:" email inputs, and integrate with an email service to send an email
• improve error handling by mapping IPFS error with user actionable instructions
• integrate with a crypto wallet to take payment for premium featuers like permanent storage

Development Challenges

• Fleek services was extremely easy to use but I was not able to find the secret/api key management service which cause me to drop the scope for limited time
• Proper use of state and props in react needs to be respected to avoid funky frontend lifecycle issues
• Unsure if Fleek is able to handle server side logic, so I have not created a backend