/PROJECT 19 · LEGACY WEB3 PROJECT

CREATOR IPFS

This project demonstrates and allows a user to upload files to IPFS (InterPlanetary File System) and obtain the public link to the pinned file. The project utilizes Express.js for the backend server that handles the file upload to IPFS, using Multer for handling file request, utilizing ThirdwebStorage for interacting with IPFS it gets the the pinned file url and sends it as a response to the request and . It also uses React Vite for frontend, XHR in the Frontend for sending requests to the server, and packages like react-toastify and react-dropzone were also used.

BUILT BY TAIWO EMMANUEL · FULL-STACK DEVELOPER

Project screenshot: Screenshot 2026 09 24 104847.png

/GOAL

Preserve the useful product context from CREATOR IPFS while keeping the project independently reviewable.

/STACK

Technologies used

  • @thirdweb-dev/react
  • @thirdweb-dev/sdk
  • npm-check
  • react
  • react-dropzone
  • react-toastify
  • cross-env
  • vite
  • @thirdweb-dev/storage
  • cors
  • dotenv
  • express
  • multer
  • nodemon
  • path
  • Solidity
  • IPFS
  • File system
  • NFT

/ARCHITECTURE

How it is built

  1. Interface — Public experienceLegacy interface and interaction surface imported as portfolio evidence.
  2. Project context — Product narrativeImported project details and feature notes remain editable in the owner workspace.
  3. Review boundary — Responsible scopeThe imported record is a draft and requires owner review before public publication.

/SCOPE

What was delivered

  • File Upload to IPFS: Users can upload files to the IPFS network directly from the frontend interface.
  • Progress Tracking: The interface displays the upload progress, allowing users to track the status of their uploads in real-time.
  • Feedback Notifications: Toast notifications are used to provide feedback to the user, indicating whether the file upload was successful or if there was an error.
  • Copy to Clipboard: Users can easily copy the generated IPFS URL to their clipboard with a single click, making it convenient to share or use the uploaded file.
  • Express Server: The backend server is implemented using Express.js, providing a robust and scalable foundation for handling HTTP requests.
  • IPFS File Upload: Files uploaded to the server are stored temporarily and then uploaded to the IPFS network using the ThirdwebStorage library.
  • Error Handling: The server handles various error scenarios, such as missing files or internal server errors, providing appropriate responses to the client.
  • Middleware Logging: Middleware logging is implemented to log server requests, helping in monitoring and debugging server activity.
  • REST API Endpoints: The server exposes REST API endpoints for file upload (POST /upload) and basic server status (GET /).

/NOTES

Scope boundaries

Imported legacy content is an unverified portfolio draft. Review claims, links, project ownership, and visual evidence before publishing.

/GALLERY

/MORE_WORK