Visit Page Picker at https://page-picker.vercel.app/

For running locally, go to the bottom of this page

While opening the page, the site will be redirected to clerk authentication

After succesfull login , click on the plus icon, a modal will openup to upload the pdf.Only pdf files will be able to upload. Implemented front end and backend validation.

After uploading the pdf, 1st page of the pdf is extracted and a thumbnail image is created. This image will be displayed instead of loading all the pdf files of the user.

When clicking on the thumbnail, another page will be opened and this page displays all pages of the pdf. Here we can extract and rearrange the pdf by ##drag and dropping.

Only selected pages will be extracted and the new pdf will be in the order how it is arranged by drag and dropping. Click on the rearrange or extract button to generate the download link.You have to select atleast one page to generate the downaload link.

Then a download button will come near the extract page button.

When clicking on the download button. The new pdf will be opened in the new tab and it will ask the permission to choose the download location.

Running the Application Locally:

1. Clone the Repositories

• Page Picker Repository
• Page Picker Server Repository

2. Set Up Environment Variables

For Page Picker:

1. Go to the Clerk website: Clerk. Create an application and copy the two API keys:
   • NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
   • CLERK_SECRET_KEY
2. Add the following common environment variables:

   • NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in

   • NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

   • NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/

   • NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

   • NEXT_PUBLIC_SERVER_BASEURL=http://localhost:8080 (Backend localhost address)

     Do npm install and npm run dev

For Page-Picker-Server

• PORT=8080

• MONGO_URL: //Add your mongodb atlas url

• SERVER_URL: http://localhost:8080

  Do npm install and npm start

Scope of improvements for the app:

• Add debouncing for the backend api's
• Lazy loading
• Uploading the pdf's to other servers like s3 bucket
• Creating a seperate page to view the modified documents
• If not create a cron to delete the modified documents from the server

If any queries, feel free to reachout me on vaishnavrajendran95@gmail.com or https://www.linkedin.com/in/vaishnav-r-b7b933195/