# React/React Native - Research/Integration

- Our app needs to upload some files to IPFS.
- We want to use [Pinata](https://pinata.cloud) pinning API.
- Uploads should be performed from the client side directly (without passing through our NodeJS backend server)
- It have an HTTP api documented on the Pinata homepage, and NodeJS SDK
- There's no browser SDK but we could upload to the Pinata API endpoint directly using fetch() or axios client. A complete example with axios usage could be found inside its [Node SDK source](https://https://github.com/PinataCloud/Pinata-SDK/blob/master/src/commands/pinning/pinFileToIPFS.js)

### Goals and objectives

You need to implement a simple proof on concept app:

1. A simple UI with preview image (show some placeholder if no image uploaded) and "Upload..." button
2. After you've chose the file, it should be uploaded to IPFS and pinned up using Pinata API endpoint
3. Some JSON metadata (at least name + extension + mime type) should be uploaded & pinned with the file contents
4. The IPFS hash (CID) of the file should be kept somewhere in the state and stored inside the `localStorage` additionally. So the image was uploaded should display after page reload
5. To fetch file from IPFS you could use any ipfs to https gateways (e.g. cloudflare, ipfs.io etc)
6. Image was fetched should be displayed. We suggest to convert the BLOB received to the base64 data uri.
7. It would be good if you will move uploading/fetching to the separate hooks to be easily imported from the PoC app to the main app.