# PROJECT OVERVIEW
The application, tentatively named "C++ Standard Watch," is a comprehensive SaaS platform designed for C++ developers to track, understand, and engage with the evolution of the C++ programming language standards (C++26, C++29, etc.). It aims to solve the problem of fragmentation and difficulty in staying updated with the rapid advancements in C++ standards by providing curated news, detailed summaries of new features, technical reports, and a community discussion forum. The core value proposition is to empower C++ developers with timely and accurate information, enabling them to leverage the latest language features effectively in their projects and stay ahead of the curve.
# TECH STACK
* **Framework:** Next.js (App Router)
* **Language:** TypeScript
* **Styling:** Tailwind CSS
* **ORM:** Drizzle ORM (PostgreSQL compatible)
* **Database:** PostgreSQL (or any Drizzle-supported SQL database like SQLite for local dev)
* **UI Components:** shadcn/ui
* **Authentication:** NextAuth.js (with providers like GitHub, Google)
* **State Management:** React Context API / Zustand for global state, component-local state where appropriate.
* **Form Handling:** React Hook Form with Zod for validation.
* **Deployment:** Vercel / Docker
* **Other:** React Query for server state management, React Markdown for rendering markdown content, various animation libraries (e.g., Framer Motion for more advanced transitions, Tailwind CSS animations for simpler ones).
# DATABASE SCHEMA
**1. `users` Table:**
* `id` (UUID, Primary Key)
* `name` (VARCHAR, Nullable)
* `email` (VARCHAR, Unique, Not Null)
* `emailVerified` (TIMESTAMP, Nullable)
* `image` (VARCHAR, Nullable)
* `createdAt` (TIMESTAMP, Default: now())
* `updatedAt` (TIMESTAMP, Default: now())
* `role` (VARCHAR, Default: 'user') - e.g., 'user', 'pro', 'admin'
**2. `standards` Table:**
* `id` (UUID, Primary Key)
* `version` (VARCHAR, Unique, Not Null) - e.g., "C++26", "C++29"
* `status` (VARCHAR, Not Null) - e.g., "Draft", "CD", "DIS", "IS", "Published"
* `publicationDate` (DATE, Nullable)
* `summary` (TEXT, Nullable) - High-level overview of the standard.
* `createdAt` (TIMESTAMP, Default: now())
* `updatedAt` (TIMESTAMP, Default: now())
**3. `features` Table:**
* `id` (UUID, Primary Key)
* `standardId` (UUID, Foreign Key to `standards.id`, Not Null)
* `name` (VARCHAR, Not Null) - e.g., "Concepts", "Ranges", "Modules"
* `description` (TEXT, Not Null)
* `category` (VARCHAR, Not Null) - e.g., "Language", "Library", "Core Language", "Standard Library"
* `addedInVersion` (VARCHAR, Not Null) - The version where this feature was primarily introduced or significantly updated.
* `linkToDetails` (VARCHAR, Nullable) - Link to external documentation or deep-dive article.
* `createdAt` (TIMESTAMP, Default: now())
* `updatedAt` (TIMESTAMP, Default: now())
**4. `news` Table:**
* `id` (UUID, Primary Key)
* `title` (VARCHAR, Not Null)
* `slug` (VARCHAR, Unique, Not Null) - For URL routing.
* `content` (TEXT, Not Null) - Markdown formatted content.
* `authorId` (UUID, Foreign Key to `users.id`, Nullable) - If admin/editor adds news.
* `sourceUrl` (VARCHAR, Nullable) - Original source URL (e.g., Herb Sutter's blog, ISO C++ committee announcements).
* `publishedAt` (TIMESTAMP, Not Null)
* `createdAt` (TIMESTAMP, Default: now())
* `updatedAt` (TIMESTAMP, Default: now())
**5. `comments` Table:**
* `id` (UUID, Primary Key)
* `newsId` (UUID, Foreign Key to `news.id`, Nullable) - If comment is on news.
* `featureId` (UUID, Foreign Key to `features.id`, Nullable) - If comment is on a feature.
* `userId` (UUID, Foreign Key to `users.id`, Not Null)
* `parentId` (UUID, Foreign Key to `comments.id`, Nullable) - For threaded comments.
* `content` (TEXT, Not Null)
* `createdAt` (TIMESTAMP, Default: now())
* `updatedAt` (TIMESTAMP, Default: now())
**6. `votes` Table (for comments/posts if implemented later):**
* `id` (UUID, Primary Key)
* `userId` (UUID, Foreign Key to `users.id`, Not Null)
* `commentId` (UUID, Foreign Key to `comments.id`, Nullable)
* `type` (VARCHAR, Not Null) - e.g., 'upvote', 'downvote'
* `createdAt` (TIMESTAMP, Default: now())
**Relations:**
* One `standard` has many `features`.
* One `user` can write many `news` (if allowed), `comments`.
* One `news` can have many `comments`.
* One `feature` can have many `comments`.
* `comments` can be nested (self-referencing `parentId`).
# CORE FEATURES & USER FLOW
**1. Authentication Flow:**
* **Entry Point:** Landing Page (`/`).
* **Action:** User clicks 'Sign In' or 'Sign Up'.
* **Provider:** Redirected to NextAuth.js provider (e.g., GitHub login).
* **Success:** User is redirected to the Dashboard (`/dashboard`). Session data is stored in cookies/session storage.
* **Failure:** Error message displayed, user remains on the login page.
* **Sign Out:** User clicks 'Sign Out' in dropdown menu, redirected to Landing Page.
**2. Browsing C++ Standard Updates:**
* **User Flow:** Navigate to `/standards`.
* **View:** A list of C++ standards (e.g., C++26, C++23) sorted by version (descending). Each item shows version number, status, and publication date.
* **Action:** Click on a specific standard (e.g., C++26).
* **View:** Standard Detail Page (`/standards/[version]`). Shows detailed information about the standard, its current status, publication date, and a list of key features introduced or updated in that standard.
* **Action:** Click on a specific feature within the standard's detail page.
* **View:** Feature Detail Page (`/features/[featureId]`). Displays the detailed description of the feature, its category, the version it was introduced in, and potentially a link to external resources. A "Discuss" button links to the relevant section in the community forum.
**3. Reading News & Articles:**
* **User Flow:** Navigate to `/news`.
* **View:** A paginated list of news articles and blog posts, sorted by `publishedAt` (descending). Each item shows title, author (if applicable), publication date, and a short excerpt.
* **Action:** Click on a news article title or 'Read More'.
* **View:** News Detail Page (`/news/[slug]`). Displays the full article content (rendered Markdown), source URL, author, and publication date. Below the article, a comment section is displayed.
* **Action:** User (logged in) writes a comment and submits.
* **Process:** Comment is saved to the `comments` table, linked to the `newsId`. The page re-renders or updates optimistically to show the new comment.
**4. Community Discussion:**
* **User Flow:** Navigate to `/community` or click "Discuss" on a feature/news item.
* **View:** A browsable forum interface. Initially, could be a single thread per feature or news item, or a general discussion area.
* **Action:** Logged-in user can create new topics (if applicable) or reply to existing ones.
* **Process:** New comments are saved to the `comments` table, linked to the relevant `newsId` or `featureId`, and potentially `parentId` for threading.
* **Moderation:** Basic moderation tools for admins (delete comments).
**5. User Profile & Settings:**
* **User Flow:** Click on user avatar/name in the header.
* **View:** User Profile Page (`/profile/[userId]`) and Settings Page (`/settings`).
* **Functionality:** View/edit basic profile info (name, image). Manage account settings (email, password - if using native auth). View subscription status (if implemented).
# API & DATA FETCHING
* **Approach:** Utilize Next.js App Router's Server Components and Client Components. Server Components fetch data directly from the database using Drizzle ORM. Client Components use `fetch` API with appropriate caching or libraries like React Query for client-side data fetching and state management.
* **API Routes (if needed for complex mutations or external integrations):**
* `POST /api/comments`: To create new comments. Requires `content`, `newsId` or `featureId` in the request body. Authenticated endpoint.
* `POST /api/features`: (Admin only) To create new features.
* `PUT /api/features/[id]`: (Admin only) To update features.
* `DELETE /api/news/[id]`: (Admin only) To delete news articles.
* **Data Fetching Examples:**
* **Server Component (e.g., `StandardsListPage`):**
```typescript
import { db } from '@/lib/db';
import { standards } from '@/lib/db/schema';
import { eq } from 'drizzle-orm';
async function getStandards() {
return await db.query.standards.findMany({
orderBy: (standards.version, desc),
});
}
// Use getStandards() within the Server Component
```
* **Client Component (e.g., `CommentSection`):**
```typescript
import { useQuery, useMutation } from '@tanstack/react-query';
async function fetchComments(newsId) {
const res = await fetch(`/api/comments?newsId=${newsId}`);
return res.json();
}
async function addComment(newCommentData) {
const res = await fetch('/api/comments', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(newCommentData),
});
if (!res.ok) throw new Error('Failed to add comment');
return res.json();
}
// In the component:
const { data: comments, isLoading } = useQuery(['comments', newsId], () => fetchComments(newsId));
const mutation = useMutation(addComment, {
onSuccess: () => queryClient.invalidateQueries(['comments'])
});
// ... render comments, handle form submission with mutation.mutate(data)
```
# COMPONENT BREAKDOWN (Next.js App Router Structure)
* **`app/`**
* **`layout.tsx`:** Root layout (html, body, Providers: Auth, QueryClient, Theme)
* **`page.tsx`:** Landing Page (/) - Introduction, key highlights, CTA to sign up/explore.
* **`dashboard/`**
* **`page.tsx`:** User Dashboard (Protected Route) - Personalized feed, quick links, recent updates.
* **`standards/`**
* **`page.tsx`:** `StandardsListPage` - Lists all C++ standards.
* **`[version]/`**
* **`page.tsx`:** `StandardDetailPage` - Details of a specific standard, lists its features.
* **`features/`**
* **`[id]/`**
* **`page.tsx`:** `FeatureDetailPage` - Detailed view of a single C++ feature.
* **`news/`**
* **`page.tsx`:** `NewsListPage` - Paginated list of news articles.
* **`[slug]/`**
* **`page.tsx`:** `NewsDetailPage` - Full article content and comment section.
* **`community/`**
* **`page.tsx`:** `CommunityPage` - Main forum/discussion area.
* **(Optional sub-routes for specific threads/topics)**
* **`profile/`**
* **`[userId]/`**
* **`page.tsx`:** `UserProfilePage` - Public profile view.
* **`settings/`**
* **`page.tsx`:** `SettingsPage` - User account and profile settings (Protected Route).
* **`auth/`**
* **`sign-in/`**
* **`page.tsx`:** `SignInPage` - Sign-in form/options.
* **`sign-up/`**
* **`page.tsx`:** `SignUpPage` - Sign-up form (if using email/password).
* **`api/`**
* **`[...route]/`**: Catch-all for API routes (e.g., `route.ts` for `/api/comments`).
* **`components/`**
* **`ui/`:** Re-exported components from shadcn/ui (Button, Card, Input, Sheet, Dialog, Avatar, etc.).
* **`layout/`:** Header, Footer, Sidebar components.
* **`common/`:** Shared components like LoadingSpinner, ErrorMessage, Pagination.
* **`features/`:** Components specific to features (e.g., `FeatureCard`, `FeatureList`, `FeatureDetailView`).
* **`news/`:** Components like `NewsCard`, `ArticleContent`, `CommentSection`, `CommentItem`.
* **`standards/`:** Components like `StandardCard`, `StandardDetailView`.
* **`forms/`:** Reusable form components (e.g., `CommentForm`).
* **`lib/`:** Utility functions, database connection (`db.ts`), Drizzle schema (`schema.ts`), auth config (`auth.ts`), constants.
* **`hooks/`:** Custom React hooks.
* **`contexts/`:** React Context providers.
# UI/UX DESIGN & VISUAL IDENTITY
* **Design Style:** Modern, Clean, Professional, with subtle technical undertones.
* **Color Palette:**
* **Primary:** Deep Blue (`#1A202C` - Dark Backgrounds) / Teal (`#26A69A` - Accents, CTAs)
* **Secondary:** Light Gray (`#E2E8F0` - Text, Borders) / Mid Gray (`#A0AEC0` - Subdued Text)
* **Accent/Highlight:** Bright Cyan (`#00BCD4`) or Lime Green (`#8BC34A`) for key stats or interactive elements.
* **Backgrounds:** Dark mode primary (`#1A202C`), Light mode primary (`#FFFFFF`). Accent backgrounds (`#2D3748` or similar dark gray).
* **Typography:**
* **Headings:** Inter (`var(--font-inter)`) or similar sans-serif, semi-bold.
* **Body:** Inter or Source Code Pro (for code snippets), regular weight.
* **Layout:**
* Generous use of whitespace.
* Consistent padding and margins.
* Main content area max-width (e.g., 1280px) centered.
* Responsive design: Mobile-first approach, adapting gracefully to tablet and desktop screens.
* Clear visual hierarchy.
* **Visual Elements:**
* Subtle use of gradients in backgrounds or buttons for a modern feel.
* Icons from Lucide/Heroicons (via shadcn/ui).
* Code blocks styled clearly with syntax highlighting.
* Data visualizations (e.g., progress bars for standard status) using simple charts if needed later.
* **Responsive Rules:** Utilize Tailwind CSS's responsive prefixes (sm:, md:, lg:, xl:). Ensure navigation is usable on mobile (e.g., off-canvas menu or bottom nav), content reflows cleanly.
# ANIMATIONS
* **Page Transitions:** Subtle fade-in/slide-in transitions between pages using Next.js `useRouter` and a library like Framer Motion or just CSS transitions on route change.
* **Component Transitions:** Fade-in/pop animations for elements appearing on scroll (e.g., cards, feature lists).
* **Button Hovers:** Slight scale-up or color change on hover.
* **Loading States:** Skeleton loaders or spinners integrated into data-fetching components (using React Query's `isLoading` state).
* **Form Feedback:** Subtle animations for validation errors or success messages.
# EDGE CASES
* **Authentication:** Redirect unauthenticated users from protected routes (`/dashboard`, `/settings`) to `/auth/sign-in`. Handle expired sessions gracefully.
* **Empty States:** Display user-friendly messages and possibly CTAs when lists are empty (e.g., "No news articles found yet.", "Start the discussion!").
* **Error Handling:** Global error boundary or catch blocks in data fetching. Display user-friendly error messages. API routes should return appropriate HTTP status codes and error details.
* **Validation:** Implement robust client-side (React Hook Form + Zod) and server-side validation for all user inputs (comments, profile updates, etc.).
* **Rate Limiting:** Implement basic rate limiting on API endpoints (especially for mutations like comments) to prevent abuse.
* **Permissions:** Differentiate user roles (`user`, `pro`, `admin`). Admins should have access to manage content (news, features) and users.
* **SEO:** Implement basic SEO practices for public pages (news, standards) using Next.js metadata API.
# SAMPLE/MOCK DATA
**1. `standards`:**
* `{ id: '...', version: 'C++26', status: 'DIS', publicationDate: '2024-12-15', summary: 'The next major iteration of C++, focusing on performance, concurrency, and developer productivity.' }`
* `{ id: '...', version: 'C++29', status: 'Draft', publicationDate: null, summary: 'Early draft stage, proposals being considered for modules, networking, and improved metaprogramming.' }`
**2. `features`:**
* `{ id: '...', standardId: 'cpp26_id', name: 'Ranges V2', description: 'A significantly improved and expanded version of the Ranges library introduced in C++20, offering more composability and flexibility.', category: 'Library', addedInVersion: 'C++26' }`
* `{ id: '...', standardId: 'cpp26_id', name: 'Coroutines Refinements', description: 'Further improvements and clarifications to the coroutine support added in C++20, enhancing usability and performance.', category: 'Language', addedInVersion: 'C++26' }`
* `{ id: '...', standardId: 'cpp29_id', name: 'Networking TS Support', description: 'Integration of the Networking Technical Specification features into the standard library.', category: 'Library', addedInVersion: 'C++29' }`
**3. `news`:**
* `{ id: '...', title: 'C++26 Officially Complete!', slug: 'cpp26-complete', content: 'Herb Sutter announced that technical work on C++26 is finished! The draft is now heading for ISO approval. This release is considered by many to be the most impactful since C++11...', authorId: 'admin_user_id', publishedAt: '2024-03-30T10:00:00Z', sourceUrl: 'https://example.com/herbs-post' }`
* `{ id: '...', title: 'Deep Dive: Understanding C++26 Modules', slug: 'cpp26-modules-deep-dive', content: 'An in-depth look at the finalized C++26 Modules standard, how they differ from earlier proposals, and their benefits for build times and code organization. Includes examples...', authorId: 'editor_user_id', publishedAt: '2024-04-05T14:30:00Z', sourceUrl: null }`
**4. `comments`:**
* `{ id: '...', newsId: 'cpp26-complete_id', userId: 'user1_id', content: 'Fantastic news! Can't wait to see the final features list.', createdAt: '2024-03-30T11:15:00Z' }`
* `{ id: '...', newsId: 'cpp26-complete_id', userId: 'user2_id', parentId: 'comment1_id', content: 'Does this include the proposed concurrency safety improvements?', createdAt: '2024-03-30T11:30:00Z' }`
* `{ id: '...', featureId: 'ranges_v2_id', userId: 'user3_id', content: 'Ranges V2 is a game-changer for writing expressive and efficient algorithms.', createdAt: '2024-04-06T09:00:00Z' }`
**5. `users`:**
* `{ id: 'admin_user_id', name: 'Admin User', email: 'admin@cppwatch.com', image: '...', role: 'admin' }`
* `{ id: 'user1_id', name: 'Alice Dev', email: 'alice@example.com', image: '...', role: 'user' }`
* `{ id: 'user3_id', name: 'Bob Coder', email: 'bob@example.com', image: '...', role: 'pro' }`