You are tasked with building a comprehensive, fully functional Next.js MVP application named 'AppInsight Hub'. This application will allow developers and tech enthusiasts to analyze the technical architecture, technologies used, API interactions, and potential security vulnerabilities of any given web or mobile application. The core value proposition is to provide transparency and insights into the digital products surrounding us, fostering better development practices and informed decision-making.
PROJECT OVERVIEW:
AppInsight Hub aims to demystify the technology stack and inner workings of applications. By inputting a URL or application name, users will receive detailed reports on detected technologies, API endpoints, data flows, and basic security assessments. This addresses the growing need for understanding the technical landscape of software in a clear and accessible manner, inspired by the curiosity sparked by decompiling complex applications like the White House's.
TECH STACK:
- Framework: Next.js (App Router)
- UI Library: shadcn/ui (for modern, accessible components)
- Styling: Tailwind CSS
- Database: Drizzle ORM with PostgreSQL (or any other compatible Drizzle driver like SQLite for easier local setup/MVP)
- Authentication: NextAuth.js (for robust user authentication)
- State Management: React Context API or Zustand for global state, component-local state where appropriate.
- Data Fetching: Server Actions and Route Handlers in Next.js, SWR or React Query for client-side caching if needed.
- Other Packages: `zod` for schema validation, `clsx` for conditional class names, potentially libraries for web scraping/analysis (e.g., `axios`, `cheerio` or external API integrations).
DATABASE SCHEMA (Drizzle ORM - PostgreSQL example):
1. `users` table:
- `id`: uuid (primary key, default: uuid generated)
- `name`: text
- `email`: text (unique)
- `emailVerified`: timestamp
- `image`: text
- `createdAt`: timestamp (default: now())
- `updatedAt`: timestamp (default: now())
2. `analysisRequests` table:
- `id`: uuid (primary key, default: uuid generated)
- `userId`: uuid (foreign key to users.id, nullable if public analysis is allowed)
- `targetUrl`: text (unique, the URL/app to analyze)
- `status`: enum ('pending', 'processing', 'completed', 'failed') (default: 'pending')
- `createdAt`: timestamp (default: now())
- `completedAt`: timestamp (nullable)
3. `analysisResults` table:
- `id`: uuid (primary key, default: uuid generated)
- `requestId`: uuid (foreign key to analysisRequests.id, unique)
- `detectedTechnologies`: jsonb (e.g., `[{ name: 'React', version: '18.2.0', category: 'Frontend Framework' }]`)
- `apiEndpoints`: jsonb (e.g., `[{ path: '/api/users', method: 'GET', description: 'Get user list' }]`)
- `securityVulnerabilities`: jsonb (e.g., `[{ id: 'CVE-2023-XXXX', severity: 'High', description: 'Insecure Direct Object Reference' }]`)
- `rawOutput`: text (optional, for detailed logs)
- `createdAt`: timestamp (default: now())
4. `comments` table:
- `id`: uuid (primary key, default: uuid generated)
- `requestId`: uuid (foreign key to analysisRequests.id)
- `userId`: uuid (foreign key to users.id)
- `content`: text
- `createdAt`: timestamp (default: now())
- `updatedAt`: timestamp (default: now())
5. `ratings` table:
- `id`: uuid (primary key, default: uuid generated)
- `requestId`: uuid (foreign key to analysisRequests.id)
- `userId`: uuid (foreign key to users.id)
- `score`: integer (1-5)
- `createdAt`: timestamp (default: now())
- `updatedAt`: timestamp (default: now())
CORE FEATURES & USER FLOW:
1. User Authentication:
- Flow: User lands on the homepage. Clicks 'Sign In/Sign Up'. Redirected to NextAuth.js sign-in page (e.g., using Google Provider). Upon successful authentication, redirected back to the dashboard.
- Edge Case: Handling sign-out, existing users, OAuth errors.
2. Create Analysis Request:
- Flow: Authenticated user navigates to the 'New Analysis' page. Enters a target URL (e.g., 'https://example.com') into an input field. Clicks 'Analyze'. A new record is created in `analysisRequests` with status 'pending'. The user is redirected to their dashboard showing the request in a 'Processing' state.
- Validation: URL format validation using Zod. Check if the URL has been analyzed recently to avoid redundant requests (implement rate limiting or duplicate checks).
- Backend: A background job (or Next.js background task runner if feasible for MVP) will pick up 'pending' requests.
3. Analysis Execution (Background Task - Conceptual):
- Trigger: When a request status is 'pending'.
- Steps:
a. Fetch the target URL content.
b. Use libraries like `cheerio` to parse HTML and identify meta tags, script sources, and common framework signatures.
c. Make network requests to common API paths (e.g., '/api', '/graphql') to identify API structures.
d. Integrate with external services (e.g., Wappalyzer API, SecurityTrails API) for more comprehensive technology detection and vulnerability scanning (ensure API keys are managed securely).
e. Parse the results into the predefined JSON structures for `detectedTechnologies`, `apiEndpoints`, and `securityVulnerabilities`.
f. Update the `analysisRequests` status to 'completed' or 'failed' and save results in `analysisResults`.
- Edge Cases: Network errors, timeouts, inaccessible URLs, CORS issues, identifying dynamic JS-loaded technologies.
4. View Analysis Results:
- Flow: User navigates to their dashboard. Clicks on a 'completed' analysis request. Redirected to the results page, displaying organized information from `analysisResults`.
- Components: Tabs or sections for Technologies, APIs, Security Vulnerabilities, Comments, Ratings.
- Edge Cases: Displaying empty states gracefully if a category has no data.
5. Add Comments & Ratings:
- Flow: On the results page, authenticated users can type a comment and submit it. They can also rate the analysis (1-5 stars). Data is saved to `comments` and `ratings` tables linked to the `requestId` and `userId`.
- Validation: Comment content length, rating range.
- Edge Cases: Users editing/deleting their comments (optional for MVP).
API & DATA FETCHING:
- Server Actions for form submissions (Create Request, Add Comment, Add Rating).
- Route Handlers for fetching data (e.g., GET /api/analysis/{id} to fetch results, GET /api/user/requests to fetch user's analysis history).
- Data will be fetched and passed directly to Server Components or Client Components as needed.
- Example API Route (Route Handler):
```javascript
// app/api/analysis/[id]/route.ts
import { db } from '@/lib/db'; // Your Drizzle connection
import { analysisResults } from '@/lib/db/schema';
import { eq } from 'drizzle-orm';
import { NextResponse } from 'next/server';
export async function GET(request: Request, { params }: { params: { id: string } }) {
try {
const result = await db.query.analysisResults.findFirst({
where: eq(analysisResults.requestId, params.id),
with: {
request: true // Optional: join request details
}
});
if (!result) {
return NextResponse.json({ error: 'Analysis not found' }, { status: 404 });
}
return NextResponse.json(result);
} catch (error) {
console.error('Error fetching analysis:', error);
return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
}
}
```
COMPONENT BREAKDOWN (Next.js App Router):
- `(marketing)/page.tsx`: Landing Page. Hero section, features overview, testimonials (mock), Call to Action (CTA) to sign up.
- `(marketing)/layout.tsx`: Marketing layout (simple header/footer).
- `(app)/layout.tsx`: Main application layout. Sidebar navigation (Dashboard, New Analysis, History), Header with user profile/logout.
- `(app)/dashboard/page.tsx`: User's dashboard. Lists recent analysis requests with status. Links to results.
- `(app)/analyze/page.tsx`: Page with the form to submit a new analysis request (target URL input).
- `(app)/analysis/[id]/page.tsx`: Displays the detailed results of a specific analysis. Includes sections for Technologies, APIs, Security, Comments, Ratings.
- `(app)/analysis/[id]/components/TechnologyTable.tsx`: Displays detected technologies.
- `(app)/analysis/[id]/components/ApiTable.tsx`: Displays API endpoints.
- `(app)/analysis/[id]/components/SecurityTable.tsx`: Displays security vulnerabilities.
- `(app)/analysis/[id]/components/CommentSection.tsx`: Displays and allows adding comments.
- `(app)/analysis/[id]/components/Rating.tsx`: Displays and allows adding/updating ratings.
- `components/ui/` (from shadcn/ui): Buttons, Input, Card, Table, Alert, Avatar, etc.
- `components/auth/SignInButton.tsx`, `components/auth/SignOutButton.tsx`: Buttons integrating with NextAuth.js.
- `components/common/Sidebar.tsx`, `components/common/Header.tsx`: Navigation components.
- `components/common/LoadingSpinner.tsx`: Global loading indicator.
- `lib/db.ts`: Drizzle ORM database connection setup.
- `lib/validators/analysis.ts`: Zod schemas for validation.
- `lib/actions/analysis.ts`: Server Actions for analysis requests.
- `lib/actions/comment.ts`: Server Actions for comments.
- `lib/actions/rating.ts`: Server Actions for ratings.
UI/UX DESIGN & VISUAL IDENTITY:
- Style: Minimalist Clean with a futuristic tech accent.
- Color Palette:
- Primary: Deep Blue (#1E3A8A)
- Secondary: Cyan (#06B6D4)
- Accent: Light Gray (#E5E7EB)
- Background: Dark Gray (#1F2937)
- Text: White (#FFFFFF) / Off-White (#F3F4F6)
- Typography:
- Headings: Inter (Semi-bold)
- Body: Inter (Regular)
- Layout: Clean, spacious layouts. Focus on readability and clear information hierarchy. Use cards for distinct sections. Sidebar for navigation, main content area.
- Animations:
- Subtle fade-ins for content loading.
- Smooth transitions for route changes.
- Hover effects on interactive elements (buttons, links, cards).
- Loading spinners or skeleton screens during data fetching.
- Responsive Rules: Mobile-first approach. Navigation collapses into a hamburger menu on smaller screens. Content reflows gracefully. Ensure tables are usable on mobile (e.g., horizontal scrolling or card-based display).
SAMPLE/MOCK DATA:
1. Mock Analysis Request (Dashboard):
```json
{
"id": "d4e5f6a7-b8c9-d0e1-f2a3-b4c5d6e7f8a9",
"targetUrl": "https://reactjs.org",
"status": "completed",
"createdAt": "2023-10-27T10:00:00Z"
}
```
2. Mock Technology Detection:
```json
[
{"name": "React", "version": "18.2.0", "category": "Frontend Framework"},
{"name": "Next.js", "version": "13.5.4", "category": "Fullstack Framework"},
{"name": "Tailwind CSS", "version": "3.3.0", "category": "CSS Framework"},
{"name": "Vercel", "version": null, "category": "Hosting"}
]
```
3. Mock API Endpoint:
```json
[
{"path": "/api/get-props", "method": "GET", "description": "Fetches initial page props"},
{"path": "/_next/static/chunks/pages/_app.js", "method": "GET", "description": "Next.js client-side bundle"}
]
```
4. Mock Security Vulnerability:
```json
[
{"id": "OWASP-Top10-2021-A03", "severity": "Medium", "description": "Server-Side Request Forgery (SSRF) potential in dynamic resource loading."}
]
```
5. Mock Comment:
```json
{
"id": "c1a2b3c4-d5e6-f7a8-b9c0-d1e2f3a4b5c6",
"userId": "a1b2c3d4-e5f6-7a8b-9c0d-1e2f3a4b5c6d",
"userName": "DevDude",
"content": "Interesting use of Webpack 5. Looks like they're using dynamic imports extensively.",
"createdAt": "2023-10-27T11:30:00Z"
}
```
6. Mock Rating:
```json
{
"averageScore": 4.5,
"totalRatings": 15
}
```
7. Another Analysis Result Example (Mobile App Focus - Conceptual):
```json
{
"detectedTechnologies": [
{"name": "React Native", "version": "0.72.4", "category": "Mobile Framework"},
{"name": "Firebase", "version": null, "category": "Backend-as-a-Service"}
],
"apiEndpoints": [
{"path": "https://your-backend.firebaseio.com/users.json", "method": "GET", "description": "Fetch user data from Firebase Realtime DB"}
],
"securityVulnerabilities": [
{"id": "MOBILE-MISC-001", "severity": "Low", "description": "Hardcoded API keys detected in client-side code (Firebase)"}
]
}
```
EDGE CASES:
- Authentication:
- Users logging out.
- Expired session tokens.
- Handling different OAuth provider errors.
- Authorization:
- Ensuring users can only view/manage their own analysis requests (unless public sharing is implemented).
- Data Validation:
- Input sanitization for URLs, comments.
- Ensuring data integrity between related tables.
- Error Handling:
- Graceful error display for failed analysis jobs.
- Generic server error messages for unexpected issues.
- Displaying specific API error messages returned from external services.
- Empty States:
- Dashboard shows a prompt to create an analysis if no requests exist.
- Results page shows 'No technologies detected' or 'No API endpoints found' messages.
- Comment section shows 'Be the first to comment'.
- Rate Limiting:
- On API endpoints to prevent abuse.
- Potentially on analysis requests per user to manage server load.
- Background Task Failures:
- Implementing retry mechanisms for analysis jobs.
- Logging failures for manual investigation.
- Frontend State Management:
- Handling loading states for all data fetching operations.
- Optimistic updates for actions like adding comments.
TURKISH TRANSLATIONS (Key UI Elements):
- App Title: AppInsight Hub
- Sign In: Giriş Yap
- Sign Up: Kayıt Ol
- Sign Out: Çıkış Yap
- Dashboard: Kontrol Paneli
- New Analysis: Yeni Analiz
- Analysis History: Analiz Geçmişi
- Enter URL: URL Girin
- Analyze: Analiz Et
- Processing: İşleniyor...
- Completed: Tamamlandı
- Failed: Başarısız Oldu
- Technologies: Teknolojiler
- API Endpoints: API Uç Noktaları
- Security Vulnerabilities: Güvenlik Açıkları
- Comments: Yorumlar
- Add Comment: Yorum Ekle
- Submit: Gönder
- Rating: Değerlendirme
- Rate this analysis: Bu analizi değerlendirin
- No data available: Veri bulunamadı
- Something went wrong: Bir şeyler yanlış gitti
- Try again: Tekrar Dene
- Target URL: Hedef URL
- Analysis Results for: ... Analiz Sonuçları
- Created at: Oluşturulma Tarihi
- Search...: Ara...
- Filter by status: Duruma göre filtrele