GitHub - amitpatil321/Snipster: Your personal snippet manager

Snipster

Where Code Finds Its Home.

Built with:

🔗 Table of Contents

📍 Overview
📸 Screenshots
🌟 Features
🧩 BFF Architecture
📁 Project Structure
📁 Project Index
🚀 Getting Started
💄 Adding new theme
📌 Project Roadmap
🔰 Contributing
🎗 License

📍 Overview

Snipster is an open-source snippet manager built for developers who value speed, organization, and collaboration. It allows you to save, search, and reuse your favorite code snippets across projects effortlessly. With a clean interface and powerful categorization, Snipster helps you eliminate repetitive coding, stay consistent, and boost productivity—whether you’re working on the frontend, backend, or full-stack applications.

📸 Screenshots

🌟 Features

🔐 Secure Authentication – Auth0 integration with BFF architecture (Backend for frontend).
📂 Smart Snippet Organization – Group snippets into folders and tags.
🏷️ Tag Support – Assign one or multiple tags to snippets.
🔎 Advanced Search & Filters – Search by title, description, language, tags, favorites (roadmap).
✨ Rich Code Editor – Code editor with syntax highlighting for 15+ programming languages (JavaScript, TypeScript, Python, Go, etc.).
🌗 Theming System – Switch between light/dark/system modes and apply color themes.
Users can also add new custom/ready themes in just a few steps – see Theme Setup Guide.
⭐ Favorites & Quick Access – Mark snippets as favorites and quickly find them later.
🗑️ Soft Delete – Deleted snippets are preserved with deletedAt timestamps for recovery.
📱 Responsive UI – Mobile-first design, fully responsive layout with Tailwind CSS + shadcn/ui.
⚡ Optimistic Updates – Instant UI feedback for actions powered by React Query.
🌀 Animations & Transitions – Smooth motion effects for dialogs, modals, and lists.
🛠️ Developer Friendly – ESLint + Prettier setup, TypeScript strict mode.
📈 Scalable Backend – Express + MongoDB with modular routes, controllers, and models.

🧩 BFF (Backend for Frontend) Architecture

📁 Project Structure

snipster/
├── LICENSE
├── README.md
├── add-snippet.png
├── snipster-home.png
├── backend/
│   ├── config/
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   ├── utils/
│   ├── index.ts
│   └── package.json
├── frontend/
│   ├── src/
│   ├── public/
│   ├── index.html
│   ├── vite.config.ts
│   └── package.json
└── package.json

📂 Project Index

SNIPSTER/

__root__

pnpm-lock.yaml - The `pnpm-lock.yaml` file in the project structure serves as a lockfile to manage dependencies and versions for the project
- It ensures that the correct versions of dependencies like husky and lint-staged are installed, maintaining consistency and reproducibility in the codebase architecture.

lint-staged.config.js Configures lint-staged to run ESLint on specific file types in the frontend and backend directories using custom ESLint configurations.

package.json - Manage code linting and formatting using ESLint, Prettier, Husky, and lint-staged
- Ensure consistent code style and quality across the project
- Automatically fix issues and format code on commit
- Improve code maintainability and collaboration.

backend

pnpm-lock.yaml - The `pnpm-lock.yaml` file in the backend directory of the project serves as a lockfile that specifies dependencies and their versions for the backend components
- It ensures that the correct versions of dependencies, such as compression and cookie-parser, are used to maintain consistency and stability in the project's architecture.

tsconfig.json Enforce strict type checking and skip checking declaration files in the TypeScript configuration to ensure consistent code quality and prevent unnecessary type errors throughout the project.

globals.d.ts Enhances Express server functionality by extending the Request interface to include OpenID Connect context, enabling seamless integration with authentication and authorization features.

index.ts - Implements an Express server with various middleware for authentication, security, and request handling
- Defines routes for authentication, snippets, users, and tags, with error handling for unknown routes
- Utilizes rate limiting, CORS, and compression for enhanced performance and security
- Listens on a specified port for incoming requests.

package.json - Manage dependencies and scripts for the Snipster API backend, facilitating development with TypeScript and Node.js
- The file defines dev and build scripts, along with devDependencies and dependencies essential for running and building the project.

eslint.config.js Define ESLint configuration for TypeScript files, enforcing rules like '@typescript-eslint/no-unused-vars'.

config

db.ts - Establishes MongoDB connection for the backend, ensuring seamless data storage and retrieval
- The code in db.ts configures the connection to the specified database URI, enabling the application to interact with the MongoDB database
- This critical functionality is essential for the backend to store and manage data effectively within the project architecture.

controllers

tags.controller.ts - Handles fetching and returning tags data from the database using Express and Mongoose
- The code ensures that authenticated users can access the tags information securely.

snippet.controller.ts - Provides functionality to manage snippets, including fetching counts, retrieving, saving, updating, toggling favorites, moving to folders, and toggling removal status
- Handles user-specific operations like filtering by user, favorite status, and folder
- Implements error handling for various scenarios to ensure data integrity and user experience.

user.controller.ts Retrieves user folders with snippet counts, enhancing data with snippet count information before returning a JSON response.

models

comments.schema.ts - Defines a schema for comments in the backend, linking them to snippets and users
- The schema enforces required fields and includes timestamps
- This code file plays a crucial role in structuring and organizing comments within the project's database architecture.

user.schema.ts - Defines the user schema for the backend, specifying essential fields like auth0Id, username, email, and passwordHash
- Additionally, includes optional fields for avatarUrl and bio
- The schema is designed to be stored in a MongoDB database using Mongoose, ensuring data integrity and timestamps for tracking updates.

snippet.schema.ts - Defines a Mongoose schema for snippets with fields like title, content, and language
- Associates snippets with folders, users, and tags
- Tracks favorites and deletion status.

activity.schema.ts - Defines a schema for activity logs in the database, capturing user actions like creation, editing, deletion, and starring of snippets
- The schema includes references to users and snippets, ensuring data integrity and enabling tracking of user interactions within the system.

folder.schema.ts - Defines a Mongoose schema for folders with name and userId fields, linked to the User model
- Enables creation of Folder model instances with timestamps.

tags.schema.ts - Defines a schema for tags in the backend models, utilizing Mongoose for MongoDB interactions
- The schema includes a required name field and supports an optional userId for personal tags
- The model is exported as "Tag" for database operations.

routes

user.routes.ts - Defines user routes for accessing user data and folders in the backend architecture
- Handles authentication using Express middleware and returns user information if authenticated
- Exposes an endpoint to retrieve user folders
- Facilitates secure communication between the frontend and backend systems.

tags.routes.ts Expose endpoint for retrieving tags data by utilizing Express Router and linking to tags controller.

auth.routes.ts - Defines authentication routes for the backend, enabling user login and logout functionalities
- The code interacts with the Express framework to handle requests related to user authentication
- It leverages environment variables to manage the redirection URLs for login and logout actions, enhancing the security and user experience of the application.

snippet.routes.ts - Defines routes for handling snippet operations such as fetching, saving, updating, and moving snippets to folders
- Also includes endpoints for toggling favorites, soft deleting, and retrieving snippet details and counts
- This file plays a crucial role in structuring the backend API for managing snippets within the project architecture.

utils

withUser.ts - Enables handling requests with user authentication in Express backend
- Retrieves the user ID from the request object and ensures the user is authenticated before executing the provided handler function
- This middleware enhances security by verifying user identity before processing requests.

frontend

prettier.config.js Defines Prettier configuration for the frontend codebase, ensuring consistent code formatting.

tsconfig.node.json - Configures TypeScript compiler options for the project's Node.js environment, enforcing strict type checking and linting rules
- Sets target to ES2023, module to ESNext, and module resolution to bundler mode
- Disables emitting output files and enables erasable syntax
- Includes Vite configuration file for bundler settings.

pnpm-lock.yaml - The `frontend/pnpm-lock.yaml` file in the project structure serves as a lockfile for managing dependencies in the frontend application
- It ensures version consistency and dependency resolution for packages like "@auth0/auth0-react" and "@codemirror/lang-cpp"
- This file plays a crucial role in maintaining a stable and reliable frontend architecture by specifying the exact versions of dependencies required for the project.

tsconfig.json - Defines strict compiler options and path mappings for TypeScript files in the project, ensuring type safety and module resolution
- References configuration files for the application and Node.js environments to maintain consistency across the codebase.

settings.json Enables automatic code formatting and real-time linting status display in the project's code editor.

tsconfig.app.json - Defines TypeScript compiler options for the project, specifying target version, module resolution, and strict linting rules
- Maps module paths for easier imports across the codebase
- Facilitates bundling and ensures type safety and code consistency.

pnpm-workspace.yaml Define built dependencies for the frontend project using TailwindCSS Oxide and esbuild in the pnpm workspace configuration file.

package.json - Manages project dependencies, scripts, and development tools for the frontend
- Handles tasks like building, linting, formatting, and previewing the application
- Integrates various libraries for code editing, UI components, state management, and more
- Configures lint-staged for automated code formatting and linting.

vite.config.ts - Defines Vite configuration for a React project, setting up aliases for key project directories like components, hooks, and services
- Integrates plugins for React and Tailwind CSS
- Organizes project structure for easy import paths and enhances development workflow.

index.html - Defines the main HTML structure for the frontend of the Snipster project, setting up essential elements like the viewport, icon, fonts, and script link
- This file serves as the entry point for the web application, providing the foundation for rendering the user interface and initializing the main TypeScript file.

components.json Define project component aliases and configurations for styling, TypeScript, and icon library in the frontend architecture.

.eslintignore Excludes generated build files, minified JavaScript, and node modules from ESLint checks in the frontend directory to maintain code quality and consistency across the project.

eslint.config.js - Defines ESLint configurations for TypeScript and React projects, enforcing coding standards and best practices
- Integrates plugins for formatting, imports, accessibility, and code quality
- Sets rules for error handling, import organization, and React hooks usage
- Supports ES2020 syntax and browser globals.

src

main.tsx - Initialize the application's main structure by rendering essential providers and components for state management, authentication, and UI elements
- The code sets up the foundation for the React application, ensuring proper data flow and component interactions.

index.css - Define global styles and themes for the frontend UI, including color schemes, typography, shadows, and sidebar styles
- Import Tailwind CSS and custom themes to ensure consistent design across the application
- Set base styles for elements and define color variables for light and dark modes.

App.css - Implements theme toggling functionality with dynamic icon changes based on light or dark mode
- Handles transitions and animations for a seamless user experience.

App.tsx - Enables routing functionality in the frontend by providing a RouterProvider component that utilizes the specified router configuration
- This component is essential for managing navigation within the application and ensuring proper routing behavior based on the defined routes.

AppRouter.tsx - Defines the application routing structure by mapping paths to corresponding components
- Implements lazy loading for improved performance
- Organizes routes for the home, favorite, trash, and folder sections, with detailed views for each
- Handles unknown routes with a "Not found!" message.

vite-env.d.ts - Defines Vite client types for the frontend project, ensuring seamless integration with Vite's development server
- This file plays a crucial role in enabling efficient development workflows by providing necessary type references for Vite-specific client-side functionality.

types

folder.types.ts - Defines the structure of a folder within the project, specifying attributes like ID, name, user ID, and snippet count
- This interface plays a crucial role in maintaining consistency and defining the shape of folder objects used throughout the codebase architecture.

user.types.ts - Defines the structure for a User object with essential properties like authId, email, and picture
- This interface captures key user details for authentication and personalization within the project's frontend architecture.

tag.types.ts Defines the structure for tags used in the frontend, specifying the properties required for each tag.

app.types.ts - Defines the structure for managing snippets within the application, including functions for bulk actions, selection handling, and snippet manipulation
- It also specifies the context for snippet lists, themes, and current page details
- This file plays a crucial role in orchestrating user interactions and data flow related to snippets in the frontend.

snippet.types.ts - Defines data structures for snippets, including title, description, content, and metadata like language and tags
- Also tracks folder organization, user ownership, and favorite status
- Additionally, provides snippet count statistics.

themes

notebook.css - Define color and typography variables for the notebook theme, including background, foreground, card styles, and font families
- Customize shadow effects and spacing for a consistent visual experience
- Apply dark mode variations for a cohesive design across the application.

t3-chat.css Define color and typography variables for a chat interface, enabling consistent styling across the frontend.

claude.css Define color and typography variables for light and dark themes in the project's CSS file.

amethyst-haze.css Define color and typography variables for the Amethyst Haze theme to ensure consistent styling across the frontend components.

bold-tech.css Define color and typography variables for the Bold Tech theme in the frontend, ensuring consistent styling across components.

nature.css Defines color and typography variables for the nature theme, ensuring consistent styling across the frontend components.

elegant-luxury.css Define color and typography variables for an elegant luxury theme in the frontend, enhancing the visual appeal and user experience of the application.

contexts

SnippetListContext.ts Enables creation of a context for managing snippet lists in the frontend architecture.

lib

utils.ts - Provides utility functions for handling class names, formatting relative time, date strings, and capitalizing strings
- The code enhances the frontend by simplifying class merging and date manipulation tasks
- It contributes to a smoother user experience and cleaner codebase architecture.

config

config.ts - Defines project configuration constants for API paths, themes, and supported languages
- Centralizes key values used across the frontend codebase, ensuring consistency and easy maintenance
- Facilitates easy access and modification of these values throughout the application.

routes.config.ts Defines route constants for different pages in the frontend application, facilitating navigation and ensuring consistency across the codebase architecture.

components

Loading.tsx - Generates a loading spinner component with customizable size and styling using Lucide icons
- The component enhances user experience by indicating ongoing processes within the frontend of the project.

Alert.tsx - Define and render various types of alerts with icons and styles based on the provided data
- The code in Alert.tsx component creates customizable alert boxes for different alert types, displaying corresponding icons and colors
- This component enhances user experience by visually communicating different alert levels within the application.

alert-07.tsx - Demonstrates rendering various alert messages with corresponding icons and styles
- Integrates Lucide-React icons and custom alert components to showcase different types of notifications
- Enhances user experience by visually communicating different alert scenarios effectively within the application.

RenderSnippet.tsx - RenderSnippet component displays individual snippets with interactive features like checkboxes, favorites, and deletion options
- It leverages context and state management to handle user interactions efficiently
- This component enhances the user experience by providing dynamic and responsive snippet rendering based on the current page context.

combobox.tsx - Enables interactive selection of options with a search feature and customizable display in a ComboBox component
- Integrates with form management and UI components for seamless user experience.

spinner-05.tsx - Demonstrates various spinner sizes using Lucide-React's Loader2Icon component
- Displays a flex layout with spin animations of different sizes
- This file showcases the visual representation of spinner components within the frontend architecture.

ColorThemeSwitcher.tsx - Enables users to switch color themes in the application interface based on predefined options
- The component integrates a theme selection dropdown menu that dynamically updates the interface theme upon user selection
- This functionality enhances user experience by allowing customization of the visual appearance to suit individual preferences.

ThemeSwitcher.tsx - Implements a theme switcher component that allows users to toggle between light, system, and dark modes
- It leverages icons for visual representation and integrates with the application's theme handling logic
- This component enhances user experience by providing flexibility in choosing preferred visual themes.

Header.tsx - The Header component orchestrates the display of user authentication status, profile information, and theme customization options in the project's UI
- It leverages various UI components and hooks to provide a seamless user experience, including authentication actions like login and logout
- The component encapsulates key user interaction elements within the project's header section.

AppSidebar.tsx - Manages the sidebar content and navigation within the application, displaying platform options and folders with snippet counts
- Updates the current page based on user interaction, facilitating seamless navigation
- Includes features like adding folders and dynamic count updates.

CopyButton.tsx - Implements a Copy Button component that allows users to copy text to the clipboard
- The component provides visual feedback upon successful copying and handles errors gracefully
- This feature enhances user experience by enabling easy sharing and saving of content.

FoldersDropdown.tsx - Implements a dropdown menu component for moving snippets to different folders
- Utilizes Lucide icons, loading indicators, and error alerts
- Fetches folder data and handles folder selection functionality
- Integrates with the SnippetListContext for managing selected snippets.

layout

RootLayout.tsx - Manages the layout of the application, displaying the sidebar, header, and main content
- Handles the display of snippet forms based on user interactions
- Utilizes Redux for state management and custom hooks for fetching data
- Supports a responsive and user-friendly interface for seamless navigation and interaction within the application.

ui

checkbox.tsx - Improve checkbox styling and behavior by integrating with Radix UI and Lucide icons
- The Checkbox component enhances user interaction and accessibility, ensuring a consistent design across the application.

spinner.tsx - Implements a spinner component that displays a loading animation based on size and visibility settings
- The component utilizes class variance authority for managing CSS classes dynamically.

sheet.tsx - Defines reusable components for a sheet UI, including triggers, content, headers, footers, titles, and descriptions
- Manages sheet overlay animations and positioning based on the specified side
- Integrates with Radix UI for dialog functionality.

badge.tsx - Implements a badge component with variant styles for different visual representations
- The component utilizes a utility function for managing variant styles and renders the badge based on specified props.

sidebar.tsx - The code file `sidebar.tsx` in the `frontend/src/components/ui/` directory plays a crucial role in managing the sidebar component of the project
- It handles the display and functionality of the sidebar, including its width, icons, and keyboard shortcuts
- The file integrates various UI components and utilities to create a responsive and interactive sidebar experience for users.

label.tsx - Defines a custom Label component that leverages Radix UI for consistent styling and functionality
- Integrates with React to render labels with specified attributes and classNames
- Maintains a clean and reusable codebase structure within the UI components directory.

scroll-area.tsx - Improve scroll functionality in the UI components by integrating custom scrollbars and viewport management
- This enhances user experience by providing a more interactive and visually appealing way to navigate content within the application.

input.tsx Defines a reusable React input component with dynamic styling and functionality, enhancing user interface consistency and user experience across the project.

textarea.tsx - Defines a reusable React component for text areas with customizable styling and properties
- This component enhances user interface consistency and flexibility within the project's frontend architecture.

separator.tsx - Defines a custom Separator component for the UI, leveraging Radix UI library
- Renders a separator element with specified orientation and decorative styling
- The component's structure and styling are tailored for seamless integration within the project's UI components.

toggle-group.tsx - Implements a toggle group component that manages the state and styling of multiple toggle items within a group
- The component allows for customization of size and variant, providing a cohesive user interface experience for toggle interactions.

command.tsx - Defines reusable UI components for a Command Palette feature, facilitating command search and execution within the application
- The components include Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandSeparator, CommandItem, CommandShortcut
- These components enhance user interaction and provide a seamless experience for navigating and selecting commands.

popover.tsx - Facilitates popover functionality by defining components for trigger, content, and anchor
- Integrates with Radix UI for consistent popover behavior across the codebase architecture.

form.tsx - Facilitates form creation and management within the project by providing essential components like FormItem, FormLabel, FormControl, FormDescription, and FormMessage
- These components streamline the process of building interactive forms by handling form fields, labels, controls, descriptions, and error messages efficiently.

select.tsx - Implements UI components for a select dropdown feature using Radix UI and Lucide icons
- The code defines functions for rendering select options, labels, triggers, and scroll buttons
- It enhances user interaction and visual experience within the frontend component architecture.

button.tsx - Defines button component with various styles and sizes, utilizing class-variance-authority for variant management
- Renders as a button or slot based on 'asChild' prop, enhancing reusability and flexibility in UI design.

toggle.tsx - Defines a customizable toggle component with various visual variants and sizes, enhancing user interaction and accessibility
- The component leverages a robust styling system to ensure consistency and flexibility across the UI elements.

dialog.tsx - Defines reusable UI components for dialogs, including triggers, overlays, content, headers, footers, titles, and descriptions
- Facilitates creating customizable and accessible dialog interfaces within the project's frontend architecture.

alert.tsx - Defines reusable alert components with different visual variants for displaying messages in the user interface
- The components allow customization of alert styles based on the severity of the message
- This enhances the user experience by providing consistent and visually appealing feedback throughout the application.

navigation-menu.tsx - Enables rendering of a customizable navigation menu with various components like menu items, triggers, and content
- Supports dynamic viewport toggling and styling for a seamless user experience.

skeleton.tsx - Defines a reusable UI component for displaying a loading skeleton effect
- The component accepts custom styling and additional props, enhancing the user experience by visually indicating content loading
- This contributes to a more engaging and responsive frontend interface within the project architecture.

switch.tsx Implements a custom switch component using Radix UI for React, enhancing user interface interactions.

dropdown-menu.tsx Implements dropdown menu components for UI interactions within the frontend architecture.

collapsible.tsx - Facilitates collapsible UI components by leveraging Radix UI's Collapsible primitives
- Exports components for Collapsible, CollapsibleTrigger, and CollapsibleContent, enhancing the project's UI flexibility and interactivity.

avatar.tsx - Defines reusable Avatar components for displaying user profile images with fallback options
- The components leverage Radix UI for consistent styling and functionality across the codebase.

multiselect.tsx - The code file `multiselect.tsx` in the `frontend/src/components/ui/` directory is responsible for implementing a multiple selection UI component in the project
- It allows users to select multiple options from a list, with features such as loading indicators, debounce time for search, and fixed options
- This component enhances the user experience by providing a flexible and interactive way to manage selections within the application.

tooltip.tsx - Implements tooltip functionality for React components using Radix UI library
- Provides components for tooltip trigger, content, and provider with customizable delay and styling options
- Facilitates seamless integration of tooltips within the frontend architecture.

card.tsx - Defines reusable UI components for cards with header, title, description, action, content, and footer sections
- These components enhance the user interface by providing structured and consistent card layouts for displaying information.

hooks

use-mobile.ts - Enables responsive design by determining if the user's device is mobile
- The code utilizes a specific breakpoint to adjust layout and functionality accordingly.

useTheme.ts - Enables dynamic theming based on user preferences and system settings
- Manages theme selection, mode switching, and theme application
- Utilizes local storage and media queries for seamless theme transitions
- Facilitates a user-friendly interface with theme toggle functionality.

useAuth.ts - Enables authentication handling by fetching user data, managing loading states, and providing login, signup, and logout functions
- Integrates with Redux for state management and React for UI interactions
- Facilitates seamless user authentication within the frontend application.

tags

useGetTags.ts - Enables fetching and transforming tag data for UI consumption
- Integrates with the project's tag services to provide a structured list of tags with labels and values
- This hook abstracts the logic for retrieving and formatting tag information, enhancing the frontend's efficiency and maintainability.

user

useGetFolders.ts - Enables fetching user folders data using a custom hook that leverages React Query
- The code abstracts the logic for making API calls and handling responses, enhancing codebase modularity and maintainability.

snippets

useToggleFavorite.ts - Enables toggling favorite status for snippets, updating related data in the query cache, and handling errors gracefully
- Facilitates seamless management of snippet favorites and associated counts within the application's data flow.

useAddSnippet.ts - Enables adding snippets to the application by utilizing React Query for data management
- Handles successful and failed snippet addition scenarios, displaying appropriate toast notifications
- Invalidates the snippets query cache upon successful addition.

useGetSnippets.ts Enables fetching snippets based on user-defined criteria, enhancing data retrieval efficiency within the codebase architecture.

useMoveToFolder.ts Enables moving snippets to different folders, updating related data across multiple query keys, and managing snippet counts within the project's architecture.

useGetCounts.ts - Enables fetching snippet counts using a custom hook that leverages Tanstack's React Query
- The hook queries snippet counts from the backend service and returns the data for consumption in the frontend
- This functionality enhances the codebase by providing a seamless way to retrieve and display snippet counts in the application.

useToggleRemove.ts - Manages toggling removal of snippets, updating query cache accordingly
- Handles moving snippets between lists, updating counts, and reverting changes on error
- Utilizes React Query for mutation and toast notifications for error handling
- Enhances user experience by ensuring data consistency and providing feedback.

useUpdateSnippet.ts - Enables updating snippets with real-time feedback and error handling
- Utilizes React Query for efficient data management and React Toastify for user notifications
- Invalidates relevant queries upon successful update
- Promotes a seamless user experience by providing immediate feedback on snippet updates.

useGetSnippetDetails.ts Enables fetching snippet details based on ID using React Query and a snippet service.

providers

AuthProvider.tsx Enables authentication using Auth0 in the frontend by providing necessary configuration parameters.

ToastProvider.tsx - Defines a ToastProvider component that renders a ToastContainer from react-toastify
- The component configures the toast notifications to appear at the top-right with a colored theme, without progress bars, and with draggable functionality.

ReactQueryProvider.tsx - Enables React components to access and manage API data using @tanstack/react-query
- Initializes a QueryClient with default options for caching and retry behavior
- Integrates the QueryClientProvider to wrap child components, facilitating seamless data fetching and management within the application.

SnippetListProvider.tsx - Manages state and actions for snippets in the frontend, including toggling favorites, deleting, and moving to folders
- Handles bulk actions and selection of snippets based on the current page
- Provides context for snippet-related operations within the application.

ReduxProvider.tsx - Facilitates Redux state management in React components by providing the Redux store through a Provider component
- This file plays a crucial role in integrating Redux with the frontend components, ensuring seamless access to the global state across the application.

pages

Folder

Folder.tsx - Handles fetching and displaying snippets for a specific folder in the project
- Utilizes React Router to get the folder ID and a custom hook to fetch snippets based on the folder ID
- Renders a list of snippets with loading and error handling
- This component plays a key role in displaying folder-specific content within the application.

SnippetDetails

DetailsLoading.tsx Generates a loading skeleton for snippet details display in the frontend, enhancing user experience by providing visual feedback during data loading.

SnipeptDetails.view.tsx - Displays detailed information about a snippet, including title, description, tags, and creation/update dates
- Allows users to favorite, update, and delete snippets
- Renders code content with syntax highlighting and copy functionality
- Handles loading and error states gracefully
- Enhances user experience with animations and interactive elements.

SnippetDetails.tsx - Handles displaying and managing details of a specific code snippet
- Utilizes React hooks and Redux for state management
- Retrieves snippet details, toggles favorite status, and removes snippet
- Updates snippet state and renders the snippet details view accordingly.

SnippetList

SnippetList.tsx - Manages the display of snippets based on type, loading status, and errors
- Renders snippets with animations and provides actions for each snippet
- Allows selection of a snippet to view details, with error handling and informative alerts
- Integrates with external components and providers for a seamless user experience.

components

ActioButtons.tsx - Manages interactive actions for snippets, including bulk operations like favoriting, deleting, and restoring
- Dynamically adjusts UI elements based on user selection and current page context
- Facilitates snippet addition and manipulation through intuitive button interactions
- Enhances user experience by providing seamless snippet management functionalities within the application.

Platform

Platform.tsx - Enables rendering of a platform page displaying snippets based on the URL type parameter
- Retrieves snippets using a custom hook and populates the page with a loading indicator, error message, and the snippet list
- The code dynamically adjusts to different types of snippets based on the URL path.

SnippetForm

SnippetForm.view.tsx - The SnippetFormView component facilitates creating and updating code snippets within the project
- It integrates form handling, input validation, and code editing functionalities, providing a seamless user experience for managing snippets
- This component plays a crucial role in the project's architecture by enabling users to interact with and store code snippets efficiently.

SnippetForm.tsx - Manages form submission and state for snippets, including tags, folders, and editor reference
- Utilizes Redux for state management and integrates with various custom hooks for fetching data and mutations
- Handles both adding and updating snippets based on form values, triggering corresponding actions upon success or error.

schema

snippet.schema.ts - Define a schema for snippets with validation rules for id, title, description, folder, tags, language, and content
- The schema ensures data integrity and consistency for snippet objects within the project architecture.

store

index.ts - Manages Redux store configuration by combining reducers for app and authentication slices
- Defines the root state and dispatch types for the store.

auth

authSelectors.ts Enables selection of authenticated user and user ID from the Redux store, enhancing access to user authentication data across the frontend application.

authSlice.ts - Defines authentication state management with Redux toolkit, storing user data and providing actions to set or clear the user
- The authSlice file encapsulates the logic for handling user authentication within the frontend architecture, ensuring seamless user authentication and state management.

app

appSlice.ts - Defines Redux slice for managing app state, including current page and snippet form status
- Handles actions to set current page and toggle snippet form visibility
- Crucial for maintaining UI state in the frontend, enhancing user experience, and ensuring seamless interaction with the application.

utils

queryCache.utils.ts - Implement functions to update, remove, add, and move snippets within the query cache
- These utilities facilitate managing snippet data in different query keys, enabling seamless manipulation and organization of snippet information in the application.

getCodeMirrorExtension.util.tsx Retrieve CodeMirror language extensions dynamically based on the specified language, allowing for syntax highlighting and language-specific features in the code editor.

url.utils.ts Generates snippet detail URLs based on specified parameters, ensuring proper navigation within the project's frontend architecture.

services

axios.service.ts - Enables communication with the backend API by creating an Axios instance with specified configurations
- Handles requests and responses, including intercepting and processing errors such as session expiration
- Maintains stateful communication with the server to ensure seamless data exchange between the frontend and backend components of the project.

snippet.service.ts - Handles various API requests related to snippets, including fetching counts, snippets by user, toggling favorites, removing snippets, getting details, adding, updating, and moving snippets to folders
- Utilizes axios for HTTP requests and zod for schema validation
- Contributes to the frontend's functionality by interacting with the backend API seamlessly.

tags.services.tsx Retrieve tags data from the API base path using axiosInstance and configuration settings.

user.services.ts - Retrieve user and folder data from the API using axiosInstance for seamless integration with the frontend
- The code in user.services.ts defines functions to fetch the authenticated user and user folders, enhancing the project's functionality and user experience.

.vite

deps

package.json Enables ES module support for the frontend build process.

_metadata.json - Manages metadata for frontend dependencies in the Vite build system, ensuring accurate tracking of file hashes and configuration details
- This file plays a crucial role in optimizing and organizing chunks for efficient browser loading within the project architecture.

.husky

pre-commit - Enforces linting on staged files before committing changes, ensuring code quality and consistency
- This pre-commit hook is a crucial part of the project's architecture, maintaining clean code standards across the codebase.

🚀 Getting Started

☑️ Prerequisites

Node.js (v18+ recommended)
pnpm (or npm/yarn)
MongoDB (local or MongoDB Atlas)

⚙️ Installation & Running

1️⃣ Clone the Repository

git clone https://github.com/amitpatil321/snipster.git
cd snipster

2️⃣ Backend Setup

cd backend
pnpm install

Create a .env file:

API_URL=API_ENDPOINT_URL
PORT=APPLICATION_PORT
DB_URI=MONGODB_URL
REACT_APP_URL=REACT_APPLICATION_URL

AUTH0_SECRET: YOUR_AUTH0_SECRET
AUTH0_CLIENT_ID: YOUR_AUTH0_CLIENT_ID
AUTH0_ISSUER_BASE_URL: YOUR_AUTH0_ISSUER_BASE_URL
AUTH0_CLIENT_SECRET: RANDOM_SECRET_STRING

Run the backend server:

pnpm run dev

3️⃣ Frontend Setup

cd ../frontend
pnpm install

Create .env file

VITE_API_BASE=BACKEND_API_ENDPOINT_URL
PORT=PORT

Run frontend

pnpm run dev

🤖 Usage

Access the app in your browser at:

http://localhost:5173

💄 Adding New Theme

Choose a desired theme from tweakcn.com (or another source).
Copy the CSS code for that theme.
Save the CSS file in frontend/src/themes.
Rename :root to .theme-name and .theme-name.dark.
Add the theme’s font to index.html.
Add the theme name to the THEMES array in src/config/config.ts.
Import the newly added CSS file into index.css.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

Snipster

🔗 Table of Contents

📍 Overview

📸 Screenshots

🌟 Features

🧩 BFF (Backend for Frontend) Architecture

📁 Project Structure

📂 Project Index

🚀 Getting Started

☑️ Prerequisites

⚙️ Installation & Running

1️⃣ Clone the Repository

2️⃣ Backend Setup

3️⃣ Frontend Setup

🤖 Usage

💄 Adding New Theme

📌 Project Roadmap

🔰 Contributing

Steps:

🎗 License

About

Uh oh!

Releases

Packages

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 180 Commits
.github		.github
.husky		.husky
backend		backend
frontend		frontend
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
dark.png		dark.png
home.png		home.png
lint-staged.config.js		lint-staged.config.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
theme.png		theme.png

pnpm-lock.yaml	- The `pnpm-lock.yaml` file in the project structure serves as a lockfile to manage dependencies and versions for the project - It ensures that the correct versions of dependencies like husky and lint-staged are installed, maintaining consistency and reproducibility in the codebase architecture.
lint-staged.config.js	Configures lint-staged to run ESLint on specific file types in the frontend and backend directories using custom ESLint configurations.
package.json	- Manage code linting and formatting using ESLint, Prettier, Husky, and lint-staged - Ensure consistent code style and quality across the project - Automatically fix issues and format code on commit - Improve code maintainability and collaboration.

pnpm-lock.yaml	- The `pnpm-lock.yaml` file in the backend directory of the project serves as a lockfile that specifies dependencies and their versions for the backend components - It ensures that the correct versions of dependencies, such as compression and cookie-parser, are used to maintain consistency and stability in the project's architecture.
tsconfig.json	Enforce strict type checking and skip checking declaration files in the TypeScript configuration to ensure consistent code quality and prevent unnecessary type errors throughout the project.
globals.d.ts	Enhances Express server functionality by extending the Request interface to include OpenID Connect context, enabling seamless integration with authentication and authorization features.
index.ts	- Implements an Express server with various middleware for authentication, security, and request handling - Defines routes for authentication, snippets, users, and tags, with error handling for unknown routes - Utilizes rate limiting, CORS, and compression for enhanced performance and security - Listens on a specified port for incoming requests.
package.json	- Manage dependencies and scripts for the Snipster API backend, facilitating development with TypeScript and Node.js - The file defines dev and build scripts, along with devDependencies and dependencies essential for running and building the project.
eslint.config.js	Define ESLint configuration for TypeScript files, enforcing rules like '@typescript-eslint/no-unused-vars'.

tags.controller.ts	- Handles fetching and returning tags data from the database using Express and Mongoose - The code ensures that authenticated users can access the tags information securely.
snippet.controller.ts	- Provides functionality to manage snippets, including fetching counts, retrieving, saving, updating, toggling favorites, moving to folders, and toggling removal status - Handles user-specific operations like filtering by user, favorite status, and folder - Implements error handling for various scenarios to ensure data integrity and user experience.
user.controller.ts	Retrieves user folders with snippet counts, enhancing data with snippet count information before returning a JSON response.

comments.schema.ts	- Defines a schema for comments in the backend, linking them to snippets and users - The schema enforces required fields and includes timestamps - This code file plays a crucial role in structuring and organizing comments within the project's database architecture.
user.schema.ts	- Defines the user schema for the backend, specifying essential fields like auth0Id, username, email, and passwordHash - Additionally, includes optional fields for avatarUrl and bio - The schema is designed to be stored in a MongoDB database using Mongoose, ensuring data integrity and timestamps for tracking updates.
snippet.schema.ts	- Defines a Mongoose schema for snippets with fields like title, content, and language - Associates snippets with folders, users, and tags - Tracks favorites and deletion status.
activity.schema.ts	- Defines a schema for activity logs in the database, capturing user actions like creation, editing, deletion, and starring of snippets - The schema includes references to users and snippets, ensuring data integrity and enabling tracking of user interactions within the system.
folder.schema.ts	- Defines a Mongoose schema for folders with name and userId fields, linked to the User model - Enables creation of Folder model instances with timestamps.
tags.schema.ts	- Defines a schema for tags in the backend models, utilizing Mongoose for MongoDB interactions - The schema includes a required name field and supports an optional userId for personal tags - The model is exported as "Tag" for database operations.

user.routes.ts	- Defines user routes for accessing user data and folders in the backend architecture - Handles authentication using Express middleware and returns user information if authenticated - Exposes an endpoint to retrieve user folders - Facilitates secure communication between the frontend and backend systems.
tags.routes.ts	Expose endpoint for retrieving tags data by utilizing Express Router and linking to tags controller.
auth.routes.ts	- Defines authentication routes for the backend, enabling user login and logout functionalities - The code interacts with the Express framework to handle requests related to user authentication - It leverages environment variables to manage the redirection URLs for login and logout actions, enhancing the security and user experience of the application.
snippet.routes.ts	- Defines routes for handling snippet operations such as fetching, saving, updating, and moving snippets to folders - Also includes endpoints for toggling favorites, soft deleting, and retrieving snippet details and counts - This file plays a crucial role in structuring the backend API for managing snippets within the project architecture.

prettier.config.js	Defines Prettier configuration for the frontend codebase, ensuring consistent code formatting.
tsconfig.node.json	- Configures TypeScript compiler options for the project's Node.js environment, enforcing strict type checking and linting rules - Sets target to ES2023, module to ESNext, and module resolution to bundler mode - Disables emitting output files and enables erasable syntax - Includes Vite configuration file for bundler settings.
pnpm-lock.yaml	- The `frontend/pnpm-lock.yaml` file in the project structure serves as a lockfile for managing dependencies in the frontend application - It ensures version consistency and dependency resolution for packages like "@auth0/auth0-react" and "@codemirror/lang-cpp" - This file plays a crucial role in maintaining a stable and reliable frontend architecture by specifying the exact versions of dependencies required for the project.
tsconfig.json	- Defines strict compiler options and path mappings for TypeScript files in the project, ensuring type safety and module resolution - References configuration files for the application and Node.js environments to maintain consistency across the codebase.
settings.json	Enables automatic code formatting and real-time linting status display in the project's code editor.
tsconfig.app.json	- Defines TypeScript compiler options for the project, specifying target version, module resolution, and strict linting rules - Maps module paths for easier imports across the codebase - Facilitates bundling and ensures type safety and code consistency.
pnpm-workspace.yaml	Define built dependencies for the frontend project using TailwindCSS Oxide and esbuild in the pnpm workspace configuration file.
package.json	- Manages project dependencies, scripts, and development tools for the frontend - Handles tasks like building, linting, formatting, and previewing the application - Integrates various libraries for code editing, UI components, state management, and more - Configures lint-staged for automated code formatting and linting.
vite.config.ts	- Defines Vite configuration for a React project, setting up aliases for key project directories like components, hooks, and services - Integrates plugins for React and Tailwind CSS - Organizes project structure for easy import paths and enhances development workflow.
index.html	- Defines the main HTML structure for the frontend of the Snipster project, setting up essential elements like the viewport, icon, fonts, and script link - This file serves as the entry point for the web application, providing the foundation for rendering the user interface and initializing the main TypeScript file.
components.json	Define project component aliases and configurations for styling, TypeScript, and icon library in the frontend architecture.
.eslintignore	Excludes generated build files, minified JavaScript, and node modules from ESLint checks in the frontend directory to maintain code quality and consistency across the project.
eslint.config.js	- Defines ESLint configurations for TypeScript and React projects, enforcing coding standards and best practices - Integrates plugins for formatting, imports, accessibility, and code quality - Sets rules for error handling, import organization, and React hooks usage - Supports ES2020 syntax and browser globals.

main.tsx	- Initialize the application's main structure by rendering essential providers and components for state management, authentication, and UI elements - The code sets up the foundation for the React application, ensuring proper data flow and component interactions.
index.css	- Define global styles and themes for the frontend UI, including color schemes, typography, shadows, and sidebar styles - Import Tailwind CSS and custom themes to ensure consistent design across the application - Set base styles for elements and define color variables for light and dark modes.
App.css	- Implements theme toggling functionality with dynamic icon changes based on light or dark mode - Handles transitions and animations for a seamless user experience.
App.tsx	- Enables routing functionality in the frontend by providing a RouterProvider component that utilizes the specified router configuration - This component is essential for managing navigation within the application and ensuring proper routing behavior based on the defined routes.
AppRouter.tsx	- Defines the application routing structure by mapping paths to corresponding components - Implements lazy loading for improved performance - Organizes routes for the home, favorite, trash, and folder sections, with detailed views for each - Handles unknown routes with a "Not found!" message.
vite-env.d.ts	- Defines Vite client types for the frontend project, ensuring seamless integration with Vite's development server - This file plays a crucial role in enabling efficient development workflows by providing necessary type references for Vite-specific client-side functionality.

folder.types.ts	- Defines the structure of a folder within the project, specifying attributes like ID, name, user ID, and snippet count - This interface plays a crucial role in maintaining consistency and defining the shape of folder objects used throughout the codebase architecture.
user.types.ts	- Defines the structure for a User object with essential properties like authId, email, and picture - This interface captures key user details for authentication and personalization within the project's frontend architecture.
tag.types.ts	Defines the structure for tags used in the frontend, specifying the properties required for each tag.
app.types.ts	- Defines the structure for managing snippets within the application, including functions for bulk actions, selection handling, and snippet manipulation - It also specifies the context for snippet lists, themes, and current page details - This file plays a crucial role in orchestrating user interactions and data flow related to snippets in the frontend.
snippet.types.ts	- Defines data structures for snippets, including title, description, content, and metadata like language and tags - Also tracks folder organization, user ownership, and favorite status - Additionally, provides snippet count statistics.

notebook.css	- Define color and typography variables for the notebook theme, including background, foreground, card styles, and font families - Customize shadow effects and spacing for a consistent visual experience - Apply dark mode variations for a cohesive design across the application.
t3-chat.css	Define color and typography variables for a chat interface, enabling consistent styling across the frontend.
claude.css	Define color and typography variables for light and dark themes in the project's CSS file.
amethyst-haze.css	Define color and typography variables for the Amethyst Haze theme to ensure consistent styling across the frontend components.
bold-tech.css	Define color and typography variables for the Bold Tech theme in the frontend, ensuring consistent styling across components.
nature.css	Defines color and typography variables for the nature theme, ensuring consistent styling across the frontend components.
elegant-luxury.css	Define color and typography variables for an elegant luxury theme in the frontend, enhancing the visual appeal and user experience of the application.

config.ts	- Defines project configuration constants for API paths, themes, and supported languages - Centralizes key values used across the frontend codebase, ensuring consistency and easy maintenance - Facilitates easy access and modification of these values throughout the application.
routes.config.ts	Defines route constants for different pages in the frontend application, facilitating navigation and ensuring consistency across the codebase architecture.

Loading.tsx	- Generates a loading spinner component with customizable size and styling using Lucide icons - The component enhances user experience by indicating ongoing processes within the frontend of the project.
Alert.tsx	- Define and render various types of alerts with icons and styles based on the provided data - The code in Alert.tsx component creates customizable alert boxes for different alert types, displaying corresponding icons and colors - This component enhances user experience by visually communicating different alert levels within the application.
alert-07.tsx	- Demonstrates rendering various alert messages with corresponding icons and styles - Integrates Lucide-React icons and custom alert components to showcase different types of notifications - Enhances user experience by visually communicating different alert scenarios effectively within the application.
RenderSnippet.tsx	- RenderSnippet component displays individual snippets with interactive features like checkboxes, favorites, and deletion options - It leverages context and state management to handle user interactions efficiently - This component enhances the user experience by providing dynamic and responsive snippet rendering based on the current page context.
combobox.tsx	- Enables interactive selection of options with a search feature and customizable display in a ComboBox component - Integrates with form management and UI components for seamless user experience.
spinner-05.tsx	- Demonstrates various spinner sizes using Lucide-React's Loader2Icon component - Displays a flex layout with spin animations of different sizes - This file showcases the visual representation of spinner components within the frontend architecture.
ColorThemeSwitcher.tsx	- Enables users to switch color themes in the application interface based on predefined options - The component integrates a theme selection dropdown menu that dynamically updates the interface theme upon user selection - This functionality enhances user experience by allowing customization of the visual appearance to suit individual preferences.
ThemeSwitcher.tsx	- Implements a theme switcher component that allows users to toggle between light, system, and dark modes - It leverages icons for visual representation and integrates with the application's theme handling logic - This component enhances user experience by providing flexibility in choosing preferred visual themes.
Header.tsx	- The Header component orchestrates the display of user authentication status, profile information, and theme customization options in the project's UI - It leverages various UI components and hooks to provide a seamless user experience, including authentication actions like login and logout - The component encapsulates key user interaction elements within the project's header section.
AppSidebar.tsx	- Manages the sidebar content and navigation within the application, displaying platform options and folders with snippet counts - Updates the current page based on user interaction, facilitating seamless navigation - Includes features like adding folders and dynamic count updates.
CopyButton.tsx	- Implements a Copy Button component that allows users to copy text to the clipboard - The component provides visual feedback upon successful copying and handles errors gracefully - This feature enhances user experience by enabling easy sharing and saving of content.
FoldersDropdown.tsx	- Implements a dropdown menu component for moving snippets to different folders - Utilizes Lucide icons, loading indicators, and error alerts - Fetches folder data and handles folder selection functionality - Integrates with the SnippetListContext for managing selected snippets.

checkbox.tsx	- Improve checkbox styling and behavior by integrating with Radix UI and Lucide icons - The Checkbox component enhances user interaction and accessibility, ensuring a consistent design across the application.
spinner.tsx	- Implements a spinner component that displays a loading animation based on size and visibility settings - The component utilizes class variance authority for managing CSS classes dynamically.
sheet.tsx	- Defines reusable components for a sheet UI, including triggers, content, headers, footers, titles, and descriptions - Manages sheet overlay animations and positioning based on the specified side - Integrates with Radix UI for dialog functionality.
badge.tsx	- Implements a badge component with variant styles for different visual representations - The component utilizes a utility function for managing variant styles and renders the badge based on specified props.
sidebar.tsx	- The code file `sidebar.tsx` in the `frontend/src/components/ui/` directory plays a crucial role in managing the sidebar component of the project - It handles the display and functionality of the sidebar, including its width, icons, and keyboard shortcuts - The file integrates various UI components and utilities to create a responsive and interactive sidebar experience for users.
label.tsx	- Defines a custom Label component that leverages Radix UI for consistent styling and functionality - Integrates with React to render labels with specified attributes and classNames - Maintains a clean and reusable codebase structure within the UI components directory.
scroll-area.tsx	- Improve scroll functionality in the UI components by integrating custom scrollbars and viewport management - This enhances user experience by providing a more interactive and visually appealing way to navigate content within the application.
input.tsx	Defines a reusable React input component with dynamic styling and functionality, enhancing user interface consistency and user experience across the project.
textarea.tsx	- Defines a reusable React component for text areas with customizable styling and properties - This component enhances user interface consistency and flexibility within the project's frontend architecture.
separator.tsx	- Defines a custom Separator component for the UI, leveraging Radix UI library - Renders a separator element with specified orientation and decorative styling - The component's structure and styling are tailored for seamless integration within the project's UI components.
toggle-group.tsx	- Implements a toggle group component that manages the state and styling of multiple toggle items within a group - The component allows for customization of size and variant, providing a cohesive user interface experience for toggle interactions.
command.tsx	- Defines reusable UI components for a Command Palette feature, facilitating command search and execution within the application - The components include Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandSeparator, CommandItem, CommandShortcut - These components enhance user interaction and provide a seamless experience for navigating and selecting commands.
popover.tsx	- Facilitates popover functionality by defining components for trigger, content, and anchor - Integrates with Radix UI for consistent popover behavior across the codebase architecture.
form.tsx	- Facilitates form creation and management within the project by providing essential components like FormItem, FormLabel, FormControl, FormDescription, and FormMessage - These components streamline the process of building interactive forms by handling form fields, labels, controls, descriptions, and error messages efficiently.
select.tsx	- Implements UI components for a select dropdown feature using Radix UI and Lucide icons - The code defines functions for rendering select options, labels, triggers, and scroll buttons - It enhances user interaction and visual experience within the frontend component architecture.
button.tsx	- Defines button component with various styles and sizes, utilizing class-variance-authority for variant management - Renders as a button or slot based on 'asChild' prop, enhancing reusability and flexibility in UI design.
toggle.tsx	- Defines a customizable toggle component with various visual variants and sizes, enhancing user interaction and accessibility - The component leverages a robust styling system to ensure consistency and flexibility across the UI elements.
dialog.tsx	- Defines reusable UI components for dialogs, including triggers, overlays, content, headers, footers, titles, and descriptions - Facilitates creating customizable and accessible dialog interfaces within the project's frontend architecture.
alert.tsx	- Defines reusable alert components with different visual variants for displaying messages in the user interface - The components allow customization of alert styles based on the severity of the message - This enhances the user experience by providing consistent and visually appealing feedback throughout the application.
navigation-menu.tsx	- Enables rendering of a customizable navigation menu with various components like menu items, triggers, and content - Supports dynamic viewport toggling and styling for a seamless user experience.
skeleton.tsx	- Defines a reusable UI component for displaying a loading skeleton effect - The component accepts custom styling and additional props, enhancing the user experience by visually indicating content loading - This contributes to a more engaging and responsive frontend interface within the project architecture.
switch.tsx	Implements a custom switch component using Radix UI for React, enhancing user interface interactions.
dropdown-menu.tsx	Implements dropdown menu components for UI interactions within the frontend architecture.
collapsible.tsx	- Facilitates collapsible UI components by leveraging Radix UI's Collapsible primitives - Exports components for Collapsible, CollapsibleTrigger, and CollapsibleContent, enhancing the project's UI flexibility and interactivity.
avatar.tsx	- Defines reusable Avatar components for displaying user profile images with fallback options - The components leverage Radix UI for consistent styling and functionality across the codebase.
multiselect.tsx	- The code file `multiselect.tsx` in the `frontend/src/components/ui/` directory is responsible for implementing a multiple selection UI component in the project - It allows users to select multiple options from a list, with features such as loading indicators, debounce time for search, and fixed options - This component enhances the user experience by providing a flexible and interactive way to manage selections within the application.
tooltip.tsx	- Implements tooltip functionality for React components using Radix UI library - Provides components for tooltip trigger, content, and provider with customizable delay and styling options - Facilitates seamless integration of tooltips within the frontend architecture.
card.tsx	- Defines reusable UI components for cards with header, title, description, action, content, and footer sections - These components enhance the user interface by providing structured and consistent card layouts for displaying information.

use-mobile.ts	- Enables responsive design by determining if the user's device is mobile - The code utilizes a specific breakpoint to adjust layout and functionality accordingly.
useTheme.ts	- Enables dynamic theming based on user preferences and system settings - Manages theme selection, mode switching, and theme application - Utilizes local storage and media queries for seamless theme transitions - Facilitates a user-friendly interface with theme toggle functionality.
useAuth.ts	- Enables authentication handling by fetching user data, managing loading states, and providing login, signup, and logout functions - Integrates with Redux for state management and React for UI interactions - Facilitates seamless user authentication within the frontend application.

useToggleFavorite.ts	- Enables toggling favorite status for snippets, updating related data in the query cache, and handling errors gracefully - Facilitates seamless management of snippet favorites and associated counts within the application's data flow.
useAddSnippet.ts	- Enables adding snippets to the application by utilizing React Query for data management - Handles successful and failed snippet addition scenarios, displaying appropriate toast notifications - Invalidates the snippets query cache upon successful addition.
useGetSnippets.ts	Enables fetching snippets based on user-defined criteria, enhancing data retrieval efficiency within the codebase architecture.
useMoveToFolder.ts	Enables moving snippets to different folders, updating related data across multiple query keys, and managing snippet counts within the project's architecture.
useGetCounts.ts	- Enables fetching snippet counts using a custom hook that leverages Tanstack's React Query - The hook queries snippet counts from the backend service and returns the data for consumption in the frontend - This functionality enhances the codebase by providing a seamless way to retrieve and display snippet counts in the application.
useToggleRemove.ts	- Manages toggling removal of snippets, updating query cache accordingly - Handles moving snippets between lists, updating counts, and reverting changes on error - Utilizes React Query for mutation and toast notifications for error handling - Enhances user experience by ensuring data consistency and providing feedback.
useUpdateSnippet.ts	- Enables updating snippets with real-time feedback and error handling - Utilizes React Query for efficient data management and React Toastify for user notifications - Invalidates relevant queries upon successful update - Promotes a seamless user experience by providing immediate feedback on snippet updates.
useGetSnippetDetails.ts	Enables fetching snippet details based on ID using React Query and a snippet service.

AuthProvider.tsx	Enables authentication using Auth0 in the frontend by providing necessary configuration parameters.
ToastProvider.tsx	- Defines a ToastProvider component that renders a ToastContainer from react-toastify - The component configures the toast notifications to appear at the top-right with a colored theme, without progress bars, and with draggable functionality.
ReactQueryProvider.tsx	- Enables React components to access and manage API data using @tanstack/react-query - Initializes a QueryClient with default options for caching and retry behavior - Integrates the QueryClientProvider to wrap child components, facilitating seamless data fetching and management within the application.
SnippetListProvider.tsx	- Manages state and actions for snippets in the frontend, including toggling favorites, deleting, and moving to folders - Handles bulk actions and selection of snippets based on the current page - Provides context for snippet-related operations within the application.
ReduxProvider.tsx	- Facilitates Redux state management in React components by providing the Redux store through a Provider component - This file plays a crucial role in integrating Redux with the frontend components, ensuring seamless access to the global state across the application.

DetailsLoading.tsx	Generates a loading skeleton for snippet details display in the frontend, enhancing user experience by providing visual feedback during data loading.
SnipeptDetails.view.tsx	- Displays detailed information about a snippet, including title, description, tags, and creation/update dates - Allows users to favorite, update, and delete snippets - Renders code content with syntax highlighting and copy functionality - Handles loading and error states gracefully - Enhances user experience with animations and interactive elements.
SnippetDetails.tsx	- Handles displaying and managing details of a specific code snippet - Utilizes React hooks and Redux for state management - Retrieves snippet details, toggles favorite status, and removes snippet - Updates snippet state and renders the snippet details view accordingly.

SnippetForm.view.tsx	- The SnippetFormView component facilitates creating and updating code snippets within the project - It integrates form handling, input validation, and code editing functionalities, providing a seamless user experience for managing snippets - This component plays a crucial role in the project's architecture by enabling users to interact with and store code snippets efficiently.
SnippetForm.tsx	- Manages form submission and state for snippets, including tags, folders, and editor reference - Utilizes Redux for state management and integrates with various custom hooks for fetching data and mutations - Handles both adding and updating snippets based on form values, triggering corresponding actions upon success or error.

authSelectors.ts	Enables selection of authenticated user and user ID from the Redux store, enhancing access to user authentication data across the frontend application.
authSlice.ts	- Defines authentication state management with Redux toolkit, storing user data and providing actions to set or clear the user - The authSlice file encapsulates the logic for handling user authentication within the frontend architecture, ensuring seamless user authentication and state management.

queryCache.utils.ts	- Implement functions to update, remove, add, and move snippets within the query cache - These utilities facilitate managing snippet data in different query keys, enabling seamless manipulation and organization of snippet information in the application.
getCodeMirrorExtension.util.tsx	Retrieve CodeMirror language extensions dynamically based on the specified language, allowing for syntax highlighting and language-specific features in the code editor.
url.utils.ts	Generates snippet detail URLs based on specified parameters, ensuring proper navigation within the project's frontend architecture.

License

amitpatil321/Snipster

Folders and files

Latest commit

History

Repository files navigation

Snipster

🔗 Table of Contents

📍 Overview

📸 Screenshots

🌟 Features

🧩 BFF (Backend for Frontend) Architecture

📁 Project Structure

📂 Project Index

🚀 Getting Started

☑️ Prerequisites

⚙️ Installation & Running

1️⃣ Clone the Repository

2️⃣ Backend Setup

3️⃣ Frontend Setup

🤖 Usage

💄 Adding New Theme

📌 Project Roadmap

🔰 Contributing

Steps:

🎗 License

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages

axios.service.ts	- Enables communication with the backend API by creating an Axios instance with specified configurations - Handles requests and responses, including intercepting and processing errors such as session expiration - Maintains stateful communication with the server to ensure seamless data exchange between the frontend and backend components of the project.
snippet.service.ts	- Handles various API requests related to snippets, including fetching counts, snippets by user, toggling favorites, removing snippets, getting details, adding, updating, and moving snippets to folders - Utilizes axios for HTTP requests and zod for schema validation - Contributes to the frontend's functionality by interacting with the backend API seamlessly.
tags.services.tsx	Retrieve tags data from the API base path using axiosInstance and configuration settings.
user.services.ts	- Retrieve user and folder data from the API using axiosInstance for seamless integration with the frontend - The code in user.services.ts defines functions to fetch the authenticated user and user folders, enhancing the project's functionality and user experience.

package.json	Enables ES module support for the frontend build process.
_metadata.json	- Manages metadata for frontend dependencies in the Vite build system, ensuring accurate tracking of file hashes and configuration details - This file plays a crucial role in optimizing and organizing chunks for efficient browser loading within the project architecture.