Use This shadcn Dashboard Template for a Full-Stack App

I want to use this GitHub repository as the foundation for a full-stack SaaS application: https://github.com/shadcnstore/shadcn-dashboard-landing-template First, inspect the repository and understand its structure. It supports Vite and Next.js, but for this project, I want to use the Next.js version. Please do the following: 1. Clone the repository into a new project directory named `flowboard`. 2. Inspect the available framework versions, package scripts, dependencies, and project structure. 3. Set up the Next.js version without mixing it with the Vite implementation. 4. Install the required dependencies using the package manager appropriate for the repository. 5. Configure the environment files if necessary, without adding real secrets to version control. 6. Run the available lint, type-check, and build commands to identify existing issues. 7. Start the development server and verify that the application runs. Important rules: - Do not redesign or rewrite the existing UI. - Preserve the original components, styles, and layouts. - Do not add authentication or database functionality yet. - If the repository structure differs from your expectations, inspect it and adapt rather than assuming specific file paths. - Explain which commands you ran and report any errors you could not resolve. First, complete the setup and verify that the application works before moving on.

We are building a SaaS project management application called FlowBoard using the existing shadcn-dashboard-landing-template repository. The project is already running locally. Now I want you to adapt its existing landing page and dashboard UI to FlowBoard. FlowBoard helps individuals and small teams organize projects, manage tasks, track progress, and monitor upcoming deadlines. Use the existing template as the design foundation. Do not rebuild the application from scratch. LANDING PAGE Adapt the existing landing page with: - A navigation bar with the FlowBoard logo, Features, Pricing, and Sign In links. - A hero section explaining that FlowBoard helps teams organize projects and track work. - A primary CTA to get started and a secondary CTA to explore features. - A product preview using the existing dashboard UI. - Feature sections for project management, task tracking, team collaboration, and progress analytics. - A simple pricing section and footer. DASHBOARD Adapt the existing dashboard into a project management workspace: - Overview page with total projects, active tasks, completed tasks, and overdue tasks. - Charts showing task completion and project progress. - Recent projects with progress indicators. - Recent tasks with status, priority, and due date. - A Projects page for viewing and managing projects. - A Tasks page for viewing and managing tasks. - A Calendar page for upcoming deadlines. - A Team or Users page for team management. - Settings and profile pages. DESIGN REQUIREMENTS - Preserve the template's existing visual language, spacing, typography, sidebar, responsive behavior, and reusable components. - Reuse existing charts, tables, forms, cards, dialogs, and navigation components wherever appropriate. - Use realistic sample data for now. - Ensure navigation links work and every page has a consistent layout. - Do not introduce unnecessary dependencies. - Avoid duplicating components or creating a separate design system. - Keep the code clean, maintainable, and compatible with the existing Next.js version. BACKEND IS NOT PART OF THIS STEP Do not configure Neon, Drizzle, Better Auth, or API integrations yet. Use local mock data only. First inspect the existing components and routes, then implement the UI changes. Run the available checks and summarize the pages and components you changed. The result should look like a coherent, polished SaaS product rather than an unmodified template.

Audit the entire FlowBoard dashboard and its navigation. Identify pages that are missing, broken links, non-functional features, duplicate pages, and features that are unnecessary for a project management SaaS. Remove unnecessary pages and features, fix broken navigation, and implement any missing pages or essential features. Ensure every sidebar item, button, menu action, and link works correctly. Preserve the existing design and working functionality. Use mock data and client-side state only. Do not implement the backend, database, or authentication yet. Make the changes directly in the codebase, then run the available checks and summarize what you added, fixed, and removed.

The FlowBoard UI is now implemented. Next, I want to connect the application to a real PostgreSQL database using Neon and Drizzle ORM. I already have the Neon MCP connected to my AI coding agent. Use the available Neon MCP tools to create or configure the database directly if supported. Do not assume a database has been created until you verify it. TECHNOLOGY - Database: Neon PostgreSQL. - ORM: Drizzle ORM. - Framework: Existing Next.js application. - Language: TypeScript. STEP 1: INSPECT THE PROJECT Inspect the existing dependencies, environment configuration, application routes, and database-related code. Reuse any existing setup that is appropriate. STEP 2: CONFIGURE NEON Use the connected Neon MCP to create or select a dedicated development database for FlowBoard. Retrieve or configure the appropriate connection string using the available integration. Store database credentials in environment variables, never in source code. If the MCP cannot perform a particular operation, explain what is missing rather than pretending it succeeded. STEP 3: SET UP DRIZZLE Install and configure Drizzle ORM and the PostgreSQL driver appropriate for Neon. Create a maintainable database structure with a schema directory, Drizzle configuration, and migration scripts. Use migrations to manage schema changes. Do not rely on manually changing production tables. STEP 4: DESIGN THE DATABASE Create the initial tables needed for FlowBoard: 1. Users: account identity and profile information, designed to work with Better Auth. 2. Projects: project name, description, status, timestamps, and owner. 3. Tasks: project reference, title, description, status, priority, due date, and timestamps. 4. Task assignments or memberships only if needed for the existing UI. Define appropriate primary keys, foreign keys, indexes, and relationships. Important: Inspect Better Auth's requirements before defining the user and session tables. The schema must be compatible with the authentication integration we will add in the next step. Avoid creating conflicting user tables or duplicating authentication-related data. STEP 5: CONNECT THE APPLICATION Create reusable database access utilities and implement the necessary server-side queries and mutations. Replace the mock project and task data with database queries. Ensure project creation, task creation, editing, status changes, and deletion persist in PostgreSQL. Keep database credentials and server-only code out of client components. STEP 6: VALIDATE Apply the migrations and verify the resulting schema. Test the database connection and the project/task CRUD operations. Run the existing lint, type-check, and build commands. Do not remove existing UI functionality or change the design unnecessarily. At the end, explain the tables created, the migrations applied, the files changed, and any remaining issues. Do not claim an operation was successful unless you have verified it.

Now integrate Better Auth into the existing FlowBoard Next.js application. We already have a Neon PostgreSQL database and Drizzle ORM configured. Reuse that setup instead of introducing another database library. AUTHENTICATION REQUIREMENTS Implement simple email and password authentication for this demo. Users should be able to: - Create an account using their name, email, and password. - Sign in using email and password. - Sign out securely. - Maintain their authenticated session across page refreshes. - Access their own dashboard after signing in. Use the existing authentication pages and adapt their forms to the real authentication flow. Preserve the current design. IMPLEMENTATION 1. Inspect the installed Next.js version and follow the appropriate Better Auth integration and documentation. 2. Install Better Auth and configure its server-side instance. 3. Integrate Better Auth with the existing Drizzle adapter and Neon PostgreSQL database. 4. Create or migrate the required user, session, account, and verification tables using the supported Better Auth schema and migration workflow. 5. Configure the authentication API routes and client utilities according to the existing App Router structure. 6. Implement sign-up, sign-in, sign-out, and session handling. 7. Add proper validation and user-friendly error messages. 8. Protect dashboard routes and redirect unauthenticated users to the sign-in page. 9. Redirect authenticated users away from sign-in and sign-up pages when appropriate. 10. Display the authenticated user's information in the dashboard and provide a working sign-out action. DATA OWNERSHIP AND SECURITY - Every project must belong to an authenticated user. - Every task must belong to a project that the current user is authorized to access. - Enforce ownership checks on the server for all reads, updates, and deletions. - Never rely only on hiding UI elements to protect data. - Do not trust a user ID supplied by the client when determining ownership. - Keep authentication secrets in environment variables. - Configure trusted origins and production cookie settings appropriately. - Do not add OAuth providers or unnecessary authentication features. VALIDATION Test the following flows: - Register a new account. - Sign in with valid credentials. - Reject invalid credentials with an appropriate message. - Refresh the page while authenticated. - Sign out and confirm protected pages are no longer accessible. - Confirm one user cannot access another user's projects or tasks by changing an ID or URL. Run the available lint, type-check, and build commands. Inspect the actual installed library versions and resolve any incompatibilities instead of guessing API names or copying outdated examples. Do not redesign the application or remove working features. At the end, summarize the implementation, database changes, environment variables required, and tests performed.