next.config.mjs	- Configures Next.js project settings for images and experimental features, including remote patterns for images and external packages for server components - Enables support for MDX rendering and specifies external packages like "mongoose." This file plays a crucial role in defining project configurations and enabling experimental features within the codebase architecture.
package-lock.json	- The `package-lock.json` file in the project structure defines the dependencies and their versions required for the "devflow" project - It ensures that the project uses specific versions of packages like "@clerk/nextjs", "@hookform/resolvers", "@radix-ui/react-dialog", "@radix-ui/react-icons", "@radix-ui/react-label", and "@radix-ui/react-menubar" - This file plays a crucial role in maintaining consistency and reproducibility in the project's development environment by locking the dependency versions.
tsconfig.json	Configure TypeScript settings for Next.js project to enable modern JavaScript features and improve type safety.
eslint.config.mjs	- Define ESLint configuration for JavaScript, TypeScript, and React in the project - Import plugins and globals, set language options, and define rules to ensure consistent code quality across various file types.
middleware.ts	- Implements middleware for protecting specific routes based on authentication status - Uses Clerk for authentication and route matching - Configured to skip Next.js internals and static files, except when in search params, and always run for API routes - Enhances project security by ensuring protected routes are only accessible to authenticated users.
postcss.config.mjs	Defines PostCSS configuration with TailwindCSS plugin for the project's styling needs.
package.json	Define project dependencies and scripts for building, running, and linting.
components.json	- Defines project configuration for styles, resources, and aliases - Specifies Tailwind CSS settings, file paths, and module aliases for components, utilities, and hooks - Facilitates consistent styling and easy module imports across the codebase.
tailwind.config.ts	- Define Tailwind CSS configuration for project theming, typography, and animations - Customize colors, fonts, border radii, and box shadows - Set up responsive breakpoints and background images - Enable dark mode with class-based toggling - Organize content from pages, components, and app directories - Integrate Tailwind plugins for animations and typography.

index.d.ts

Defines interfaces for sidebar links, tags, badge counts, and criteria types within the project architecture.

validations.ts	- Define validation schemas for asking questions, answering, and profile information using Zod in lib/validations.ts - Ensure titles, explanations, tags, answers, names, usernames, bios, portfolio websites, and locations meet specified criteria.
mongoose.ts	Establish database connection using Mongoose, handling potential errors based on connection issues.
utils.tsx	- The code file in lib/utils.tsx provides utility functions for handling common tasks like formatting numbers, calculating time differences, and managing URL parameters - It also includes a function to assign badges based on specified criteria - These functions contribute to enhancing the user experience and data presentation within the project's architecture.

actions

interaction.action.ts	- Improve user engagement by updating question views and tracking interactions in the database - The code in the provided file handles viewing questions, increments view count, and records user interactions if applicable - It ensures data integrity and enhances user experience within the project's architecture.
general.action.ts	- The code in lib/actions/general.action.ts performs a global search across different data collections based on the provided type and query - It retrieves relevant results from questions, answers, users, and tags, applying search filters and limits - The function handles various search scenarios and formats the results for each data type accordingly.
answer.action.ts	- Manages creation, retrieval, upvoting, downvoting, and deletion of answers, updating user reputation accordingly - Handles database interactions for answers, questions, users, and interactions - Maintains answer-question relationships and triggers cache revalidation.
shared.types.d.ts	- Defines shared types for various actions in the project, such as creating, updating, and deleting user-related data, managing questions and answers, handling user profiles, and performing searches - These types ensure consistency and clarity across different parts of the codebase, facilitating seamless communication and interaction between components.
tag.action.ts	- Implement functions to retrieve and manipulate tag data, including fetching top interacted tags, all tags with search and filter options, questions by tag ID, and top popular tags - Functions handle database connections, error handling, and data aggregation for efficient tag-related operations within the project architecture.
job.action.ts	- The code file `job.action.ts` in the project is responsible for handling job search actions - It imports constants related to job search APIs and defines types for job search properties - The file likely contains functions or logic to interact with the job search API and process the retrieved data - This code plays a crucial role in enabling users to search for specific job listings based on various parameters such as location, job title, and employment type within the application.
user.action.ts	- Provides functions to manage user data such as creating, updating, and deleting users, fetching user information, questions, and answers - Implements user-related operations like saving questions, assigning badges, and updating user profiles - Handles database interactions for user-specific actions within the project's architecture.
question.action.ts	- The code file orchestrates interactions with questions in the database, enabling actions like retrieving, creating, updating, and deleting questions - It also supports functionalities such as upvoting, downvoting, and fetching recommended questions based on user interactions - This file plays a crucial role in managing the core question-related operations within the project architecture.

prism.css	- Define the color scheme and styling for code syntax highlighting in the project's Prism theme - Set font styles, colors, and backgrounds for different code elements to enhance readability and visual appeal.
theme.css	- Define global styles for light and dark themes using Tailwind CSS utility classes - Include background colors, text styles, borders, typography, shadows, gradients, and more - Ensure consistent design across the project with predefined styling options.

toastWrapper.tsx	Defines a component that manages toast notifications' position based on the viewport size, enhancing user experience by ensuring optimal visibility.
RightSidebar.tsx	- Generates dynamic content for the right sidebar displaying top questions and popular tags by fetching data asynchronously - Utilizes Next.js for server-side rendering and efficient image loading - Enhances user experience with interactive links and tag components.
LeftSidebar.tsx	- Generates the left sidebar navigation with user authentication handling and dynamic routing based on the current pathname - Displays sidebar links with corresponding icons and labels, adjusting the route for the profile link if a user is authenticated - Includes sign-in and sign-up buttons for users not logged in.

shared

AnswersTab.tsx	- Generates user answers tab with pagination and no results display - Retrieves user answers based on search parameters and displays them using AnswerCard component - If no answers, prompts user to contribute - Allows seamless navigation through pagination.
QuestionTab.tsx	- Generates a user-specific question tab displaying questions with pagination - Retrieves user questions, presents them using QuestionCard components, and handles cases with no results - Encourages user engagement by prompting to ask questions - Facilitates seamless navigation through questions with pagination functionality.
NoResults.tsx	- Render a component displaying a message with an illustration, title, description, and a button linking to a specified URL - The component enhances user experience by providing a visually appealing and interactive way to handle scenarios with no search results.
Metric.tsx	- Defines a reusable Metric component for displaying data with images, values, and titles - Handles optional links and author-specific styling.
ListAnswers.tsx	- Generates a list of answers for a given question, displaying author details, voting options, and answer content - Includes filters for answer sorting and a time ago feature.
Pagination.tsx	- Implements a dynamic pagination component that enables users to navigate through content efficiently based on the total number of items - It integrates with the project's UI components and utilizes Next.js routing for seamless page transitions - The component adjusts the display based on the current page and total pages, enhancing the user experience within the application.
Stats.tsx	- The Stats component renders statistics including total questions, answers, and badges - It utilizes StatsCard to display badge counts with corresponding icons - The component structure is clean and modular, enhancing code readability and maintainability within the project architecture.
NoResult.tsx	- Render a component displaying a message with an illustration, title, description, and a button linking to a specified URL - The component is designed to handle scenarios where no search results are found, providing a visually appealing and user-friendly interface for users to navigate.
EditDeleteActions.tsx	- Implements Edit and Delete actions for questions and answers, allowing users to modify or remove content - Handles routing and deletion requests, providing visual feedback upon successful deletion - Integrates with the project's navigation and API actions to ensure a seamless user experience.
Votes.tsx	- Enables users to interact with questions and answers by upvoting, downvoting, and saving them - Handles user authentication and displays vote counts visually - Supports actions like viewing questions, toggling saves, and providing feedback messages - Enhances user engagement and feedback within the platform.
Filters.tsx	- Implements a dynamic filtering component for the UI, allowing users to select and apply filters to the displayed content - The component interacts with the URL to update the filter state and trigger relevant content updates.
ParseHTML.tsx	- ParseHTML component enhances user experience by rendering HTML content with syntax highlighting using Prism - It integrates with React to parse and display structured data efficiently - This component plays a crucial role in presenting dynamic content in a visually appealing and readable format within the project architecture.
ProfileLink.tsx	- Enables rendering a profile link with an image and title, supporting optional external URLs - The component leverages Next.js for image optimization and routing, enhancing user experience and visual appeal.
RenderTag.tsx	- Defines a reusable component for rendering tags with optional question count display - Links to tag details and displays tag name with count if specified.

navbar

ThemeSwitcher.tsx	- Implements a theme switcher component for the navbar, allowing users to toggle between light and dark themes - The component integrates with the project's theme provider context and displays theme options with corresponding icons.
NavBar.tsx	- Defines the navigation bar component for the project, incorporating features like site logo, global search, theme switcher, user authentication, and mobile navigation - The component ensures a cohesive and user-friendly interface for seamless navigation and interaction within the application.
MobileNav.tsx	- MobileNav component renders a responsive navigation menu with a collapsible sidebar on mobile devices - It integrates with the UI components for a seamless user experience, displaying links based on the current page - The component also includes sign-in and sign-up buttons for users not logged in.

search

GlobalFilters.tsx	- GlobalFilters component manages search filters for different types in the project, allowing users to filter content by question, answer, user, or tag - It updates the URL based on the selected type, providing a seamless filtering experience.
GlobalSearch.tsx	- Enables global search functionality with dynamic URL updates and interactive search results display - Manages user input, URL navigation, and result presentation for a seamless search experience - Integrates with Next.js routing and Framer Motion for smooth transitions.
GlobalResult.tsx	- Generates global search results with dynamic filtering and navigation links based on user queries - Displays loading indicators and handles empty result scenarios gracefully - Integrates with external APIs for fetching and rendering data efficiently - Enhances user experience by providing a seamless search experience within the application.
LocalSearch.tsx	- Enables dynamic search functionality with URL updates based on user input - Handles search term changes, updates URL parameters, and triggers navigation without page reload - Integrates search icon positioning and styling flexibility for enhanced user experience within the shared components of the project architecture.

cards

UserCard.tsx	- Generates a user card displaying profile information and top interacted tags - The card includes the user's name, username, profile picture, and a list of tags based on user interactions - Clicking on the card redirects to the user's profile page.
JobCard.tsx	- Generates job cards displaying key details like job title, employer info, location, and salary - Includes links for applying and employer websites - Utilizes Next.js Image component for logos and flags - Enhances user experience by providing concise job information and easy navigation to job listings.
QuestionCard.tsx	- Generates a Question Card component displaying question details, author info, tags, upvotes, views, and answers - Includes actions for the author to edit or delete the question - Utilizes paths, time formatting, and utility functions for a dynamic user experience.
AnswerCard.tsx	- Generates AnswerCard component displaying answer details, author info, and actions - Renders question title, author name, upvotes count, and creation time - Allows authors to edit or delete their answers - Enhances user engagement and interaction within the project's Q&A feature.

forms

Question.tsx	- The code file `Question.tsx` in the `forms` component handles the creation and editing of questions, including title, explanation, and tags - It integrates form validation, submission handling, and tag management - The file encapsulates the logic for posting questions, updating existing ones, and rendering tags dynamically based on user input.
Answer.tsx	- Implement a React component named Answer that enables users to submit answers to questions - It integrates with an external AI service to generate answers automatically - The component includes a rich text editor for composing answers, form validation, and submission handling - Users can also trigger the AI answer generation feature.
Profile.tsx	- Enables users to update their profile information seamlessly by providing a form with fields for name, username, portfolio link, location, and bio - Upon submission, the data is validated and sent for updating the user profile, with success and error messages displayed accordingly - This component integrates with various UI elements and validation schemas to enhance the user experience.

home

HomeFilters.tsx

- Implements dynamic filtering functionality for the home page using URL parameters - Handles filter selection changes and updates the URL accordingly - Displays filter buttons based on predefined filters, allowing users to toggle between them.

ui

sheet.tsx	- Facilitates creation of customizable modal sheets for UI components, including triggers, content, headers, footers, titles, and descriptions - Manages sheet variants and animations based on specified side - Enables seamless integration of Radix UI components for enhanced user experience.
badge.tsx	- Implements a Badge component with variant styles for UI elements - The component utilizes class variance authority to manage different visual styles based on the specified variant - This promotes reusability and consistency in styling across the project's UI components.
pagination.tsx	- The Pagination component in the UI module facilitates navigation between pages, offering components like Previous, Next, and Ellipsis for enhanced user experience - It abstracts away pagination logic, promoting reusability and maintainability across the codebase architecture.
label.tsx	Implements a custom label component with variant styles for the UI, enhancing accessibility and visual consistency across the project.
input.tsx	Defines a reusable React input component with customizable styling and functionality, enhancing user input experience across the project.
textarea.tsx	Enables the creation of customizable text areas for user input within the UI components, ensuring consistent styling and functionality across the project.
form.tsx	- Facilitates form creation and management within the UI components, offering reusable form elements like labels, controls, descriptions, and messages - Enhances form handling by providing structured contexts for form fields, items, and associated functionalities - Promotes consistency and efficiency in building interactive forms across the codebase.
select.tsx	- Improve user interface interactions by enhancing the select component with customizable styling and behavior - This file defines various components like Select, SelectTrigger, SelectContent, and more, allowing for a flexible and interactive dropdown selection experience within the project's UI architecture.
button.tsx	- Defines button variants and props for a React component, enabling customization of button styles and sizes - Facilitates the creation of versatile and visually appealing buttons within the project's UI components.
tabs.tsx	Define and export custom UI components for tabs functionality using Radix UI in the project architecture.
skeleton.tsx	- Defines a reusable Skeleton component for displaying loading placeholders in the UI - The component applies a pulsating animation and styling to mimic a loading state - This aids in enhancing user experience by providing visual feedback during data fetching processes.
menubar.tsx	- Define and structure UI components for a menubar using Radix UI primitives - Implement various elements like menus, triggers, items, separators, and shortcuts - Facilitate easy customization and integration of menubar functionality within the project's user interface.
sonner.tsx	- Defines a custom Toaster component that integrates with the Next.js theme system and Sonner library - The component enhances user experience by providing customizable toast notifications with dynamic theming support.

filters.ts	- Defines various filters for different sections of the application, such as homepage, users, answers, questions, and tags - These filters provide options for sorting and organizing content based on different criteria, enhancing user experience and content discoverability within the platform.
index.ts	- Define constants and sidebar links for the project, including themes, job search API, items per page, and badge criteria - These values are crucial for maintaining consistency and functionality across different parts of the application.
paths.js	Define standardized paths for key features and pages in the project, ensuring consistent navigation and URL structure across the codebase.

ThemeProvider.tsx

- Manages theme settings and storage for the React app, ensuring persistence and synchronization across sessions - The ThemeProvider component establishes a context for theme data and provides hooks for accessing and updating themes throughout the application - This file plays a crucial role in maintaining consistent visual styling based on user preferences.

layout.tsx	- Defines the root layout for the project, incorporating global styles and fonts - Integrates theme and authentication providers, setting the stage for a consistent user experience across the platform.
globals.css	- Define global styles for the project, including color schemes, typography, and utility classes - Implement Tailwind CSS utilities and custom styles for buttons, flex layouts, cards, and markdown elements - Additionally, handle dark mode styling and scrollbar customization.

(auth)

layout.tsx

Defines the layout for the authentication pages, setting the title metadata and styling the main content area.

onboarding

page.tsx

- Defines an onboarding page that fetches user data and prompts profile completion - If user is not onboarded, redirects to the homepage.

sign-in

[[...sign-in]]

page.tsx

Enables user sign-in functionality using the Clerk SDK within the authentication section of the project.

sign-up

[[...sign-up]]

page.tsx

Enables user sign-up functionality using the Clerk SDK within the app's authentication module.

(root)

layout.tsx

- Defines the overall layout structure of the project, including the main content area and sidebars - Renders the navigation bar, left and right sidebars, and a toaster wrapper for notifications - Maintains a clean and organized user interface by structuring the components in a visually appealing manner.

profile

edit

page.tsx

- Enables editing user profiles securely by fetching user data and rendering the profile edit page - Handles user authentication and redirects unauthorized users - Displays the user's profile information for editing.

[id]

page.tsx	- Generates a user profile page displaying user information, stats, and tabs for top posts and answers - Retrieves user data, including picture, name, bio, and joined date - Allows users to edit their profiles if authenticated - Displays user stats like reputation, question count, answer count, and badges - Implements tabs for top posts and answers with corresponding components.
loading.tsx	Generates a loading skeleton for profile data display, enhancing user experience by providing visual feedback during content loading.

tags

page.tsx	- Generates a page displaying tags with search, filters, and pagination functionalities - Retrieves tags data and renders tag cards with question counts - Handles cases where no tags are found, providing a prompt to ask a question - Designed for the Dev Overflow platform, enhancing user experience in exploring and interacting with tags.
loading.tsx	Generates loading skeleton UI for tags section, enhancing user experience by providing visual feedback while content loads.

[id]

page.tsx	- Generates metadata and renders tag-specific questions with pagination and search functionality - Displays tag name, question cards, and prompts users to ask questions if no results are found - Enhances user engagement and navigation within the application.
loading.tsx	Generates loading skeleton components to enhance user experience during data fetching.

collections

page.tsx	- The code file in app/(root)/collections/page.tsx orchestrates the display of saved questions, leveraging filters, search functionality, and pagination - It interacts with user actions to fetch and present relevant data, ensuring a seamless user experience within the Dev Overflow collections section.
loading.tsx	Generates loading skeleton components to display while fetching data, enhancing user experience by providing visual feedback during loading times.

question

edit

[id]

page.tsx

- Enables editing of a question by fetching user and question data, ensuring user authentication, and rendering the question form for editing - The page displays the question title and form fields pre-filled with existing data for modification.

[id]

page.tsx

- Generates metadata for a question page by fetching question details and user information - Displays author info, voting options, question title, metrics, content, tags, answers, and an answer form - Enhances user engagement and interaction on the platform.

jobs

page.tsx

- Defines a page displaying job listings with search and filter functionality - Retrieves job data based on search parameters, including query, filters, and page number - Renders job cards if data is available; otherwise, displays a message - Integrates search, filters, and error handling for a seamless user experience within the job listings section of the project.

(home)

page.tsx	- Generates the home page content by fetching and displaying questions based on user filters - Includes search functionality, question cards, pagination, and login prompts - Integrates with Next.js, Clerk, and custom components for a seamless user experience.
loading.tsx	- Generates a loading screen with a title, "All Questions," and an "Ask a Question" button - Displays multiple skeleton loading animations for content placeholders.

community

page.tsx	- Generates the community page displaying all users with search, filters, and pagination functionalities - Fetches users based on search parameters and renders UserCards - Handles cases where no users are found, prompting users to sign up - Overall, provides a comprehensive view of community members and encourages user engagement.
loading.tsx	Render a loading screen with skeleton components to display while fetching user data, enhancing user experience by providing visual feedback during the loading process.

ask-question

page.tsx

- Enables users to ask questions by ensuring authentication and fetching user data before rendering the question form - The code file orchestrates the process of verifying user identity, retrieving user information, and presenting the question form within the Dev Overflow platform.

api

chatGPT

route.ts

- Handle POST requests to the chatGPT API endpoint by validating and processing user questions, then generating AI responses using the GPT-3.5 model - The code interacts with the OpenAI API, authenticating with a provided key and sending user queries for AI completion - Responses are parsed and returned to the client for seamless chat interactions.

webhooks

route.ts

- Handles incoming webhooks from Clerk API, verifying and processing user creation, update, or deletion events - Utilizes Svix for webhook verification and interacts with user actions for database operations - Parses webhook payload, performs actions based on event type, and returns appropriate responses - Ensures secure and reliable webhook processing within the application architecture.

interaction.model.ts	- Defines the schema for user interactions in the database using Mongoose - It includes fields for user, action, question, answer, tags, and creation timestamp - The schema is used to create a model for interactions, ensuring data consistency and structure within the application's database.
user.model.ts	- Defines the user model schema for the database, including fields like name, email, and reputation - Ensures uniqueness for certain fields and sets default values where needed - Establishes relationships with other entities through references - Overall, this code file structures and represents user data within the project's database architecture.
question.model.ts	- Defines a MongoDB schema for questions in the Q&A platform, including fields like title, content, tags, views, upvotes, author, and answers - It establishes relationships with other entities like tags, users, and answers - The schema ensures structured data storage and retrieval for questions within the application.
tag.model.ts	- Defines a Mongoose schema for tags with fields like name, description, questions, followers, and creation date - It also exports the schema as a type and a model - This file plays a crucial role in structuring and managing tag-related data within the project's database architecture.
answer.model.ts	Define and structure the Answer model schema using Mongoose, ensuring data integrity and relationships between Users, Questions, and Answers in the database.