Lädt...


🔧 Introducing Ready - Upload PDF & Read Anywhere


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

This is a submission for the The Pinata Challenge

What I Built

Ready is a full stack application where you can upload your PDFs, read them inside the application itself, and find other PDFs uploaded by other users just like you. All you need is a web browser and an 'okayish' network!

I have seen many people hesitate when they have to upload their stories online. I want to give them a platform where they can always be "Ready" to upload their books/stories, so that other users can read them too.

On the other hand, users can use this website as a cloud storage for their own documents.

I have tried to make this site completely accessible by allowing keyboard navigation while uploading PDFs and editing them. Moreover, I have added tooltips and alt text for the images wherever possible.

Capabilities/Features

  • User authentication with email, password & Google
  • Upload PDF
  • Read PDF
  • Download PDF
  • Edit PDF details
  • Delete PDF and details
  • Browse the library of PDFs
  • Wishlist any PDF
  • See user statistics on dashboard (PDFs uploaded, wish listed)
  • Dark mode support with system option

Tech used

  • Next.js
  • Pinata
  • Appwrite
  • shadcn
  • Tailwind CSS

Demo

Here's the live version: Ready

My Code


Screenshots

Upload PDF page

Image description

Edit PDF page

Image description

Login page

Image description

Library page - Grid view (User not logged in)

Image description

Library page - List view (User not logged in)

Image description

Library page - List view (User is logged in) on Light theme

Image description

Wishlist page - When there are no wish list items

Image description

Read PDF page

Image description

More Details

I used Pinata File API on a couple of occasions:

  • Upload PDF
  • Upload a thumbnail image

Let's look at them below:

1. Upload PDF Document with Pinata

const uploadDocFile = async () => {
    if (!file) {
      return;
    }

    try {
      setUploading(true);
      const res = await uploadFile(file);
      const url = await res.json();
      setUrl(url);
      setUploading(false);
      if (!!url) {
        toast({
          description: "Document uploaded successfully!",
        });
      }
    } catch (e) {
      setUploading(false);
    }
  };

In the above code, when the user clicks on "Upload Document" button, uploadDocFile function gets called. This function is responsible for uploading the document to Pinata and get the file URL in return.

uploadFile function

This function works behind the scenes of the uploadDocFile function.

import { pinata } from "./config";

export const uploadFile = async (file) => {
  const keyRequest = await fetch("/api/key");
  const keyData = await keyRequest.json();
  const upload = await pinata.upload.file(file).key(keyData.JWT);
  const urlRequest = await fetch("/api/sign", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ cid: upload.cid }),
  });
  return urlRequest;
};

In the above code, 3 things are happening:

  • Fetch the API key from Pinata
  • Upload the file with the help of the API key
  • Get the file URL, so that we can store it in database

Fetch the API key from Pinata

To upload files to Pinata, an API key is required. I used Next.js built-in API routes and created a GET request to fetch the API key from Pinata.

import { pinata } from "@/utils/config";
import { NextResponse } from "next/server";

export const dynamic = "force-dynamic";

export async function GET(req, res) {
  try {
    const uuid = crypto.randomUUID();
    const keyData = await pinata.keys.create({
      keyName: uuid.toString(),
      permissions: {
        endpoints: {
          pinning: {
            pinFileToIPFS: true,
          },
        },
      },
      maxUses: 1,
    });
    return NextResponse.json(keyData, { status: 200 });
  } catch (error) {
    return NextResponse.json(
      { text: "Error creating API Key:" },
      { status: 500 }
    );
  }
}

Use the API key to upload file to Pinata

In the uploadFile function, I received the key from Pinata. Here, I used that key to upload the PDF to Pinata.

const upload = await pinata.upload.file(file).key(keyData.JWT);

Get the file URL to store in the database

Using Next.js API routes, I created a POST request by sending the cid property to the Pinata server and get the signed URL in return. This URL will be stored in the database as well as used to download the PDF document.

import { pinata } from "@/utils/config";
import { NextResponse } from "next/server";

export const dynamic = "force-dynamic";

export async function POST(req, res) {
  try {
    const data = await req.json();
    const url = await pinata.gateways.createSignedURL({
      cid: data.cid,
      expires: 500000, // 138 hours
    });
    return NextResponse.json(url, { status: 200 });
  } catch (error) {
    return NextResponse.json(
      { text: "Error creating API Key:" },
      { status: 500 }
    );
  }
}

2. Upload Image with Pinata

Similarly, I also used Pinata File API to upload thumbnail or cover images for the PDFs using the function below. This function uses the same underlying functions that were used to upload the PDF.

const uploadImageFile = async () => {
    if (!image) {
      return;
    }

    try {
      setThumbnailUploading(true);
      const res = await uploadFile(image);
      const url = await res.json();
      setThumbnailUrl(url);
      setThumbnailUploading(false);
    } catch (e) {
      setThumbnailUploading(false);
    }
  };

Conclusion

Ready is a place where you can just sign up or "Continue with Google" to upload your PDF document or read other digital books uploaded by others.

Don't forget to try "Ready"! I need feedback!

If there's any issue with the project, please create an issue on the GitHub repository mentioned in this post or reach out to me or directly comment here.

Thank you!

...

📰 VMware Anywhere Workspace provides secure experience to employees anywhere in the world


📈 22.86 Punkte
📰 IT Security Nachrichten

🐧 Introducing ManPDF - Read your Man pages in PDF format


📈 22.68 Punkte
🐧 Linux Tipps

🕵️ Critical PDF.js & React-PDF Vulnerabilities Threaten Millions Of PDF Users


📈 22.62 Punkte
🕵️ Hacking

📰 Introducing AT&T USM Anywhere Advisors


📈 21.97 Punkte
📰 IT Security Nachrichten

🔧 Read, read and read some more...


📈 21.82 Punkte
🔧 Programmierung

⚠️ PDF bearbeiten im Handumdrehen mit dem PDF-Experten – SwifDoo PDF


📈 20.61 Punkte
⚠️ Malware / Trojaner / Viren

🕵️ Documalis Free PDF Editor/Free PDF Scanner PDF File JPEG Image buffer overflow


📈 20.61 Punkte
🕵️ Sicherheitslücken

🕵️ Artifex MuPDF 1.13.0 pdf/pdf-xref.c pdf_get_xref_entry PDF File denial of service


📈 20.61 Punkte
🕵️ Sicherheitslücken

🕵️ Artifex MuPDF 1.12.0 PDF Document pdf/pdf-xref.c pdf_load_obj_stm denial of service


📈 20.61 Punkte
🕵️ Sicherheitslücken

🕵️ Artifex MuPDF 1.12.0 PDF File pdf/pdf-xref.c pdf_read_new_xref denial of service


📈 20.61 Punkte
🕵️ Sicherheitslücken

🕵️ Artifex MuPDF 1.12.0 PDF File pdf/pdf-xref.c ensure_solid_xref memory corruption


📈 20.61 Punkte
🕵️ Sicherheitslücken

🕵️ MuPDF 1.12.0 PDF File pdf/pdf-parse.c pdf_parse_array denial of service


📈 20.61 Punkte
🕵️ Sicherheitslücken

🕵️ Artifex MuPDF pdf/pdf-stream.c build_filter_chain PDF Document denial of service


📈 20.61 Punkte
🕵️ Sicherheitslücken

🕵️ Artifex MuPDF 1.12.0 PDF Document pdf/pdf-xref.c pdf_load_obj_stm Denial of Service


📈 20.61 Punkte
🕵️ Sicherheitslücken

🕵️ Artifex MuPDF 1.12.0 PDF File pdf/pdf-xref.c pdf_read_new_xref Denial of Service


📈 20.61 Punkte
🕵️ Sicherheitslücken

🕵️ Artifex MuPDF 1.12.0 PDF File pdf/pdf-xref.c ensure_solid_xref Pufferüberlauf


📈 20.61 Punkte
🕵️ Sicherheitslücken

🕵️ MuPDF 1.12.0 PDF File pdf/pdf-parse.c pdf_parse_array Denial of Service


📈 20.61 Punkte
🕵️ Sicherheitslücken

🕵️ Artifex MuPDF pdf/pdf-stream.c build_filter_chain PDF Document Denial of Service


📈 20.61 Punkte
🕵️ Sicherheitslücken

🕵️ MuPDF PDF File Handler pdf/pdf-xref.c pdf_load_xref Denial of Service


📈 20.61 Punkte
🕵️ Sicherheitslücken

🕵️ CVE-2024-8717 | PDF Flipbook, 3D Flipbook, PDF Embed, PDF Viewer Plugin cross site scripting


📈 20.61 Punkte
🕵️ Sicherheitslücken

🕵️ MuPDF PDF File Handler pdf/pdf-xref.c pdf_load_xref Denial of Service


📈 20.61 Punkte
🕵️ Sicherheitslücken

🔧 Best 4 Methods to Build a PDF Viewer in React.js: PDF.js, react-pdf, and More (2024 Guide) 🚀


📈 20.61 Punkte
🔧 Programmierung

🍏 Bare-bones mobile workstation is ready for anything, anywhere [Setups]


📈 20.11 Punkte
🍏 iOS / Mac OS

🪟 HP unwraps new EliteBook PCs that are ready to work anywhere


📈 20.11 Punkte
🪟 Windows Tipps

🕵️ http://umkm.padang.go.id/index.php?option=com_content&view=article&id=46&Itemid=78


📈 18.08 Punkte
🕵️ Hacking

📰 Normalizing Security Culture: Don’t Have to Get Ready If You Stay Ready


📈 17.37 Punkte
📰 IT Security Nachrichten

🔧 Introducing Tapyr: Create and Deploy Enterprise-Ready PyShiny Dashboards with Ease


📈 17.22 Punkte
🔧 Programmierung

🔧 Introducing two websites for Tailwind ready-made components


📈 17.22 Punkte
🔧 Programmierung

matomo