{"id":30046663,"url":"https://github.com/codewithdhruba01/pdf-generatorwebapp","last_synced_at":"2026-04-16T18:04:34.834Z","repository":{"id":307933828,"uuid":"1030922389","full_name":"codewithdhruba01/PDF-GeneratorWebApp","owner":"codewithdhruba01","description":"A modern, responsive PDF Generator application built with React and TypeScript that allows users to input their personal details through a beautiful form interface and generate professional PDF documents.","archived":false,"fork":false,"pushed_at":"2025-08-03T04:28:35.000Z","size":11,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-03T06:21:28.079Z","etag":null,"topics":["nextjs","react","typescript"],"latest_commit_sha":null,"homepage":"https://pdf-generator-webapp.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codewithdhruba01.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-02T16:10:44.000Z","updated_at":"2025-08-03T04:29:08.000Z","dependencies_parsed_at":"2025-08-03T06:21:31.227Z","dependency_job_id":"28a71e41-ec51-4c07-a2cc-880aea7ed00e","html_url":"https://github.com/codewithdhruba01/PDF-GeneratorWebApp","commit_stats":null,"previous_names":["codewithdhruba01/pdf-generatorwebapp"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/codewithdhruba01/PDF-GeneratorWebApp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithdhruba01%2FPDF-GeneratorWebApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithdhruba01%2FPDF-GeneratorWebApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithdhruba01%2FPDF-GeneratorWebApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithdhruba01%2FPDF-GeneratorWebApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codewithdhruba01","download_url":"https://codeload.github.com/codewithdhruba01/PDF-GeneratorWebApp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithdhruba01%2FPDF-GeneratorWebApp/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269227149,"owners_count":24381829,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-07T02:00:09.698Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","react","typescript"],"created_at":"2025-08-07T08:47:32.269Z","updated_at":"2026-04-16T18:04:34.828Z","avatar_url":"https://github.com/codewithdhruba01.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PDF Generator App\n\nThis PDF Generator App provides a seamless two-screen experience for collecting user information and generating downloadable PDF documents. The application features a clean, professional interface with form validation and real-time PDF preview capabilities.\n\n### Key Features\n\n- **Interactive Form Interface**: Clean, user-friendly form with proper validation\n- **Real-time Validation**: Instant feedback for required fields and format validation\n- **PDF Preview**: Live preview of how the PDF will look before downloading\n- **Direct Download**: Option to download PDF directly from the form or preview screen\n- **Data Persistence**: Form data is preserved when navigating between screens\n- **Responsive Design**: Works seamlessly across desktop, tablet, and mobile devices\n- **Professional PDF Layout**: Clean, formatted PDF output with proper styling\n\n#### Screen 1: Form Page\n- Collects user information through validated input fields\n- Required fields: Name, Email, Phone Number\n- Optional fields: Position, Description\n- Two action buttons: \"View PDF\" and \"Download PDF\"\n\n#### Screen 2: PDF Preview Page\n- Displays entered information in a clean, PDF-style layout\n- Shows exactly how the final PDF will appear\n- Navigation options: \"Back\" to form and \"Download PDF\"\n\n## 🛠️ Tech Stack\n\n### Frontend\n- **React 18** - Modern React with hooks and functional components\n- **TypeScript** - Type-safe development with enhanced IDE support\n- **Vite** - Fast build tool and development server\n- **React Router DOM** - Client-side routing for navigation\n- **React Hook Form** - Efficient form handling with validation\n\n### Styling \u0026 UI\n- **Tailwind CSS** - Utility-first CSS framework for rapid styling\n- **Lucide React** - Beautiful, customizable icons\n\n### PDF Generation\n- **jsPDF** - Client-side PDF generation library\n\n### Development Tools\n- **ESLint** - Code linting and quality assurance\n- **PostCSS** - CSS processing with Autoprefixer\n- **TypeScript ESLint** - TypeScript-specific linting rules\n\n\n### Using the Application\n\n1. **Fill the Form**\n   - Enter your personal details in the form\n   - Required fields are marked with asterisks (*)\n   - Form validation will guide you through any errors\n\n2. **Preview PDF**\n   - Click \"View PDF\" to see how your PDF will look\n   - Review all information in the preview screen\n\n3. **Download PDF**\n   - Click \"Download PDF\" from either the form or preview screen\n   - PDF will be automatically downloaded to your device\n\n### Project Structure\n\n```\nsrc/\n├── components/          # React components\n│   ├── FormScreen.tsx   # Main form interface\n│   └── PreviewScreen.tsx # PDF preview screen\n├── types/              # TypeScript type definitions\n│   └── user.ts         # User data interfaces\n├── utils/              # Utility functions\n│   ├── validation.ts   # Form validation logic\n│   └── pdfGenerator.ts # PDF generation utilities\n├── App.tsx             # Main application component\n├── main.tsx           # Application entry point\n└── index.css          # Global styles\n```\n\n## 📦 Installation\n\n### Prerequisites\n- Node.js (version 16 or higher)\n- npm or yarn package manager\n\n### Steps\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/codewithdhruba01/PDF-GeneratorWebApp.git\n   cd PDF-GeneratorWebApp\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Start the development server**\n   ```bash\n   npm run dev\n   ```\n\n4. **Open your browser**\n   Navigate to `http://localhost:5173` to view the application\n   \n\n### Running the Application\n\n1. **Start Development Server**\n   ```bash\n   npm run dev\n   ```\n   The application will be available at `http://localhost:5173`\n\n2. **Build for Production**\n   ```bash\n   npm run build\n   ```\n   Creates an optimized production build in the `dist` folder\n\n3. **Preview Production Build**\n   ```bash\n   npm run preview\n   ```\n   Serves the production build locally for testing\n\n   ---\n\n## 📄 License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n---\n\n\u003ch4 align=\"center\"\u003e⭐ If you find this project useful, please give it a star!\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://codewithdhruba.netlify.app/\"\u003ePortfolios\u003c/a\u003e -\n  \u003ca href=\"https://www.linkedin.com/in/dhrubaraj-pati/\"\u003eLinkedIn\u003c/a\u003e - \n  \u003ca href=\"https://www.instagram.com/dhrubaraj_pati/\"\u003eInstagram\u003c/a\u003e -\n  \u003ca href=\"https://www.linkedin.com/in/dhrubaraj-pati/\"\u003eContact me.\u003c/a\u003e \n\u003c/p\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithdhruba01%2Fpdf-generatorwebapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithdhruba01%2Fpdf-generatorwebapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithdhruba01%2Fpdf-generatorwebapp/lists"}