DEV Community: Suman Sourabh

Introducing Ready - Your Own PDF Reader & Library

Suman Sourabh — Sat, 12 Oct 2024 18:21:25 +0000

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. All they need to do is set the book as "Private" and their book or doc will not be visible to other users!

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
Set PDF as private or public
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

Sumansourabh14 / ready

Kindle Clone

Ready

Why?

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…

View on GitHub

Screenshots

Upload PDF page

Edit PDF page

Login page

Library page - Grid view (User not logged in)

Library page - List view (User not logged in)

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

Wishlist page - When there are no wish list items

Read PDF page

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!

Glam Up My Markup: Cricket League!

Suman Sourabh — Sun, 04 Aug 2024 09:19:15 +0000

This is a submission for Frontend Challenge v24.07.24, Glam Up My Markup: Recreation

What I Built

Here I have built a landing page for the New York Recreational Cricket League by transforming a basic HTML template into something that is visually related to Cricket. I used some CSS and basic JavaScript for interactivity.

Demo

Journey

I played with CSS gradients to add a visual of sky (in the header) and grass (in the footer). I included a few icons related to Cricket as well.

For enhancing the user experience, I included a "Go to top" button, which when clicked, goes to the top of the page. It is fixed on the bottom right of the screen.

Looking forward to more frontend challenges.

Thanks for reading this post!

2024 Guide to Infinite Scrolling in React/Next.js

Suman Sourabh — Wed, 05 Jun 2024 17:00:43 +0000

Ever saw how posts keep on displaying on the feed section of X (Twitter) or Instagram if you keep scrolling down?

That “thing” is called infinite scroll.

What is Infinite Scrolling?

Infinite scrolling is a technique or approach in web development where more resources are fetched and displayed on the page as the user scrolls down.

For example, in social media platforms such as X (Twitter), if you scroll down in the feed, more posts will display to you.

This approach is helpful when you have a lot of resources to show on the page and you do not want to fetch them all at once and slow down the application.

How to use it in React/Next.js?

Of course, you can build your own infinite scrolling component from scratch but in many cases, it is better to use a library.

On Libertas, I have used a popular library called react-infinite-scroll-component.

This library has an inbuilt component which does the behaviour of infinite scrolling for us. We just have to dump our code of fetching multiple items inside this code.

Feedback is appreciated about this approach.

Understanding the Scenario

I have a feed page on Libertas where I show all the posts that the users have created. It is just like how different items are displayed on the feed page on Reddit, X, Medium, Nike and other such platforms.

Our aim is to fetch some posts/items when the page loads fully. When the user scrolls to the bottom of the page or the last item that was fetched when the page loaded, we trigger a GET request to fetch more posts.

This process repeats until all the items are fetched, which may not be possible if the items are huge in numbers (>500 items). Hence, the name “Infinite scroll”! Users will get exhausted, won’t they?

Steps to Implement `react-infinite-scroll-component`

Below are the steps where I mention how I added this component into Libertas.

Install the package

For npm:

npm i react-infinite-scroll-component

For yarn:

yarn add react-infinite-scroll-component

Copy and paste the below code for infinite scroll in Libertas

<InfiniteScroll
  dataLength={items.length} //This is important field to render the next data
  next={fetchData}
  hasMore={true}
  loader={<h4>Loading...</h4>}
  endMessage={
    <p style={{ textAlign: 'center' }}>
      <b>Yay! You have seen it all</b>
    </p>
  }
>
  {items}
</InfiniteScroll>

Understanding the props

According to react-infinite-scroll-component GitHub page:

dataLength: set the length of the data. This will unlock the subsequent calls to next.
next: a function which must be called after reaching the bottom. It must trigger some sort of action which fetches the next data. The data is passed as children to the InfiniteScrollcomponent and the data should contain previous items too. e.g. Initial data = [1, 2, 3] and then next load of data should be [1, 2, 3, 4, 5, 6].
hasMore: it tells the InfiniteScroll component on whether to call next function on reaching the bottom and shows an endMessage to the user
loader: you can send a loader component to show while the component waits for the next load of data. e.g. <h3>Loading…</h3> or any fancy loader element
endMessage: this message is shown to the user when he has seen all the records which means he’s at the bottom and hasMore is false
items: The list of items to be fetched and displayed on the page. In case of Libertas, the {items} are the list of posts created by users.

Further Steps:

Fetch some posts when the page loads
Display the list of posts on the page
Make a slight change on the API GET request (Backend) to fetch the next list of posts
Fetch the next list of posts on the frontend

Final code:

const [posts, setPosts] = useState([]);
  const [count, setCount] = useState(4);
  const [currentCount, setCurrentCount] = useState(null);
  const [total, setTotal] = useState(null);

  const fetchPosts = async () => {
    const data = await fetchAllPosts(count);
    console.log(data?.data?.data);

    setPosts(data?.data?.data);
    setCurrentCount(data?.data?.currentLength);
    setTotal(data?.data?.total);
    setCount(count + 2);
  };

  useEffect(() => {
    fetchPosts();
  }, []);

  return (
    <Stack>
        <InfiniteScroll
          dataLength={posts?.length} //This is important field to render the next data
          next={fetchPosts}
          hasMore={currentCount !== total}
          loader={<h4>Loading...</h4>}
          endMessage={
            <p style={{ textAlign: "center" }}>
              <b>Yay! You have seen it all</b>
            </p>
          }
        >
          {posts.map((post) => (
            <PostComponent
              key={post._id}
              post={post}
              id={post._id}
              handleUpvote={() => handleVote(upvoteAPost, post._id)}
              handleDownvote={() => handleVote(downvoteAPost, post._id)}
              individualView={false}
            />
          ))}
        </InfiniteScroll>
      </Stack>
  );

Breakdown of the code

I created a GET request named fetchAllPostswhich fetches 4 posts when the page loads. I used map function to list all the posts inside the InfiniteScrollcomponent.

In order to fetch the next set of posts, I had to make a slight change in the API of the request (written in Node.js) where I fetch the posts. That change was adding a count or a number that will tell me how many posts to fetch. When the user scrolls down the web page, those number of posts will be fetched from the database and displayed.

// @desc    Get all the posts
// @route   GET /api/user/posts
// @access  Public
const getAllPosts = asyncHandler(async (req, res, next) => {
  const { count } = req.query;

  const posts = await PostModel.find();
  const postsToDisplay = posts.reverse().slice(0, count);

  res.status(200).json({
    success: true,
    total: posts.length,
    currentLength: postsToDisplay.length,
    data: postsToDisplay,
  });
});

I added a count variable which comes from the query in the URL just like this: api/v1/posts?count=4. This fetches only 4 posts.

Now, things were easier. Time to add the frontend code to fetch the next set of posts.

const [posts, setPosts] = useState([]);
  const [count, setCount] = useState(4);
  const [currentCount, setCurrentCount] = useState(null);
  const [total, setTotal] = useState(null);

  const fetchPosts = async () => {
    const data = await fetchAllPosts(count);

    setPosts(data?.data?.data);
    setCurrentCount(data?.data?.currentLength);
    setTotal(data?.data?.total);
    setCount(count + 2);
  };

The above code first fetches 4 posts (coming from the initial value of the count state variable).

It also sets the current count or the current length of the posts which will be 4 on the first fetch.

The value of total no. of posts is also set as it is being returned in the API response.

Lastly, the value of count updates to 6, which will be used for the next fetch function call.

The above values are used in the InfiniteScrollcomponent below:

<InfiniteScroll
  dataLength={posts?.length} //This is important field to render the next data
  next={fetchPosts}
  hasMore={currentCount !== total}
  loader={<h4>Loading...</h4>}
  endMessage={
    <p style={{ textAlign: "center" }}>
      <b>Yay! You have seen it all</b>
    </p>
  }
>
  {posts.map((post) => (
    <PostComponent
      key={post._id}
      post={post}
      id={post._id}
      handleUpvote={() => handleVote(upvoteAPost, post._id)}
      handleDownvote={() => handleVote(downvoteAPost, post._id)}
      individualView={false}
    />
  ))}
</InfiniteScroll>

Working of `InfiniteScroll`component

In the above code, the list of posts are displayed. After this:

The value of dataLengthgets assigned to the number of posts fetched for the first time.
When the user scrolls down, the hasMoreprop comes into action. hasMoretells us that if it is true, initiate the function available in the next prop. In our code, when the current count or current length of the posts is not equal to the total no. of posts, call the fetchPostsfunction.
Then fetchPostsis called with the updated count value of 6, then 6 posts are fetched and the value of posts array is updated. The value of dataLengthis also updated.
If all the posts are not fetched, the content inside the loader prop is displayed after the latest post. Ideally, this can be a skeleton component or a loading text/animation.
If hasMoreis false or in other words, all the posts are fetched from the database, the element inside the endMessageprop is displayed after the last post.

Conclusion

Infinite scroll is a good approach to make a website perform a bit better but like everything in tech, this approach is not for every website. It mostly depends on the type of platform and the type of users (target audience).

I added this to Libertas, the online discussion platform built with Next.js, because the users will create multiple posts and it will be a headache/nightmare to render everything at once on a single web page. Wouldn’t it?

Wondering what is Libertas?

Libertas is an online discussion website for users where they can just discuss. Discuss freely. No rules, no moderators.

You can just look at the posts that the users have created or if you feel hooked, you can sign up and start creating! You can upvote/downvote posts and comment on them. If you forget your password, there is an option reset it too!

Try Libertas here.

You can let me know on LinkedIn or Twitter if you want any feature or would like to have a suggestion.

Any feedback is deeply appreciated!

How to Display a PDF in Next.js Using React PDF Viewer?

Suman Sourabh — Sun, 02 Jun 2024 19:20:02 +0000

This blog talks about how you can display a PDF file in your Next.js app.

Prerequisites

1. Create a Next.js project with the following command

npx create-next-app@latest

Follow the instructions and a new Next.js project will be created.

2. Run the Next.js project

Type the following command on the terminal.

npm run dev

Open a web browser like Chrome, and go to http://localhost:3000. You will see your new Next.js project running.

Now, we will use the React PDF viewer component to display the PDF file on the page.

You can refer this documentation to get started: Getting started — React PDF Viewer

Steps to use React PDF Viewer:

1. Install a few packages

npm install pdfjs-dist@3.4.120
npm install @react-pdf-viewer/core@3.12.0

2. Copy the original code

Go to this page and paste the code on page.js inside the project.

import { Viewer, Worker } from "@react-pdf-viewer/core";

export default function Home() {
  return (
    <main>
      <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.15.349/build/pdf.worker.js">
        <div>
          <Viewer fileUrl="./sample-pdf-file.pdf" />
        </div>
      </Worker>
    </main>
  );
}

3. Run the project

Most likely, you will encounter an error.

This is a pretty common error in Next.js about the usage of client components.

Basically, it just says that React PDF Viewer component uses some code that can only work on client components and not the server components.

4. Fix the server error

What you have to do is just type “use client” on top of your page.

Now, the overall code becomes this

5. Run the project again

Now you will encounter another error.

This error comes when there is a mismatch in the versions of the worker and the pdfjs-dist package.

To fix this, just change the version of pdfjs-dist inside the workerUrl to 3.4.120.

<Worker workerUrl="https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.js">

If you run now, you will see the PDF being displayed on the page.

But hold on! There’s something weird.

Look at the right side of the page, there’s a black background which looks odd.

6. Copy styles

To make the styling correct, copy and paste the styles from this page

// Import the styles provided by the react-pdf-viewer packages
import "@react-pdf-viewer/default-layout/lib/styles/index.css";
import "@react-pdf-viewer/core/lib/styles/index.css";

Now, you will encounter another error:

Module not found: Error: Can't resolve '@react-pdf-viewer/default-layout/lib/styles/index.css'

To resolve this, install this package:

npm install @react-pdf-viewer/default-layout

Now, final dependencies are

7. Run the project for the final time

Upon running the project now, the PDF will be displayed on the full page.

Final code

"use client";
import { Viewer, Worker } from "@react-pdf-viewer/core";
import "@react-pdf-viewer/default-layout/lib/styles/index.css";
import "@react-pdf-viewer/core/lib/styles/index.css";

export default function Home() {
  return (
    <main>
      <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.js">
        <div>
          <Viewer fileUrl="./sample-pdf-file.pdf" />
        </div>
      </Worker>
    </main>
  );
}

Conclusion

In this blog post, we saw how you can display a PDF previewer on a page in Nextjs application.

DEV Community: Suman Sourabh

Introducing Ready - Your Own PDF Reader & Library

What I Built

Capabilities/Features

Tech used

Demo

My Code

Sumansourabh14 / ready

Kindle Clone

Ready

Why?

Capabilities/Features

Screenshots

Upload PDF page

Edit PDF page

Login page

Library page - Grid view (User not logged in)

Library page - List view (User not logged in)

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

Wishlist page - When there are no wish list items

Read PDF page

More Details

1. Upload PDF Document with Pinata

uploadFile function

Fetch the API key from Pinata

Use the API key to upload file to Pinata

Get the file URL to store in the database

2. Upload Image with Pinata

Conclusion

Glam Up My Markup: Cricket League!

What I Built

Demo

Journey

2024 Guide to Infinite Scrolling in React/Next.js

What is Infinite Scrolling?

How to use it in React/Next.js?

Understanding the Scenario

Steps to Implement react-infinite-scroll-component

Install the package

Understanding the props

Further Steps:

Final code:

Breakdown of the code

Working of InfiniteScrollcomponent

Conclusion

Wondering what is Libertas?

How to Display a PDF in Next.js Using React PDF Viewer?

Prerequisites

1. Create a Next.js project with the following command

2. Run the Next.js project

Steps to use React PDF Viewer:

1. Install a few packages

2. Copy the original code

3. Run the project

4. Fix the server error

5. Run the project again

6. Copy styles

7. Run the project for the final time

Final code

Conclusion

Read more:

`uploadFile` function

Steps to Implement `react-infinite-scroll-component`

Working of `InfiniteScroll`component