This web application is created to demonstrate how files can be uploaded to ipfs in an simple react application.
The project uses ipfs-http-client package to interface with the ipfs core API. It also relies on the ipfs daemon/service running on localhost:5001 port.
This project was bootstrapped with Create React App.
The single page react application will take one or more files uploaded via a simple HTML form and use the ipfs.addAll() method provided by ipfs-http-client package to interface with IPF core APIs. The application must run side by side with a IPF node on the server to access IPF network.
The app will display the successful ipfs.io 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.
The future state of the app will be to provide permanent storage solution by integrating to a pinning service such as Pinata to allow users get the permanent links for a fee.
Navigate to /dwetransfer direction, you can build the project by running:
yarn or npm install
Don't forget to start your ipfs daemon on your local machine/server:
ipfs daemon
and ensure the services are listening on https://localhost:5001
A quick test is to visit the ipfs webui at https://localhost:5001/webui
If you can see the web UI then you are all good to go.
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.
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.
The application is hosted via IPFS partner 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.
Currently the deployed site is live at: https://patient-union-5647.on.fleek.co/
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 pinning service to provide long term storage for a fee
- integrate with a crypto wallet to take payment for premium featuers like permanent storage
- 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