Remix

Make your own version of Vishva’s Research Library

Get an exact, working copy in your account, then change anything with chat.

Original by itachi

What would you change?

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

Build a full-stack React web application called "VISHVA'S RESEARCH" — an interactive, 3D digital library for research papers.

CRITICAL INSTRUCTION: DO NOT ASK ME ANY QUESTIONS. Do not pause for confirmation. Automatically accept all defaults, and build the complete, bug-free website in one go.

PART 1: TECH STACK & LIBRARIES
- Frontend: React, Tailwind CSS, and TypeScript.
- Backend: Node.js and Express (to securely handle Google Sheets and image uploads).
- Database: Use the `google-spreadsheet` library to connect to a Google Sheet for the database.
- Image Storage: Use `Cloudinary` or `ImgBB` API to store the generated images (since Google Sheets cannot store image files).
- Install and use `pdf-parse` (for PDFs) and `mammoth` (for Word docs).
- Install and use `react-pageflip` and `StPageFlip` for the realistic 3D book effect.
- Database Schema (in Google Sheet): Columns: id, title, content, image_urls, pdf_url, created_at.
- Auth: Use JWT (JSON Web Tokens) or a simple hardcoded backend check for the admin.

PART 2: ADMIN AUTHENTICATION (HARDCODED)
- Protected route at `/admin`.
- Hardcode the admin credentials in the backend:
  - Email: vishvaanbajagane@gmail.com
  - Password: vishvaresearch
- If not authenticated, redirect unauthorized users to the login page.

PART 3: GLOBAL UI/UX THEME (ACADEMIC & PREMIUM)
1. Midnight Navy (#14263D): Navbar, footer, headings, primary buttons.
2. Ivory Paper (#F6F1E7): Main background.
3. Academic Gold (#C6A15B): Accents, active links.
4. Pure White (#FFFFFF): Cards, forms.
5. Slate Grey (#374151): Body text.

PART 4: THE 3D FLIPPING BOOK (CRITICAL - MUST USE react-pageflip & StPageFlip)
- The homepage (`/`) must show a 3D book cover. Clicking it opens the book.
- Use `import HTMLFlipBook from 'react-pageflip';` and `import { PageFlip } from 'StPageFlip';`.
- Parent container MUST have a fixed height (e.g., `h-[600px] w-full flex justify-center items-center`).
- Use EXACT props for `<HTMLFlipBook>`: `width={400}` `height={600}` `size="stretch"` `minWidth={315}` `maxWidth={1000}` `minHeight={400}` `maxHeight={1533}` `maxShadowOpacity={0.5}` `showCover={true}` `mobileScrollSupport={true}` `usePortrait={true}`.
- NO buttons. User flips by dragging corners or swiping on mobile.
- Desktop: two pages side-by-side. Mobile: one page at a time.

PART 5: AUTOMATED EXTRACTION & VISUAL GENERATION (NO SUMMARIZING)
- The admin form ONLY has a file upload field (PDF or Word).
- Upon upload, the Node.js backend uses `pdf-parse` or `mammoth` to extract the raw text exactly as written.
- Split the text into paragraphs.
- For EACH paragraph, generate an image using the Pollinations AI API (`https://image.pollinations.ai/prompt/{encoded_prompt}`), fetch the image, and upload it to Cloudinary/ImgBB to get a permanent URL.
- Save the title, paragraphs, and image URLs as a new row in the Google Sheet.
- Return the new data to the frontend to instantly add the page to the book.

PART 6: BOOK CONTENT DESIGN
- The first page is a hard cover (Midnight Navy background, Academic Gold text).
- Fetch the rows from the Google Sheet and map through them inside the `<HTMLFlipBook>`.
- Inside pages: Ivory Paper background (`#F6F1E7`), styled with: `background: linear-gradient(to right, #e8e2d5 0%, #F6F1E7 5%, #F6F1E7 95%, #e8e2d5 100%); box-shadow: inset 0 0 30px rgba(0,0,0,0.1);`
- Display the actual paragraphs and the respective generated images.

PART 7: FINAL OUTPUT
- 100% mobile-responsive.
- Set up React Router for `/` and `/admin`.
- Prepare project settings for a custom domain connection (e.g., "vishvaresearch.com").

PART 8: INITIAL PDF ATTACHMENT
- I have attached a PDF file to this prompt. You MUST use this attached PDF as the initial research paper. 
- Parse this PDF, extract the text, generate images, and automatically add this as the first row in the Google Sheet so the book is not empty.

Remember: DO NOT ASK ANY QUESTIONS. Build the entire app now.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.