PROJECT OVERVIEW:
Develop a robust Next.js MVP application called 'Venture Insight'. This application aims to provide actionable intelligence for entrepreneurs, investors, and industry analysts by analyzing significant events within the startup ecosystem, particularly focusing on news from platforms like Hacker News. The core problem it solves is the difficulty in quickly assessing the potential risks and implications of events such as a company being removed from Y Combinator, major funding rounds, or significant product failures. Venture Insight will offer a data-driven platform that aggregates, analyzes, and visualizes these events, providing users with risk scores, trend analysis, and personalized watchlists to make more informed decisions.
CORE VALUE PROPOSITION: Empower users to proactively identify and mitigate risks in the startup landscape through timely, data-driven insights and trend analysis.
TECH STACK:
- Frontend Framework: Next.js (App Router)
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- ORM: Drizzle ORM (PostgreSQL compatible)
- Authentication: NextAuth.js (or Lucia Auth for flexibility)
- Database: PostgreSQL (via Neon, Supabase, or self-hosted)
- State Management: React Context API / Zustand (for global state)
- Data Fetching: React Server Components (RSC), Server Actions, Client Components with SWR/React Query
- API Layer: Next.js API Routes or RSC Fetch
- Deployment: Vercel (recommended for Next.js)
- Other Packages: `clsx`, `tailwind-merge`, `date-fns`, charting library (e.g., Recharts or Chart.js), potentially a notification service integration (e.g., Resend).
DATABASE SCHEMA:
1. `users` table:
- `id` (UUID, primary key)
- `name` (VARCHAR)
- `email` (VARCHAR, unique)
- `emailVerified` (TIMESTAMP)
- `image` (VARCHAR, optional)
- `createdAt` (TIMESTAMP, default now())
- `updatedAt` (TIMESTAMP, default now())
2. `accounts` table (for NextAuth.js):
- `id` (BIGSERIAL, primary key)
- `userId` (UUID, foreign key to users.id)
- `type` (VARCHAR, e.g., 'oauth', 'email')
- `provider` (VARCHAR)
- `providerAccountId` (VARCHAR)
- `refresh_token` (TEXT, optional)
- `access_token` (TEXT, optional)
- `expires_at` (BIGINT, optional)
- `token_type` (VARCHAR, optional)
- `scope` (VARCHAR, optional)
- `id_token` (TEXT, optional)
- `session_state` (VARCHAR, optional)
3. `sessions` table (for NextAuth.js):
- `id` (BIGSERIAL, primary key)
- `sessionToken` (VARCHAR, unique)
- `userId` (UUID, foreign key to users.id)
- `expires` (TIMESTAMP)
4. `verificationTokens` table (for NextAuth.js):
- `identifier` (VARCHAR, unique)
- `token` (VARCHAR, unique)
- `expires` (TIMESTAMP)
5. `companies` table:
- `id` (UUID, primary key, default gen_random_uuid())
- `name` (VARCHAR, unique, indexed)
- `slug` (VARCHAR, unique, indexed)
- `website` (VARCHAR, optional)
- `logoUrl` (VARCHAR, optional)
- `description` (TEXT, optional)
- `foundedYear` (INTEGER, optional)
- `industry` (VARCHAR, optional)
- `country` (VARCHAR, optional)
- `crunchbaseUrl` (VARCHAR, optional)
- `linkedinUrl` (VARCHAR, optional)
- `createdAt` (TIMESTAMP, default now())
- `updatedAt` (TIMESTAMP, default now())
6. `news_items` table:
- `id` (UUID, primary key, default gen_random_uuid())
- `companyId` (UUID, foreign key to companies.id, nullable, indexed)
- `source` (VARCHAR, e.g., 'Hacker News', 'TechCrunch', 'Company Blog')
- `sourceUrl` (VARCHAR, unique)
- `title` (TEXT)
- `contentSummary` (TEXT, optional)
- `publishedAt` (TIMESTAMP, indexed)
- `sentiment` (VARCHAR, optional, e.g., 'positive', 'negative', 'neutral')
- `riskScore` (INTEGER, optional, 0-100)
- `tags` (TEXT[], optional, e.g., ['YC', 'Funding Fail', 'Layoffs'])
- `externalId` (VARCHAR, optional, for source tracking, e.g., HN item ID)
- `createdAt` (TIMESTAMP, default now())
- `updatedAt` (TIMESTAMP, default now())
7. `user_watchlists` table:
- `userId` (UUID, foreign key to users.id)
- `companyId` (UUID, foreign key to companies.id)
- `addedAt` (TIMESTAMP, default now())
- `PRIMARY KEY (userId, companyId)`
8. `user_preferences` table:
- `userId` (UUID, foreign key to users.id, primary key)
- `emailNotificationsEnabled` (BOOLEAN, default true)
- `preferredSources` (TEXT[], optional)
- `createdAt` (TIMESTAMP, default now())
- `updatedAt` (TIMESTAMP, default now())
CORE FEATURES & USER FLOW:
1. **User Authentication (Sign Up / Sign In):
* **Flow:** User lands on the homepage. Clicks 'Sign Up' or 'Sign In'. Redirected to Auth page (using NextAuth.js providers like Google, GitHub, Email/Password).
* **MVP Auth:** Email/Password and OAuth (Google).
* **Components:** Auth Form (email, password, confirm password fields, submit button), OAuth buttons.
* **Edge Cases:** Invalid credentials, email already exists, password reset flow (for email/password).
* **Turkish Translations:** 'Kayıt Ol' (Sign Up), 'Giriş Yap' (Sign In), 'E-posta', 'Şifre', 'Şifremi Unuttum' (Forgot Password).
2. **News Aggregation & Processing:
* **Flow:** A scheduled background job (or a webhook triggered by a source API) fetches new articles from defined sources (e.g., Hacker News API, RSS feeds).
* **Processing:** Each article is processed: company names are extracted using NLP (or simple regex for MVP). If a company exists, associate the news item; otherwise, create a new `companies` entry (potentially requiring manual review for accuracy).
* **Analysis:** Sentiment analysis (basic keywords like 'removed', 'failed', 'acquired', 'funded' can trigger initial flags) and risk scoring (based on keywords, source reputation, event type) are performed.
* **Backend Logic:** Server-side cron job or a queue system. Server Actions for processing.
* **Edge Cases:** Unstructured data, ambiguous company names, unavailable sources.
3. **Dashboard - News Feed & Analysis:
* **Flow:** Authenticated user navigates to the Dashboard. Server Component fetches the latest news items, potentially filtered by user preferences or watchlist.
* **Display:** News items are displayed in a feed. Each item shows title, source, published date, company name (linked), sentiment indicator (e.g., color-coded icon), and risk score.
* **Components:** `DashboardPage` (Server Component), `NewsFeed` (Client or Server Component), `NewsItemCard` (Client Component).
* **Interactivity:** Clicking a `NewsItemCard` expands to show a summary, source link, and potentially related news. Option to 'Add to Watchlist'.
* **Turkish Translations:** 'Kontrol Paneli' (Dashboard), 'Son Haberler' (Latest News), 'Risk Skoru' (Risk Score), 'İzleme Listesine Ekle' (Add to Watchlist).
4. **Company Watchlist:
* **Flow:** User navigates to the 'Watchlist' page. A Server Component fetches companies associated with the logged-in user via the `user_watchlists` table.
* **Display:** A list or grid of followed companies. Each entry shows company name, logo, and recent news items/alerts related to that company.
* **Components:** `WatchlistPage` (Server Component), `CompanyListItem` (Client Component).
* **Interactivity:** Ability to remove companies from the watchlist. Clicking a company name navigates to a dedicated Company Detail page.
* **Turkish Translations:** 'İzleme Listem' (My Watchlist), 'Şirket Adı' (Company Name).
5. **Company Detail Page:
* **Flow:** User clicks on a company name from the Dashboard or Watchlist. A Server Component fetches detailed information about the company and its associated news items.
* **Display:** Company details (name, website, description, industry), followed by a chronological feed of news items specifically for this company, including sentiment and risk scores.
* **Components:** `CompanyDetailPage` (Server Component), `CompanyProfileCard` (Client Component), `CompanyNewsFeed` (Client Component).
* **Turkish Translations:** 'Şirket Detayları' (Company Details).
API & DATA FETCHING:
- Use React Server Components (RSC) for data fetching on pages like Dashboard, Watchlist, and Company Detail where possible to leverage server-side rendering and reduce client-side JavaScript.
- Utilize Server Actions for mutations (e.g., adding to watchlist, updating user preferences).
- For dynamic data or real-time updates within client components, use libraries like SWR or React Query, fetching data from dedicated API Routes (e.g., `/api/companies/[slug]/news`) or directly from RSCs if applicable.
- Example API Route (`/api/companies/[slug]/news`):
- Method: GET
- Query Params: `limit`, `offset`, `sortBy`
- Success Response (200 OK):
```json
{
"company": { "id": "uuid", "name": "Example Corp", "website": "..." },
"newsItems": [
{ "id": "uuid", "title": "Example Corp Removed from YC", "publishedAt": "2023-10-27T10:00:00Z", "source": "Hacker News", "riskScore": 85, "sentiment": "negative" },
// ... more news items
],
"totalItems": 50
}
```
- Error Response (404 Not Found, 500 Internal Server Error):
```json
{
"error": "Company not found" or "Internal Server Error"
}
```
- Data Fetching in RSC (Dashboard Example):
```jsx
// app/dashboard/page.tsx (Server Component)
import { db } from '@/lib/db'; // Drizzle DB connection
import { newsItems, companies } from '@/lib/db/schema';
import { eq } from 'drizzle-orm';
import { NewsFeed } from './NewsFeed'; // Client Component
async function getDashboardNews() {
// Fetch from DB using Drizzle
const recentNews = await db.query.newsItems.findMany({
with: { company: true },
orderBy: [desc(newsItems.publishedAt)],
limit: 20
});
return recentNews;
}
export default async function DashboardPage() {
const newsData = await getDashboardNews();
return (
<div>
<h1>Dashboard</h1>
<NewsFeed initialData={newsData} />
</div>
);
}
```
COMPONENT BREAKDOWN:
- **Pages (App Router Structure):**
- `(app)/layout.tsx`: Root layout, includes header, footer, global styles.
- `(app)/page.tsx`: Landing Page (Public).
- `(app)/auth/page.tsx`: Sign In / Sign Up form.
- `(app)/dashboard/page.tsx`: Main dashboard view (protected).
- `(app)/dashboard/loading.tsx`: Loading UI for dashboard.
- `(app)/watchlist/page.tsx`: User's company watchlist (protected).
- `(app)/companies/[slug]/page.tsx`: Individual company detail page (protected).
- `(app)/settings/page.tsx`: User settings page (protected).
- `(app)/api/...`: API Routes (if needed for specific non-RSC data fetching).
- **UI Components (Client Components, typically):**
- `components/ui/button.tsx`: From shadcn/ui.
- `components/ui/card.tsx`: From shadcn/ui.
- `components/ui/input.tsx`: From shadcn/ui.
- `components/ui/spinner.tsx`: Custom or from shadcn/ui.
- `components/Header.tsx`: Navigation, logo, user profile dropdown.
- `components/Footer.tsx`: Basic footer links.
- `components/AuthForm.tsx`: Handles sign-in/sign-up logic.
- `components/NewsFeed.tsx`: Renders a list of `NewsItemCard`s. Manages pagination/infinite scroll.
- `components/NewsItemCard.tsx`: Displays a single news item summary. Includes 'Add to Watchlist' button/icon.
- `components/WatchlistCompanyItem.tsx`: Displays a company in the watchlist. Includes 'Remove' button.
- `components/CompanyProfileCard.tsx`: Shows company details.
- `components/ChartComponent.tsx`: Renders charts for trend analysis (e.g., risk score over time for a company).
- `components/forms/CompanySearchForm.tsx`: For searching companies to add to watchlist.
- `components/layout/AppLayout.tsx`: Wrapper for protected pages, applying common layout structure.
- **State Management:**
- Global state (e.g., user authentication status, theme) using Context API or Zustand.
- Local component state for forms, UI toggles using `useState`, `useReducer`.
- Server/Client data fetching state managed by SWR/React Query if used, or directly within RSCs.
UI/UX DESIGN & VISUAL IDENTITY:
- **Design Style:** Modern, Clean, Data-Focused.
- **Color Palette:**
- Primary: Deep Blue (`#1a202c` - Dark Slate)
- Secondary: Teal (`#4dc0b5` - Actionable, modern)
- Accent: Orange (`#f6ad55` - For alerts, highlights, risk indicators)
- Neutrals: Grays (`#e2e8f0` - Light Gray for backgrounds, borders; `#718096` - Medium Gray for text)
- Background: Off-white (`#f7fafc`)
- **Typography:** Inter (Sans-serif, highly readable for UI elements and data).
- Headings: Inter Bold (e.g., `font-bold text-2xl`)
- Body Text: Inter Regular (e.g., `text-base`)
- **Layout:**
- Sidebar navigation for authenticated users (Dashboard, Watchlist, Settings).
- Clean cards for news items and company profiles.
- Use of whitespace to avoid clutter.
- Responsive design: Mobile-first approach, adapting fluidly to tablet and desktop sizes using Tailwind's responsive modifiers (`sm:`, `md:`, `lg:`).
- **Visual Elements:** Subtle gradients on headers or buttons, smooth transitions on hover states, clean iconography.
ANIMATIONS:
- **Page Transitions:** Use `next/transition` or a similar library for smooth fade/slide transitions between pages (optional for MVP, but enhances UX).
- **Hover Effects:** Subtle scale or background color changes on interactive elements (buttons, links, cards).
- **Loading States:** Implement shimmer/skeleton loaders (`<ContentLoader>` or custom Tailwind spinners) for data fetching, especially on the dashboard and lists. Use Next.js `loading.tsx`.
- **Micro-interactions:** Animate 'Add to Watchlist' confirmations (e.g., a small checkmark animation).
EDGE CASES:
- **Empty States:** Design clear and helpful empty states for the Dashboard (if no news yet), Watchlist (if empty), and Search Results.
- **Authentication:** Secure routes, handle expired sessions, implement password reset flow.
- **Error Handling:** Graceful error messages for API failures, database errors, or data processing issues. Use `try...catch` blocks extensively. Display user-friendly messages, possibly with error codes for support.
- **Data Validation:** Validate all user inputs (forms) and API request payloads.
- **Rate Limiting:** Implement rate limiting on API routes if exposed publicly or heavily used to prevent abuse.
- **Unauthorized Access:** Redirect unauthenticated users to the login page from protected routes.
SAMPLE DATA:
1. **Company 1 (High Risk):**
* Name: 'QuantumLeap AI'
* Slug: 'quantumleap-ai'
* Industry: 'Artificial Intelligence'
* Country: 'USA'
* News Item 1: { title: 'QuantumLeap AI Shut Down Amidst Funding Scandal', source: 'TechCrunch', publishedAt: '2023-10-26T08:30:00Z', sentiment: 'negative', riskScore: 92, tags: ['YC', 'Shutdown', 'Fraud'] }
* News Item 2: { title: 'YC Issues Statement Regarding QuantumLeap AI', source: 'Hacker News', publishedAt: '2023-10-27T11:00:00Z', sentiment: 'neutral', riskScore: 88, tags: ['YC', 'Regulation'] }
2. **Company 2 (Moderate Risk/Transition):**
* Name: 'CodeCraft Solutions'
* Slug: 'codecraft-solutions'
* Industry: 'Developer Tools'
* Country: 'Canada'
* News Item 1: { title: 'CodeCraft Solutions Pivots to Enterprise Focus', source: 'Company Blog', publishedAt: '2023-10-20T14:00:00Z', sentiment: 'neutral', riskScore: 65, tags: ['Pivot', 'Enterprise'] }
* News Item 2: { title: 'CodeCraft Solutions Secures $5M Seed Round', source: 'VentureBeat', publishedAt: '2023-09-15T09:00:00Z', sentiment: 'positive', riskScore: 40, tags: ['Seed Round', 'Funding'] }
3. **Company 3 (Low Risk / Stable):**
* Name: 'HealthSync'
* Slug: 'healthsync'
* Industry: 'HealthTech'
* Country: 'Germany'
* News Item 1: { title: 'HealthSync Launches New Patient Portal Feature', source: 'TechCrunch', publishedAt: '2023-10-10T16:00:00Z', sentiment: 'positive', riskScore: 25, tags: ['New Feature', 'Product Update'] }
4. **General News Item (No Specific Company Match Initially):**
* Title: 'VC Funding Drops Sharply in Q3 2023'
* Source: 'Hacker News'
* PublishedAt: '2023-10-25T10:00:00Z'
* Sentiment: 'negative'
* RiskScore: 70
* Tags: ['Funding', 'Market Trend', 'VC']
5. **Example User Profile:**
* ID: 'a1b2c3d4-e5f6-7890-1234-567890abcdef'
* Name: 'Alex Johnson'
* Email: 'alex.j@example.com'
6. **Example Watchlist Entry:**
* userId: 'a1b2c3d4-e5f6-7890-1234-567890abcdef'
* companyId: (ID of 'CodeCraft Solutions')
* addedAt: '2023-10-27T12:00:00Z'
7. **Another Company (Future Data):**
* Name: 'GreenTech Innovations'
* Slug: 'greentech-innovations'
* Industry: 'Clean Energy'
* Country: 'UK'
8. **News Item for GreenTech:**
* Title: 'GreenTech Innovations Partners with Major Energy Firm'
* Source: 'Reuters'
* PublishedAt: '2023-11-01T09:00:00Z'
* Sentiment: 'positive'
* RiskScore: 35
* Tags: ['Partnership', 'Investment']
**TURKISH TRANSLATIONS:**
- Sign Up: Kayıt Ol
- Sign In: Giriş Yap
- Email: E-posta
- Password: Şifre
- Forgot Password: Şifremi Unuttum
- Dashboard: Kontrol Paneli
- Watchlist: İzleme Listem
- My Companies: Şirketlerim
- Company Name: Şirket Adı
- Source: Kaynak
- Published: Yayınlandı
- Risk Score: Risk Skoru
- Add to Watchlist: İzleme Listesine Ekle
- Remove from Watchlist: İzleme Listesinden Çıkar
- Settings: Ayarlar
- Logout: Çıkış Yap
- Search Companies: Şirket Ara
- No news items found: Hiç haber bulunamadı
- No companies in your watchlist: İzleme listenizde şirket yok
- Error: Hata
- Loading...: Yükleniyor...
- Save Changes: Değişiklikleri Kaydet
- Email Notifications: E-posta Bildirimleri
- Update Profile: Profili Güncelle
- Company Details: Şirket Detayları
- Website: Web Sitesi
- Industry: Sektör
- Country: Ülke
- Description: Açıklama
- All Rights Reserved: Tüm Hakları Saklıdır.
- Project Overview: Proje Genel Bakışı
- Tech Stack: Teknoloji Yığını
- Database Schema: Veritabanı Şeması
- Core Features: Temel Özellikler
- API & Data Fetching: API ve Veri Çekme
- UI/UX Design: UI/UX Tasarım
- Component Breakdown: Bileşen Dökümü
- Animations: Animasyonlar
- Edge Cases: Kenar Durumlar
- Sample Data: Örnek Veri
- Submit: Gönder
- Cancel: İptal
- Are you sure?: Emin misin?
- This action cannot be undone.: Bu işlem geri alınamaz.
- View Details: Detayları Gör
- No Results: Sonuç Yok
- Something went wrong: Bir şeyler yanlış gitti.