Develop a web application named "XOXO" for viewing and editing PDF documents. The application should feature a minimal, responsive design with smooth animations and a user-friendly interface. Implement a neon pink or pastel pink dark theme for visual appeal.
Include two primary pages:
-
/home: This page serves as the main dashboard, displaying a list of all uploaded and edited PDF files. Each PDF entry should include the file name and options for 'Delete' and 'Download' accessible via a three-dot menu. Clicking on a PDF entry should navigate the user to the/editorpage, opening the selected PDF.- Implement an 'Add PDF' button that prompts the user to select a PDF file from their device. Upon selection, the PDF should be added to the list on the
/homepage.
- Implement an 'Add PDF' button that prompts the user to select a PDF file from their device. Upon selection, the PDF should be added to the list on the
-
/editor: This page should feature a PDF viewer and a set of editing tools. The top of the page should display the title of the currently open PDF. The editing tools should include:- Pen tool for freehand drawing.
- Text tool for adding text annotations.
- Eraser tool for removing annotations.
- Highlight tool for highlighting text.
- A button to add a new blank page to the PDF.
- A 'Save' or 'Download' button to save the edited PDF.
Ensure all editing tools function correctly and provide a seamless user experience. The application should be easy to navigate and responsive across different devices.
XOXO - PDF Viewer & Editor
I'll create a sleek PDF viewer and editor application with a neon pink dark theme, featuring responsive design and smooth animations.
I've created a sleek PDF viewer and editor application called "XOXO" with a neon pink dark theme. The application features:
Home Page (
/home):- A responsive list of uploaded PDF files
- Each PDF entry shows the file name and date added
- Three-dot menu with Download and Delete options
- "Add PDF" button with drag-and-drop functionality
Editor Page (
/editor):- PDF viewer with annotation capabilities
Toolbar with editing tools:
- Cursor/Select tool
- Pen tool with color selection
- Text annotation tool
- Eraser tool
- Highlighter with color selection
- Add page button
- Save button to preserve changes
Key Features:
- Smooth animations using Framer Motion
- Responsive design that works on mobile and desktop
- Neon pink dark theme with clean UI
- PDF storage using browser localStorage
- Interactive drawing and annotation tools
The application uses React PDF for rendering PDFs and includes a canvas-based annotation system for drawing and highlighting. All user interactions have appropriate feedback with toast notifications and smooth transitions.
fix error shown in image
I'll fix the routing error shown in the screenshot. The error indicates that there's no page component at the "/home" route, which is causing the application to fail.
I've fixed the routing error by:
- Replacing the redirect in
app/page.tsxwith the actual home page component that was previously inapp/home/page.tsx. This makes the root route/display the PDF manager directly. - Moved the original
app/home/page.tsxto a backup file to avoid conflicts. - Updated the navigation in
app/editor/page.tsxto redirect to the root route/instead of/homewhen users click the back button or when there's an error.
This change maintains all the functionality while fixing the routing structure to work properly with Next.js App Router. Now when you access the application, it will load the PDF manager at the root route instead of trying to redirect to a non-existent /home route.
fix error shown in image
