You are an expert full-stack web developer and UI/UX designer specializing in building data-driven, monetizable SaaS applications. You have a deep understanding of API integrations, user authentication, subscription management, and creating clean, professional user interfaces.

Project Goal: Build a professional, modern, and monetizable web application called "ScholarMetrics Pro" (or a similar name). The app allows users to input researcher names and Google Scholar IDs to extract detailed publication data, which is then enriched with journal information. This data is crucial for generating departmental quality reports.

Core Monetization Model: The application will operate on a 3-tier subscription model. The backend logic must enforce the limits of each plan.

Feature
Individual ($10/mo)
Department ($45/mo)
Enterprise ($499/mo)
Author Limit 3 per report 100 in a saved list Unlimited
Reports 5 per month Unlimited Unlimited
Core Features (All features below) (All features below) (All features below)
Support 📧 Email Support 💬 Priority Support 💬 Priority Support

Technical Stack: Use a modern Python stack. I recommend Flask or FastAPI for the backend, SQLAlchemy for the database, and Tailwind CSS for a clean, responsive frontend. The application will be hosted on Replit.

Detailed Feature & Workflow Breakdown
1. User Authentication & Dashboard:

Implement a secure user registration and login system (e.g., using Flask-Login).
Upon logging in, users should see a clean dashboard.
The dashboard must display their current subscription plan, usage limits (e.g., "2 of 5 reports used this month"), and a clear "Manage Subscription" link.
Department Plan users must have a dedicated section to "Manage Author List." This should allow them to add, edit, and delete up to 100 authors (Name + Google Scholar ID) which are saved to their account.
2. The Core Report Generation Workflow (Replicating the R Script Logic):
This is the heart of the application. The user flow should be:

Step 1: Input Authors:
Individual Plan: A simple form with 3 fields for Author Name and Google Scholar ID.
Department Plan: A pre-populated list of their saved authors with checkboxes to select which ones to include in the report.
Enterprise Plan: A bulk input option (e.g., text area or CSV upload) for unlimited authors.
Step 2: Filter by Year:
Implement an interactive, dual-handle year slider (e.g., from 1990 to current year) that allows users to select a publication date range. This is a critical feature.
Step 3: Data Processing (Backend Logic):
When the user clicks "Generate Report," the backend should:
a. Receive the list of selected author IDs and the year range.
b. Call the SerpApi Google Scholar Author endpoint for each author. You must handle pagination correctly to fetch all publications for each author, just like the R script's get_full_author_response function.
c. Cache results. To save on API costs, store the raw API responses for each author for at least 24 hours. If the same author is requested again within that time, serve the cached data instead of making a new API call.
d. Process the data. Transform the nested JSON into a flat structure, extracting: author_name, profile_id, interests, title, authors, publication, year, cited_by, etc.
e. Classify Article Type. Replicate the logic to infer "Meta-Analysis", "Review", "Case Report", or "Article" from the title.
f. Call the DOAJ API. For each unique journal title found, call the DOAJ API to get the publisher_country and journal_language. Replicate the error handling and rate limiting (Sys.sleep) from the R script.
g. Apply the year filter from the user's slider selection.
h. Store the final, processed data in the database, associated with the user's account.
Step 4: Preview and Monetization:
Once processing is complete, redirect the user to a results page.
Display a preview table with the first 5-10 rows of their final data. This is the "snippet" that proves the service works.
Clearly show the total number of records found.
Display a prominent "Download Full CSV" button.
CRITICAL: If the user is on a free trial or has not paid, clicking the download button should trigger the payment/subscription flow. If they are an active subscriber, the download should begin immediately.
3. UI/UX and Aesthetics:

Design Philosophy: Clean, professional, academic, and trustworthy. The aesthetic should appeal to university researchers and administrators.
Color Palette: Use a professional palette. I suggest a primary color of deep blue (#1e3a8a), white (#ffffff), and light gray (#f3f4f6) for backgrounds. Use a vibrant accent color like green (#10b981) for success states and CTAs.
Typography: Use a clean, highly-readable sans-serif font like 'Inter' or 'Roboto'.
User Experience:
Provide clear visual feedback for all actions (loading spinners, success messages, error notifications).
The report generation process can take time; show a progress bar or status updates (e.g., "Fetching data for Author 1 of 10...", "Enriching with journal data...").
The pricing page must be clear, concise, and highlight the value of each tier.
Ensure the design is fully responsive and works perfectly on desktop, tablet, and mobile devices.
4. Key Pages to Build:

Landing Page (with clear value proposition and call-to-action)
Pricing Page
User Login/Register Page
User Dashboard
Report Generation Page (with author input and year slider)
Results Preview Page
Final Instructions:
Build this application as a single, cohesive Replit project. Pay close attention to security, especially in handling API keys and user data. Your goal is to create a Minimum Viable Product (MVP) that is functional, beautiful, and effectively demonstrates the core business model. Prioritize a smooth user experience and a professional appearance above all else. Ask any clarifying questions before you begin coding.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Scholarmetrics Pro
-emoji: 💻
-colorFrom: red
-colorTo: yellow
+title: ScholarMetrics Pro 📊
+colorFrom: purple
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).
+      

dashboard.html

@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard - ScholarMetrics Pro</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+</head>
+<body class="bg-gray-50">
+    <nav class="bg-blue-800 text-white p-4 shadow-md">
+        <div class="container mx-auto flex justify-between items-center">
+            <a href="/" class="text-2xl font-bold">ScholarMetrics Pro 📊</a>
+            <div class="flex items-center space-x-4">
+                <span class="font-medium">Welcome, User</span>
+                <a href="#" class="hover:text-blue-200">
+                    <i data-feather="user"></i>
+                </a>
+                <a href="#" class="hover:text-blue-200">
+                    <i data-feather="log-out"></i>
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container mx-auto px-4 py-8">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <!-- Plan Info Card -->
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h2 class="text-xl font-bold text-blue-800">Your Plan</h2>
+                    <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Individual</span>
+                </div>
+                <div class="space-y-4">
+                    <div>
+                        <p class="text-gray-600">Reports this month</p>
+                        <div class="flex items-center justify-between">
+                            <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                <div class="bg-blue-600 h-2.5 rounded-full" style="width: 40%"></div>
+                            </div>
+                            <span class="ml-2 text-sm font-medium">2/5</span>
+                        </div>
+                    </div>
+                    <div>
+                        <p class="text-gray-600">Next billing date</p>
+                        <p class="font-medium">June 15, 2023</p>
+                    </div>
+                    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition">
+                        Manage Subscription
+                    </button>
+                </div>
+            </div>
+
+            <!-- Quick Actions -->
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <h2 class="text-xl font-bold text-blue-800 mb-4">Quick Actions</h2>
+                <div class="space-y-3">
+                    <a href="/new-report" class="flex items-center p-3 bg-green-50 hover:bg-green-100 rounded-md transition">
+                        <i data-feather="plus-circle" class="text-green-600 mr-3"></i>
+                        <span>Create New Report</span>
+                    </a>
+                    <a href="#" class="flex items-center p-3 bg-blue-50 hover:bg-blue-100 rounded-md transition">
+                        <i data-feather="file-text" class="text-blue-600 mr-3"></i>
+                        <span>View Previous Reports</span>
+                    </a>
+                    <a href="#" class="flex items-center p-3 bg-purple-50 hover:bg-purple-100 rounded-md transition">
+                        <i data-feather="help-circle" class="text-purple-600 mr-3"></i>
+                        <span>Help & Documentation</span>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Recent Activity -->
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <h2 class="text-xl font-bold text-blue-800 mb-4">Recent Activity</h2>
+                <div class="space-y-4">
+                    <div class="flex items-start">
+                        <div class="bg-blue-100 p-2 rounded-full mr-3">
+                            <i data-feather="file-text" class="text-blue-600" width="18"></i>
+                        </div>
+                        <div>
+                            <p class="font-medium">Report generated</p>
+                            <p class="text-sm text-gray-500">Smith et al. (2020-2023) • 2 minutes ago</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start">
+                        <div class="bg-green-100 p-2 rounded-full mr-3">
+                            <i data-feather="check-circle" class="text-green-600" width="18"></i>
+                        </div>
+                        <div>
+                            <p class="font-medium">Subscription updated</p>
+                            <p class="text-sm text-gray-500">Upgraded to Individual plan • 3 days ago</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Recent Reports Table -->
+        <div class="mt-8 bg-white rounded-lg shadow-md overflow-hidden">
+            <div class="p-6 border-b border-gray-200">
+                <h2 class="text-xl font-bold text-blue-800">Recent Reports</h2>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Report Name</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Authors</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date Range</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="font-medium text-blue-600">Department Review 2023</div>
+                                <div class="text-sm text-gray-500">Generated June 5, 2023</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="text-sm">3 authors</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="text-sm">2020 - 2023</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
+                                <a href="#" class="text-green-600 hover:text-green-900">Download</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="font-medium text-blue-600">Research Evaluation</div>
+                                <div class="text-sm text-gray-500">Generated May 28, 2023</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="text-sm">2 authors</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="text-sm">2018 - 2023</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
+                                <a href="#" class="text-green-600 hover:text-green-900">Download</a>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

index.html

@@ -1,19 +0,0 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>