Bookly - React + Express + JWT

Ce projet est une application de gestion de projets et de documents inspirée de Notion. Elle utilise React pour le front-end, Express pour le back-end, et JWT (JSON Web Tokens) pour la gestion de l'authentification.

Built with the tools and technologies:

Features

	Component	Details
⚙️	Architecture	Microservices architecture Backend: Node.js with Express Frontend: React with TypeScript Database: SQLite via Prisma
🔩	Code Quality	TypeScript for type safety ESLint for linting Prettier for code formatting Modular code structure
📄	Documentation	Comprehensive README API documentation via Postman collections Docker setup instructions in `docker-compose.yml`
🔌	Integrations	Authentication with JWT Database integration with Prisma API calls using Axios React Query for data fetching
🧩	Modularity	Component-based architecture in React Reusable components with Radix UI Separation of concerns between frontend and backend
🧪	Testing	Unit tests with Jest React Testing Library for component tests Integration tests for API endpoints
⚡️	Performance	Optimized bundle size with Webpack Lazy loading of components Efficient state management with React Query
🛡️	Security	Environment variables for sensitive data Input validation with Yup Secure JWT handling
📦	Dependencies	Core dependencies: React, Express, Prisma Development tools: ESLint, Prettier, Jest Containerization: Docker, Docker Compose
🚀	Scalability	Docker for containerization Microservices allow independent scaling Database can be switched to more scalable options (e.g., PostgreSQL)

📂 Structure du projet

Front-End

/src
  |-- /components    # Composants React (Login, Notes, etc.)
  |-- /pages         # Pages principales (Dashboard, Login)
  |-- /services      # Gestion des appels API
  |-- /utils         # Utilitaires (gestion des tokens, etc.)
  |-- App.js         # Entrée principale de l'application

Back-End

/server
  |-- /routes        # Routes pour utilisateurs et notes
  |-- /controllers   # Logique des API (CRUD)
  |-- /models        # Modèles de la base de données
  |-- /middleware    # Middleware pour la gestion des requêtes et l'authentification
  |-- server.js      # Entrée principale du serveur Express

Project Index

BOOKLY/

__root__

⦿ __root__

File Name Summary

compose.dev.yaml - Defines a Docker Compose configuration for a multi-service application, orchestrating a frontend built with React, a backend API, and a PostgreSQL database
- Facilitates seamless communication between services through a shared network, while managing environment variables for secure configurations
- Ensures that the application components are properly built, connected, and ready for deployment, enhancing the overall architecture of the project.

compose.yaml - Defines a Docker Compose configuration for a web application architecture comprising a frontend, backend, and PostgreSQL database
- Facilitates the orchestration of services, ensuring seamless communication and dependency management
- The setup allows for local development with environment variables for secure configurations, while enabling persistent data storage and health checks for the database, all within a dedicated network.

README.md - Bookly-React + Express + JWT## SummaryBookly is a project management and document management application inspired by Notion, designed to streamline the organization of notes and user interactions
- The application leverages a React front-end to provide a user-friendly interface, allowing users to create, edit, and delete notes seamlessly
- On the back-end, Express serves as a robust API that facilitates secure user authentication and efficient data management through a structured database
- The integration of JSON Web Tokens (JWT) ensures secure authentication, enhancing user data protection
- Overall, Bookly aims to deliver an intuitive and responsive experience for users managing their projects and documents effectively.

docker-compose.yml - Defines the configuration for a Docker environment that facilitates the deployment of a backend service
- It establishes essential parameters such as database connectivity, networking, and volume management, ensuring seamless integration with a PostgreSQL database
- This setup supports efficient development and testing workflows by encapsulating the backend service within a containerized architecture, promoting consistency across different environments.

backend

⦿ backend

File Name Summary

app.ts - Establishes the core server functionality for the backend of the application, integrating essential routing for documents, authentication, images, and recovery processes
- It configures middleware for JSON parsing and CORS, ensuring secure and flexible communication with the frontend
- Additionally, it sets up a cron job for scheduled tasks, facilitating automated processes within the application
- Overall, it serves as the backbone for handling API requests and responses.

Dockerfile - Facilitates the deployment of the backend application in a production environment by creating a lightweight Docker container
- It sets up the necessary working directory, installs dependencies, and prepares the application for execution
- By exposing the appropriate port and executing the start command, it ensures seamless integration with other components of the codebase, enabling efficient interaction with the PostgreSQL database and overall application functionality.

tsconfig.json - Configuration settings define the TypeScript compilation process for the backend of the project
- By specifying options such as module type, ECMAScript target, and strict type checking, it ensures a robust development environment
- This setup facilitates the inclusion of TypeScript and JavaScript files, while optimizing the output for better debugging and module resolution, ultimately contributing to a maintainable and scalable codebase architecture.

package.json - Defines the configuration and dependencies for the backend of the project, facilitating the development and execution of a TypeScript-based application
- It manages essential packages for server functionality, including Express for routing, Prisma for database interactions, and Nodemon for development convenience
- This setup supports building, running, and maintaining a robust backend architecture, enabling seamless integration with front-end components and enhancing overall project efficiency.

start.sh - Initiates the database migration process for the backend of the project
- By executing the necessary migrations, it ensures that the database schema is up-to-date and aligned with the current application requirements
- This step is crucial for maintaining data integrity and supporting the overall functionality of the application within the broader codebase architecture.

prisma

⦿ backend.prisma

File Name Summary

schema.prisma - Defines the Prisma schema for a backend application, establishing the data models and relationships essential for user management and document handling
- It facilitates interactions with a PostgreSQL database, enabling efficient data storage and retrieval
- The schema supports user roles, document sharing, and image management, contributing to a scalable architecture that enhances query performance and supports serverless deployments.

src

⦿ backend.src

utils

⦿ backend.src.utils

File Name Summary

Error.ts - ErrorClass serves as a centralized utility for managing error handling within the backend architecture
- By encapsulating status codes and messages, it streamlines the process of generating consistent error responses across the application
- This enhances maintainability and clarity, ensuring that error information is uniformly structured, which ultimately improves the overall user experience and debugging efficiency.

lib

⦿ backend.src.lib

File Name Summary

cron.ts - Automates the cleanup of outdated recovery email records in the database by executing a scheduled job every 10 minutes
- It identifies and removes entries that are older than 10 minutes, ensuring the database remains efficient and free of unnecessary data
- This functionality enhances the overall performance and reliability of the application by maintaining a clean state for recovery processes.

resend.ts - Facilitates email change and password reset processes by sending confirmation emails to users
- It ensures that users receive notifications regarding their requests, enhancing security and user experience
- By incorporating dynamic content such as usernames and links, it provides personalized communication while tracking requests through IP and location data, thereby reinforcing the integrity of user account management within the overall project architecture.

repository

⦿ backend.src.repository

File Name Summary

ImageRepository.ts - ImageRepository serves as a centralized module for managing image data within the backend architecture
- It facilitates the creation, updating, retrieval, and deletion of images, ensuring seamless interaction with the database
- Additionally, it provides functionality to find images by their unique identifiers and links them to associated documents, thereby enhancing the overall image management capabilities of the application.

RecoveryRepository.ts - RecoveryRepository facilitates the management of user recovery processes within the application
- It enables the creation and retrieval of recovery emails and passwords, ensuring secure handling of user credentials
- Additionally, it provides functionality to delete recovery records, enhancing data integrity and user experience
- This repository plays a crucial role in the overall architecture by supporting user account recovery mechanisms efficiently.

AuthRepository.ts - AuthRepository serves as a crucial component of the backend architecture, facilitating user management within the application
- It provides essential functionalities such as retrieving user details by email or ID, creating new users, checking for duplicate emails, and updating user information
- By leveraging Prisma for database interactions, it ensures efficient and reliable access to user data, supporting the overall authentication and authorization processes of the project.

DocumentRepository.ts - DocumentRepository serves as a centralized interface for managing document-related operations within the application
- It facilitates the retrieval, creation, updating, and deletion of documents, while also supporting features like document sharing, archiving, and favoriting
- By providing a structured approach to document management, it enhances user interaction with documents and ensures efficient data handling across the codebase.

routes

⦿ backend.src.routes

File Name Summary

RecoveryRoutes.ts - RecoveryRoutes facilitates user account recovery processes within the application
- It defines endpoints for sending recovery emails, verifying tokens, and resetting passwords, ensuring secure authentication through middleware
- By integrating with the RecoveryController, it streamlines user interactions related to account recovery, enhancing overall user experience and security in the codebase architecture.

AuthRoutes.ts - AuthRoutes facilitates user authentication and management within the application
- It defines endpoints for user registration, login, and profile management, ensuring secure access through authentication middleware
- By providing functionalities such as user retrieval and password updates, it plays a crucial role in maintaining user sessions and data integrity, thereby enhancing the overall user experience in the codebase architecture.

ImageRoutes.ts - ImageRoutes facilitates image management within the backend architecture by providing endpoints for uploading, retrieving, and deleting images
- It utilizes multer for handling file uploads, ensuring that only valid image files are processed and stored in a designated directory
- This routing module integrates seamlessly with the ImageController, enabling efficient image operations while maintaining a structured approach to file handling and storage.

DocumentRoutes.ts - DocumentRoutes serves as a crucial component of the backend architecture, facilitating the management and retrieval of document-related data
- It defines various endpoints for operations such as creating, updating, archiving, and sharing documents, while ensuring user authentication
- This structure enhances the overall functionality of the application by providing a comprehensive interface for document interactions, thereby streamlining user experience and data management.

controllers

⦿ backend.src.controllers

File Name Summary

ImageController.ts - ImageController facilitates image management within the application by providing endpoints for uploading, retrieving, and deleting images
- It interacts with the ImageService to handle image data and metadata, ensuring seamless integration with the overall backend architecture
- This controller enhances user experience by enabling efficient image storage and retrieval, while also managing error responses to maintain robust application functionality.

AuthController.ts - AuthController facilitates user authentication and management within the application
- It provides essential functionalities such as user registration, login, password verification, and user profile retrieval
- Additionally, it supports administrative actions like fetching all users and updating user details
- By leveraging JWT for secure token management, it ensures that user interactions are both authenticated and authorized, contributing to the overall security and integrity of the codebase architecture.

DocumentController.ts - DocumentController manages document-related operations within the application, facilitating user interactions such as retrieving, creating, updating, and deleting documents
- It ensures secure access through user authentication and authorization, particularly for admin actions
- Additionally, it supports features like document sharing, archiving, and favoriting, thereby enhancing user experience and document management capabilities across the codebase.

RecoveryController.ts - RecoveryController facilitates user account recovery processes, including email and password changes
- It manages the sending of recovery emails, updates user information, and verifies tokens for secure operations
- By integrating with AuthService and RecoveryService, it ensures that users can efficiently recover their accounts while maintaining security and tracking request information, thereby enhancing the overall user experience within the application.

service

⦿ backend.src.service

File Name Summary

RecoveryService.ts - RecoveryService facilitates the management of user recovery processes within the application
- It handles the registration of recovery emails and passwords, retrieves recovery identifiers based on previous emails, and allows for the deletion of recovery records
- By ensuring secure and efficient recovery operations, it plays a crucial role in enhancing user experience and maintaining account security across the codebase.

AuthService.ts - AuthService provides essential functionalities for user authentication and management within the backend architecture
- It facilitates user registration, login, and token verification while ensuring secure password handling through hashing
- Additionally, it supports user role checks and updates, enabling administrative oversight
- By integrating with the AuthRepository, it streamlines user data interactions, contributing to a robust and secure authentication system for the overall application.

DocumentService.ts - DocumentService provides a comprehensive set of functionalities for managing documents within the application
- It facilitates operations such as retrieving, creating, updating, deleting, archiving, and restoring documents, while ensuring proper user authentication and authorization
- Additionally, it supports document sharing, favoriting, and searching, thereby enhancing user collaboration and document organization in the overall codebase architecture.

ImageService.ts - ImageService facilitates the management of image data within the application, enabling functionalities such as saving, updating, retrieving, and deleting images
- By interacting with the ImageRepository and DocumentRepository, it ensures that image metadata is accurately stored and maintained, while also handling file operations
- This service plays a crucial role in the overall architecture by providing a centralized interface for image-related operations, enhancing the applications media management capabilities.

postman

⦿ backend.postman

File Name Summary

Document API.postman_collection.json - Document API serves as a comprehensive collection of endpoints designed to manage document-related operations within the application
- It facilitates the creation, deletion, archiving, restoration, and retrieval of documents, enhancing user interaction with document management features
- By providing a structured interface for these functionalities, it streamlines the overall architecture of the backend, ensuring efficient data handling and user experience.

Auth.postman_collection.json - Auth postman collection facilitates the testing and validation of authentication endpoints within the backend architecture
- It includes requests for user registration, login, and token verification, enabling developers to simulate and verify user interactions with the authentication system
- This collection serves as a crucial tool for ensuring the reliability and security of user authentication processes in the overall application framework.

frontend

⦿ frontend

File Name Summary

postcss.config.js - Configures PostCSS to enhance the styling capabilities of the frontend by integrating Tailwind CSS for utility-first design and Autoprefixer for automatic vendor prefixing
- This setup streamlines the development process, ensuring consistent and responsive styling across various browsers, thereby contributing to a more efficient and maintainable codebase architecture.

tailwind.config.js - Configures Tailwind CSS for a frontend application, enabling a responsive and customizable design system
- It establishes dark mode support, defines content sources for styling, and extends the theme with a comprehensive color palette and animations
- This setup enhances the user interface by ensuring consistent styling across various components and pages, ultimately contributing to a cohesive and visually appealing user experience.

nginx.conf - Configures an Nginx server to handle HTTP and HTTPS traffic for the application hosted at maant.dipsw-ccicampus.dev
- It ensures secure connections by redirecting HTTP requests to HTTPS and serves static files from a specified directory
- Additionally, it facilitates API requests by proxying them to a backend service, enhancing the overall architectures efficiency and security.

Dockerfile - Facilitates the building and deployment of a frontend application using Node.js and Nginx
- It sets up a development environment, installs dependencies, compiles the application, and configures Nginx to serve the built assets
- Additionally, it incorporates SSL certificates for secure connections, ensuring a robust and secure user experience within the overall project architecture.

config-overrides.js - Configures the Webpack setup for the frontend of the project by establishing path aliases for easier module resolution and integrating Babel for JavaScript transpilation
- Additionally, it customizes the development server settings to prevent automatic browser opening upon startup
- This enhances the development experience and streamlines the code organization within the overall architecture of the application.

tsconfig.json - Configuration of TypeScript compiler options facilitates the development of a React-based frontend application
- It ensures strict type-checking, supports modern JavaScript features, and enables seamless integration of TypeScript with JavaScript files
- By defining module resolution and path aliases, it enhances code organization and maintainability, ultimately contributing to a robust and scalable architecture for the overall project.

components.json - Defines the configuration for the frontend components of the project, establishing a structured approach to styling and component management
- It integrates Tailwind CSS for design consistency, sets up aliases for streamlined imports, and specifies the use of an icon library
- This foundational setup enhances the overall architecture by promoting modularity and maintainability across the codebase.

package.json - Defines the configuration and dependencies for the Bookly React frontend application, facilitating the development and build processes
- It integrates various libraries for UI components, state management, form handling, and routing, ensuring a robust user experience
- Additionally, it sets up scripts for development, testing, and production builds, streamlining the workflow for developers working on the project.

src

⦿ frontend.src

File Name Summary

index.tsx - Initializes the React application by rendering the main App component within a structured environment that supports routing and data fetching
- It sets up a QueryClient for managing server state and wraps the application in a Router for navigation, ensuring a seamless user experience
- This foundational setup is crucial for the overall architecture, enabling efficient data handling and routing capabilities throughout the application.

App.tsx - Facilitates the core user interface of the application by establishing routing and context providers for various functionalities
- It integrates essential pages such as marketing, document management, and recovery, while ensuring a cohesive theme and user experience
- The architecture supports dynamic content rendering and state management, enhancing the overall interactivity and responsiveness of the frontend application.

pages

⦿ frontend.src.pages

File Name Summary

NotChange.tsx - Displays an error message when a user encounters issues while attempting to change their email or password
- Utilizing parameters from the URL, it provides specific feedback based on the type of error, enhancing user experience by guiding them on what went wrong
- The layout is designed to be visually appealing and responsive, ensuring clarity and support during error scenarios within the application.

NotPublish.tsx - NotPublishPage serves as a user-friendly interface for handling scenarios where a requested page is either unavailable or access is restricted
- It effectively communicates the issue to users through a visually appealing layout, combining informative text with illustrative imagery
- This component enhances the overall user experience by providing clear feedback and maintaining consistent design across the application.

404.tsx - Provides a user-friendly 404 error page that enhances the overall user experience by clearly communicating when a requested page is not found
- It offers a visually appealing layout with an option to navigate back to the home documents page, ensuring users can easily recover from navigation errors
- This component integrates seamlessly into the frontend architecture, contributing to a cohesive and responsive web application.

main

⦿ frontend.src.pages.main

components

⦿ frontend.src.pages.main.components

File Name Summary

trash-box.tsx - TrashBox component facilitates the management of archived documents within the application
- It allows users to search for specific documents, restore them back to active status, or permanently delete them
- By integrating with the document context and utilizing modals for confirmation, it enhances user interaction while maintaining a clean and organized interface for document retrieval and management.

favorite-list.tsx - Facilitates the display and interaction with a users favorite documents within the application
- It retrieves and manages the favorite documents based on the provided parent ID, allowing users to expand and view additional details
- The component enhances user navigation by enabling redirection to specific documents and dynamically updates the view as favorites change, contributing to a seamless user experience in the overall codebase architecture.

animation.js - Animation functions enhance user experience by providing engaging visual transitions throughout the application
- Key features include a preloader animation that smoothly introduces the landing page, menu opening and closing animations that create a dynamic navigation experience, and various reusable animations for elements like text and shapes
- These animations contribute to a polished and interactive interface, aligning with the overall architectures focus on user engagement and aesthetic appeal.

publish.tsx - Publish component facilitates the publishing and unpublishing of notes within the application
- It provides users with a user-friendly interface to manage the visibility of their notes, allowing them to share content easily via a generated URL
- Additionally, it incorporates feedback mechanisms to inform users of the publishing status and offers clipboard functionality for easy sharing
- This enhances the overall user experience in the content management workflow.

user-item.tsx - UserItem component enhances user interaction by displaying user information and providing a dropdown menu for actions
- It showcases the users avatar and name, while allowing easy access to logout functionality
- Integrated with authentication context, it ensures real-time updates of user data, contributing to a seamless user experience within the broader application architecture focused on user management and engagement.

card-add.tsx - CardAdd serves as a user interface component within the project, designed to facilitate the addition of new pages
- Its visually appealing layout, featuring a prominent + symbol and a subtle hover effect, enhances user engagement
- Positioned within the broader architecture, this component contributes to a seamless and interactive experience, encouraging users to expand their content effortlessly.

navigation.tsx - Navigation component facilitates user interaction within the application by providing a sidebar and a responsive navbar
- It enables document management features such as creating, favoriting, and accessing archived documents, while adapting to different screen sizes
- Additionally, it integrates user settings and search functionalities, enhancing the overall user experience and accessibility of the application’s core features.

document-list.tsx - Facilitates the display and interaction with a hierarchical list of documents within the application
- It retrieves documents based on a parent ID, allowing users to expand and navigate through nested document structures
- By integrating with context and query hooks, it ensures real-time updates and efficient data fetching, enhancing user experience in managing and accessing documents seamlessly.

tooltip.tsx - Provides a Tooltip component designed to enhance user experience by displaying contextual information
- Positioned dynamically, it overlays text on the main content, ensuring visibility and accessibility
- This component integrates seamlessly into the broader frontend architecture, allowing developers to enrich interactive elements with informative tooltips, thereby improving usability and engagement within the application.

cover.tsx - Cover component facilitates the display and management of a cover image within the application
- It allows users to reposition the image and delete it if necessary, enhancing the user experience by providing interactive controls
- Integrated with context hooks, it updates the document state and image offset dynamically, ensuring a seamless interaction with the overall codebase architecture focused on document management and image handling.

navbar.tsx - Facilitates the rendering of a responsive navigation bar within the application, integrating document management functionalities
- It retrieves and displays document details, handles loading states, and navigates users to a 404 page if documents are unavailable
- Additionally, it incorporates components for document publishing and menu options, enhancing user interaction while providing contextual information about archived documents.

item.tsx - Item component facilitates the display and interaction with documents within the application
- It allows users to create, archive, and favorite documents while providing a dropdown menu for additional actions
- The component enhances user experience by visually indicating document hierarchy and status, and it integrates seamlessly with authentication and theme contexts, ensuring a cohesive and responsive interface for managing documents.

title.tsx - Title component facilitates the editing and display of document titles within the application
- It allows users to switch between viewing and editing modes, updating the title in real-time while ensuring synchronization with the backend
- By leveraging React hooks and context, it enhances user interaction and maintains data consistency across the application, contributing to a seamless document management experience.

card-document.tsx - CardDocument serves as a visually engaging component within the projects frontend architecture, designed to display document-related information in a user-friendly format
- It showcases an image, relevant details about the document, and the current users avatar, enhancing the overall user experience
- By integrating user authentication context, it personalizes the display, indicating the document's status and ownership, thereby fostering interaction and clarity in the application.

toolbar.tsx - Toolbar component facilitates user interaction with document titles in a dynamic and intuitive manner
- It allows users to edit titles, select icons, and add cover images, enhancing the overall document management experience
- By integrating with the applications context and query management, it ensures real-time updates and a seamless user interface, contributing significantly to the projects architecture focused on collaborative document editing.

editor.tsx - Provides a rich text editing experience within the application, enabling users to create and modify content seamlessly
- By integrating the BlockNote editor, it allows for dynamic content management while supporting both light and dark themes
- The component captures changes in real-time, ensuring that updates are reflected immediately, thus enhancing user interaction and engagement with the content creation process.

menu.tsx - Provides a user-friendly dropdown menu component for managing document actions within the application
- It enables users to archive documents seamlessly while displaying relevant user information
- The component enhances the overall user experience by integrating toast notifications for feedback and adapting to the current theme, ensuring a consistent and visually appealing interface across the application.

banner.tsx - Banner component facilitates user interaction with documents that are in the trash
- It provides options to restore or permanently delete a document, enhancing user experience by allowing easy management of document states
- By integrating with context hooks for document operations and utilizing toast notifications for feedback, it ensures a seamless and responsive interface within the broader application architecture focused on document management.

preloader.tsx - Provides a visually engaging preloader component for the Bookly application, enhancing user experience during loading times
- By displaying a welcoming message, it sets a friendly tone for users as they navigate the platform
- This component integrates seamlessly within the frontend architecture, contributing to the overall aesthetic and functionality of the application while ensuring a smooth transition into the main content.

icon

⦿ frontend.src.pages.main.components.icon

File Name Summary

file-icon.tsx - BookTextIcon serves as an interactive visual component within the frontend architecture, enhancing user engagement through animated SVG graphics
- By responding to mouse events, it provides a dynamic experience that draws attention to the icon, contributing to a polished and responsive user interface
- This component plays a crucial role in maintaining a cohesive design language across the application.

emoji.json - Emoji Data JSON## SummaryThe emoji.json file serves as a centralized repository of emoji data for the frontend of the project
- It contains structured information about various emojis, including their visual representation, descriptions, categories, aliases, and relevant tags
- This data is essential for enhancing user interaction within the application, allowing users to easily access and utilize emojis in their communications or content creation.By providing a comprehensive list of emojis along with their attributes, this file supports features such as emoji selection, search functionality, and categorization, contributing to a more engaging and expressive user experience
- The integration of this emoji data into the broader codebase architecture ensures that the application can effectively leverage these visual elements, aligning with the overall goal of fostering user creativity and communication.

(preview)

⦿ frontend.src.pages.main.(preview)

File Name Summary

page.tsx - Facilitates the rendering of a preview page within the application, utilizing a layout component to maintain consistent design
- It dynamically retrieves a document ID from the URL parameters, allowing for the display of specific content related to that document
- This component plays a crucial role in enhancing user experience by providing a focused view of individual documents in the broader application architecture.

layout.tsx - Provides a layout component that manages user authentication and rendering of child components within the application
- It ensures that users are authenticated before accessing the main content, displaying a loading state during authentication checks
- By integrating with the authentication context, it enhances user experience and security, contributing to the overall architecture by maintaining a structured and protected interface for the application.

[preview]

⦿ frontend.src.pages.main.(preview).[preview]

File Name Summary

page.tsx - PreviewPageId component facilitates the display of a document preview within the application
- It retrieves document data and image offsets, ensuring that only published documents are accessible
- The component integrates a toolbar and an editor for a seamless user experience, while also managing loading states and potential errors
- Overall, it enhances the document viewing process by providing essential functionalities and a polished interface.

(document)

⦿ frontend.src.pages.main.(document)

File Name Summary

page.tsx - DocumentsPage serves as a dynamic component within the frontend architecture, facilitating the display of either a specific document or a home view for documents based on the presence of a document ID
- It integrates user authentication and onboarding processes, ensuring that users receive appropriate guidance based on their onboarding status, thereby enhancing user experience and engagement within the application.

layout.tsx - Provides a structured layout component for the main application interface, integrating essential features such as navigation, search functionality, and various modals for settings and document management
- It ensures a seamless user experience by managing authentication states and encapsulating multiple context providers, facilitating the interaction between different parts of the application while maintaining a cohesive design and functionality across the codebase.

[home]

⦿ frontend.src.pages.main.(document).[home]

File Name Summary

page.tsx - Facilitates the creation of new documents within the application, enhancing user interaction by allowing users to initiate document creation seamlessly
- It integrates user authentication and theme context to provide a personalized experience, while also managing navigation and displaying feedback through toast notifications
- This component serves as a welcoming interface for users, encouraging engagement with the document management features of the platform.

[documents]

⦿ frontend.src.pages.main.(document).[documents]

File Name Summary

page.tsx - Facilitates the rendering and management of a document page within the application, enabling users to view, edit, and save document content seamlessly
- It integrates with various hooks and components to fetch document data, handle updates, and provide a responsive user interface
- Additionally, it ensures a smooth user experience by managing loading states and error handling while maintaining a consistent theme throughout the application.

recovery

⦿ frontend.src.pages.recovery

(password)

⦿ frontend.src.pages.recovery.(password)

File Name Summary

page.tsx - Facilitates the password recovery process by allowing users to confirm their new password after verifying their identity with a unique token
- It ensures that the current password is correct before enabling the user to set a new password, enhancing security
- This component integrates with the overall authentication architecture, providing a seamless user experience for password management within the application.

(email)

⦿ frontend.src.pages.recovery.(email)

File Name Summary

page.tsx - Facilitates the confirmation of email recovery by validating user-provided tokens and IDs
- Upon successful verification, it displays a success message, allowing users to utilize their new email for future logins and notifications
- In case of errors or loading states, it appropriately navigates users to relevant pages, ensuring a seamless recovery experience within the broader application architecture.

home

⦿ frontend.src.pages.home

File Name Summary

page.tsx - Facilitates the rendering of the marketing page within the frontend application, integrating essential components such as the heading, preview, and footer
- It also manages user authentication by checking for a valid token and redirecting authenticated users to the documents page
- This page serves as a central hub for user engagement, enhancing the overall user experience in the application.

layout.tsx - Provides a structured layout for the home page of the application, integrating essential components such as the navigation bar, login, and registration forms
- It establishes a context for managing popups and themes, ensuring a cohesive user experience
- The layout also incorporates a notification system, enhancing user interaction by delivering timely feedback within the overall architecture of the frontend application.

components

⦿ frontend.src.pages.home.components

File Name Summary

Footer.tsx - Footer component enhances the user interface by providing essential navigation links, including Privacy Policy and Terms & Conditions, while maintaining a consistent design across the application
- Positioned at the bottom of the page, it ensures accessibility and visibility, contributing to a user-friendly experience
- This component integrates seamlessly with the overall architecture, reinforcing the projects commitment to clarity and usability in its frontend design.

Navbar.tsx - Navbar component enhances user navigation by providing a fixed top interface that includes branding, a login button, and a mode toggle for light and dark themes
- It dynamically adjusts its appearance based on scroll position, ensuring a consistent and engaging user experience
- This component plays a crucial role in the overall architecture by facilitating user interactions and maintaining visual coherence across the application.

Login.tsx - Facilitates user authentication by providing a login interface within the application
- It allows users to enter their email and password, handle login attempts, and manage error messages
- Additionally, it offers options for password recovery and user registration through pop-up dialogs, enhancing the overall user experience and security of the application
- This component plays a crucial role in the user management aspect of the codebase architecture.

Logo.tsx - Renders a responsive logo component for the Bookly application, facilitating navigation to the homepage
- It adapts to light and dark themes by displaying different logo images based on the users preference
- Positioned within the home page structure, this component enhances the user interface and brand visibility, contributing to an engaging user experience across various devices.

Preview.tsx - Preview component enhances the user experience by displaying synchronized video content based on the current theme (light or dark)
- It facilitates user engagement through a prominent call-to-action button, while managing video playback and error handling seamlessly
- This component plays a crucial role in the overall architecture by integrating visual elements that align with the applications thematic design, ensuring a cohesive and interactive interface.

Register.tsx - RegisterPage component facilitates user registration within the application, providing a user-friendly interface for inputting essential information such as email, username, and password
- It incorporates validation to ensure data integrity and handles user interactions, including error messaging and navigation to the login interface upon successful registration
- This component plays a crucial role in the overall user authentication flow of the project.

Heading.tsx - Consolidating ideas, documents, and projects in one place
- It encourages user engagement through a call-to-action button that opens a login popup, facilitating seamless access to the platform
- This component enhances the user experience by providing a visually appealing and informative entry point into the application.

hooks

⦿ frontend.src.hooks

File Name Summary

use-cover-image.tsx - Facilitates the management of cover image states within the application by providing a context for opening, closing, and replacing cover images associated with specific documents
- It enables components to access and manipulate the visibility and identity of cover images seamlessly, enhancing user experience and interaction throughout the frontend architecture
- This context-driven approach promotes a clean and organized state management strategy.

use-boarding.tsx - Facilitates a context-driven approach to manage the state of a boarding process within the application
- By providing a centralized store for the boarding status, it enables components to easily access and modify the visibility of the boarding interface
- This enhances user experience by allowing seamless interactions with the boarding feature throughout the application.

use-origin.tsx - Provides a custom React hook that retrieves the origin of the current window location, ensuring it only executes in a browser environment
- By managing the mounted state, it guarantees that the origin is returned only after the component has fully mounted
- This functionality is essential for components that rely on the current URL context, enhancing the overall user experience within the application.

usePromise.tsx - UsePromise serves as a custom React hook designed to simplify the handling of asynchronous operations within the application
- By managing the loading state, error handling, and data retrieval from promises, it enhances the user experience by providing a clear and efficient way to work with asynchronous data
- This hook integrates seamlessly into the broader architecture, promoting cleaner code and improved maintainability across the frontend components.

use-document-admin.tsx - Facilitates the management of document editing states within the application by providing a context for opening and closing document editing interfaces
- It enables components to access and manipulate the visibility of the document editor and the currently selected document, ensuring a cohesive user experience in the document administration workflow
- This enhances the overall architecture by promoting state management and context usage across the frontend.

use-options.tsx - Provides a context for managing the visibility of a settings interface within the application
- It encapsulates the state and behavior related to opening and closing the settings, allowing components to easily access and manipulate this state
- By utilizing a context provider, it ensures that any child component can seamlessly interact with the settings state, promoting a cohesive user experience across the codebase.

use-panel.tsx - Facilitates the management of a panels open and closed states within the application
- By providing a context for the panels visibility and associated actions, it enables components to easily access and manipulate the panel's state
- This enhances the user experience by allowing seamless interactions with the panel across the frontend, ensuring consistent behavior throughout the application.

use-scroll-top.tsx - Provides a custom React hook that tracks the users scroll position, determining whether it exceeds a specified threshold
- This functionality enhances user experience by enabling components to respond dynamically to scrolling behavior, such as displaying or hiding elements based on the scroll state
- It integrates seamlessly within the frontend architecture, contributing to a more interactive and responsive application.

use-search.tsx - Provides a context and custom hook for managing the search functionality within the application
- It enables components to easily access and control the visibility of the search interface, facilitating a seamless user experience
- By encapsulating the state and behavior related to search, it promotes a clean architecture and enhances maintainability across the codebase.

lib

⦿ frontend.src.lib

File Name Summary

utils.ts - Provides a utility function that combines class names efficiently, enhancing the styling capabilities within the frontend architecture
- By leveraging the clsx and tailwind-merge libraries, it ensures that class names are merged and deduplicated, promoting cleaner and more maintainable code
- This functionality supports a consistent and dynamic approach to styling components throughout the application.

models

⦿ frontend.src.models

File Name Summary

Users.ts - Defines user-related data structures essential for managing user profiles within the application
- The UserProfileToken facilitates authentication by linking a user with their corresponding token, while the UserProfile captures key user information such as username and email
- Together, these models play a crucial role in the overall architecture by enabling secure user interactions and personalized experiences throughout the frontend.

Documents.ts - Defines a type for managing document profiles within the application, encapsulating essential attributes such as headers, body content, and parameters
- This structure facilitates consistent data handling across the frontend, ensuring that document-related operations are streamlined and maintainable
- By providing a clear schema, it enhances the overall architecture, promoting better integration and interaction with other components of the codebase.

components

⦿ frontend.src.components

File Name Summary

ErrorHandler.tsx - Error handling functionality enhances user experience by providing clear feedback on issues encountered during API interactions
- It captures various error scenarios, displaying relevant messages through toast notifications, and redirects users to the login page when authentication fails
- This component plays a crucial role in maintaining application stability and guiding users effectively within the overall architecture of the frontend application.

icon-picker.tsx - IconPicker facilitates the selection of emojis within the application, enhancing user interaction by providing a visually appealing and organized interface
- It allows users to filter emojis by description, view them categorized, and select or randomize their choices
- This component integrates seamlessly into the broader frontend architecture, promoting a cohesive user experience while leveraging theming and popover functionalities.

mode-toggle.tsx - ModeToggle facilitates user interaction with theme preferences in the application, allowing seamless switching between light and dark modes
- By integrating with the theme context, it enhances the user experience by providing a visually appealing and accessible way to customize the interface
- This component plays a crucial role in the overall architecture by promoting user personalization and engagement within the frontend ecosystem.

single-image-dropzone.tsx - SingleImageDropzone facilitates the user-friendly upload of a single image file within the application
- It provides visual feedback for drag-and-drop interactions, displays error messages for invalid file types or sizes, and allows users to preview the selected image
- This component enhances the overall user experience by streamlining image uploads while ensuring adherence to specified file constraints.

search-command.tsx - SearchCommand facilitates a dynamic document search experience within the application, allowing users to quickly find and navigate to their documents
- It integrates with authentication and document contexts to retrieve and display relevant results, while also providing keyboard shortcuts for ease of access
- This component enhances user interaction by presenting a responsive dialog that updates based on user input and selections.

context

⦿ frontend.src.components.context

File Name Summary

popup-context.tsx - Provides a context for managing popup states within the application
- It enables components to easily open and close popups while maintaining the current popup type
- By utilizing a centralized context, it streamlines the interaction with popups across the frontend, ensuring a consistent user experience and simplifying state management for popup-related functionalities throughout the codebase.

useAnimation.tsx - Facilitates animation management within the application by providing a context for tracking the completion state of animations
- It initializes an animation sequence and updates the state accordingly, allowing components to react to animation status changes
- This enhances user experience by ensuring that animations are properly handled and synchronized across the frontend, contributing to a seamless interface.

useImage.tsx - Image context management enables seamless image upload and removal functionalities within the application
- By leveraging authentication details, it ensures secure interactions with the image service
- This component provides a centralized context for managing image-related operations, enhancing the user experience by allowing easy integration of image handling features throughout the frontend architecture.

useTheme.tsx - Theme management functionality enhances the user experience by allowing dynamic switching between light and dark themes within the application
- It provides a context for theme state, enabling components to access and modify the current theme seamlessly
- Additionally, it ensures that user preferences are persisted in local storage and updates the favicon accordingly, contributing to a cohesive and visually appealing interface across the codebase.

useAuth.tsx - Provides an authentication context for managing user sessions within the application
- It facilitates user registration, login, and profile updates while maintaining authentication state and handling token management
- Additionally, it offers methods for password recovery and user retrieval, ensuring a seamless user experience across the frontend
- This context is integral to the overall architecture, enabling secure access and user management throughout the application.

useDocuments.tsx - Document management functionality is provided through a context that facilitates the creation, retrieval, updating, and deletion of documents within the application
- It supports user-specific operations such as favoriting, archiving, and sharing documents, while also enabling search capabilities
- This context serves as a centralized state management solution, ensuring that document-related data is consistently accessible and manageable across the frontend components of the application.

themeContext.tsx - Theme management is facilitated through a context provider that allows components to access and modify the applications theme state
- By storing the users theme preference in local storage, it ensures a consistent experience across sessions
- This functionality enhances the overall user interface by enabling dynamic theme switching between light and dark modes, contributing to a more personalized and visually appealing application.

modals

⦿ frontend.src.components.modals

File Name Summary

panel-admin.tsx - View and Manage UsersAdministrators can access a list of users, sort them based on various criteria, and update their roles or information as needed.-Handle DocumentsThe component provides functionality to view and manage documents, ensuring that all necessary documentation is organized and up-to-date.-Search and FilterUsers can search for specific users or documents, making it easier to find relevant information quickly.## UsageThis component is designed to be integrated into the broader application architecture, where it interacts with various hooks and context providers to fetch and manipulate data
- It enhances the overall user experience by providing a responsive and intuitive interface for administrative tasks.By utilizing this modal, administrators can maintain control over user management and document organization, contributing to the overall efficiency and effectiveness of the application.

confirm-modal.tsx - ConfirmModal serves as a user interface component that facilitates confirmation actions within the application
- By presenting a dialog that prompts users to confirm or cancel potentially destructive actions, such as deletions, it enhances user experience and prevents accidental data loss
- This component integrates seamlessly into the broader architecture, ensuring consistent interaction patterns across the frontend.

boarding-modal.tsx - BoardingModal facilitates user profile configuration within the application, allowing users to upload an image and set a username
- It integrates with various hooks to manage state and user authentication, ensuring a seamless onboarding experience
- By providing a dialog interface, it enhances user interaction, enabling easy submission of profile details while maintaining a responsive design.

document-admin-modal.tsx - AdminEditDocumentModal facilitates the editing of documents within the application by providing a modal interface for administrators
- It integrates user authentication and document management functionalities, allowing for seamless updates and retrieval of document information
- The modal enhances user experience by overlaying a focused editing environment, ensuring that administrators can efficiently manage document content while maintaining a clear and organized workflow.

settings-modal.tsx - SettingsModal facilitates user account management and preferences within the application
- It provides an interface for users to update their personal information, change email and password, and manage account settings
- Additionally, it allows users to customize the appearance of the interface and includes a confirmation process for account deletion, enhancing user experience and security in the overall codebase architecture.

password-change-modal.tsx - Facilitates a user-friendly modal for changing passwords within the application
- It prompts users to enter their current password, a new password, and a confirmation of the new password, ensuring validation at each step
- By integrating with authentication context, it verifies the current password and provides feedback on password strength and matching, enhancing the overall security and user experience in the application.

cover-image-modal.tsx - CoverImageModal facilitates the user experience for uploading and managing cover images within the application
- It provides a dialog interface that allows users to select an image, which is then uploaded and associated with a specific document
- By integrating with various hooks and context providers, it ensures seamless interaction with the applications state and document management, enhancing the overall functionality of the frontend architecture.

mail-change-modal.tsx - InputMailModal serves as a user interface component for prompting users to enter and confirm a new email address
- It enhances the overall user experience by providing a modal dialog that includes input validation and clear action buttons
- This component integrates seamlessly into the broader application architecture, facilitating email updates while maintaining a consistent design and interaction pattern across the frontend.

input-modal

⦿ frontend.src.components.modals.input-modal

File Name Summary

input-name.tsx - Facilitates user interaction for editing and updating a users name within the application
- By providing an input field that toggles between display and edit modes, it allows users to modify their profile name seamlessly
- Changes are captured and sent to the backend for updating, ensuring the user interface remains in sync with the underlying data, enhancing the overall user experience in the application.

input-email.tsx - InputEmail component facilitates the editing of a users email address within a modal interface
- It allows users to toggle between viewing and editing their email, ensuring real-time validation and updates
- Upon entering a valid email, changes are saved and reflected in the user profile, enhancing user experience by providing immediate feedback and maintaining data integrity across the application.

input-title.tsx - InputTitle component facilitates the editing of document titles within a modal interface
- It allows users to toggle between viewing and editing states, updating the title in real-time while ensuring changes are reflected in the application state
- By leveraging React hooks and context, it enhances user interaction and maintains synchronization with the document data, contributing to a seamless user experience in the overall project architecture.

action-document.tsx - ActionDocument facilitates the management of document states within the application, allowing users to publish, unpublish, archive, and restore documents seamlessly
- It integrates with the context of document management and utilizes a popover interface for user interactions, ensuring a smooth experience
- By leveraging real-time updates and notifications, it enhances user engagement and maintains the integrity of document workflows across the codebase.

ui

⦿ frontend.src.components.ui

File Name Summary

input.tsx - Input component serves as a customizable and reusable UI element within the frontend architecture, enhancing user interaction by providing a styled input field
- It integrates seamlessly with the overall design system, ensuring consistency in appearance and behavior across the application
- By leveraging Reacts forwardRef, it allows for flexible usage in various contexts, promoting efficient form handling and user experience.

popover.tsx - Popover component enhances user interaction by providing a customizable overlay that displays additional information or options when triggered
- It integrates seamlessly into the UI, allowing for flexible positioning and styling
- This component is essential for creating intuitive interfaces, enabling users to access contextual content without cluttering the main view, thereby improving overall user experience within the application.

button.tsx - Provides a versatile button component designed for a React application, enabling consistent styling and behavior across various use cases
- It supports multiple visual variants and sizes, enhancing the user interface by allowing developers to easily implement buttons that align with the overall design system
- This component contributes to a cohesive user experience within the broader frontend architecture.

dialog.tsx - Provides a customizable dialog component for the user interface, enhancing user interaction by presenting modal content effectively
- It integrates various subcomponents such as headers, footers, titles, and descriptions, allowing for a structured and visually appealing presentation of information
- This component is essential for managing user prompts and confirmations within the broader application architecture, ensuring a seamless user experience.

label.tsx - Label component serves as a customizable UI element within the frontend architecture, enhancing form accessibility and usability
- By leveraging Radix UIs label primitives and a utility for class variance, it ensures consistent styling and behavior across various contexts
- This component integrates seamlessly into the broader application, promoting a cohesive design language while maintaining flexibility for developers.

alert-dialog.tsx - Provides a customizable alert dialog component for user interactions within the frontend application
- It enhances user experience by presenting critical information and actions in a modal format, ensuring clarity and focus
- The component integrates seamlessly with the overall architecture, leveraging Radix UI for accessibility and styling utilities for consistent design across the application.

dropdown-menu.tsx - Dropdown menu components enhance user interaction by providing a flexible and accessible way to present options within the UI
- These components, built using Radix UI, allow for the creation of nested menus, checkable items, and radio selections, all styled for a cohesive look
- They contribute to the overall architecture by ensuring a consistent and intuitive navigation experience across the application.

avatar.tsx - Provides a customizable avatar component suite for user interfaces, enhancing the visual representation of user profiles
- It includes a main avatar container, an image display, and a fallback option for when the image is unavailable
- This component integrates seamlessly with the overall project architecture, promoting a consistent and user-friendly design across the frontend application.

separator.tsx - Provides a customizable separator component that enhances the user interface by visually dividing content
- It supports both horizontal and vertical orientations, allowing for flexible design choices
- By integrating with Radix UIs separator primitives, it ensures accessibility and consistent styling, contributing to a cohesive and polished frontend experience within the overall project architecture.

command.tsx - Provides a set of React components for a command interface, enhancing user interaction within the application
- It includes elements such as dialogs, input fields, lists, and items, all styled for a cohesive user experience
- This architecture facilitates efficient command execution and navigation, contributing to a more intuitive and responsive frontend design.

services

⦿ frontend.src.services

File Name Summary

imageService.tsx - ImageService facilitates the uploading and removal of images within the application, streamlining interactions with the backend API
- It manages file uploads by creating form data and handles deletions through specified document IDs
- Additionally, it ensures robust error handling and authorization through token management, contributing to a seamless user experience in managing image assets across the platform.

recoveryService.tsx - RecoveryService facilitates user account recovery processes within the application by providing essential functionalities such as sending recovery emails, resetting passwords, and verifying recovery tokens
- It interacts with the backend API to ensure secure communication and error handling, thereby enhancing user experience during account recovery scenarios
- This service is integral to maintaining user access and security in the overall codebase architecture.

authService.tsx - AuthService provides essential functionalities for user authentication and management within the application
- It facilitates user login, registration, password verification, and profile updates while ensuring secure communication with the backend through token-based authorization
- Additionally, it allows for user data retrieval and validation, contributing to a seamless user experience and robust security framework in the overall codebase architecture.

documentsService.tsx - DocumentService provides a comprehensive set of functionalities for managing documents within the application
- It enables users to create, retrieve, update, delete, and share documents, as well as manage archived and favorite documents
- Additionally, it supports searching for documents and handling document icons and cover images
- This service acts as a crucial intermediary between the frontend and backend, ensuring seamless document operations and user interactions.

🛠️ Technologies utilisées

Front-End :

React
React Router
Axios (pour les appels API)
CSS (ou une librairie CSS comme Tailwind)

Back-End :

Node.js
Express.js
SQLite
JWT (JSON Web Token) pour l'authentification
Bcrypt pour le hachage des mots de passe

📦 Installation et exécution (FRONT)

Prérequis :

Node.js v16 ou supérieur
SQLite
Un éditeur de code (Visual Studio Code recommandé)

Étapes :

Clonez le dépôt :

git clone https://github.com/username/bookly.git bookly
cd bookly

Installez les dépendances pour le front-end :
```
cd client
npm install
```
Installez les dépendances pour le back-end :
```
cd ../server
npm install
```
Configurez les variables d'environnement : Créez un fichier .env dans le dossier

server

avec les clés suivantes :

SERVER_PORT=5000
JWT_SECRET=votre_secret

Lancez le serveur back-end :
```
cd server
npm run dev
```
Lancez le front-end :
```
cd client
npm start
```
Ouvrez votre navigateur à l'adresse suivante :
```
http://localhost:3000
```

📦 Installation et exécution (BACK)

Prérequis :

Node.js v16 ou supérieur
Postgres
Prisma CLI

Étapes :

Installez les dépendances pour le back-end :
```
cd server
npm install
```

Configurez les variables d'environnement : Créez un fichier .env dans le dossier server avec les clés suivantes :

SERVER_PORT=5000
JWT_SECRET=votre_secret
DATABASE_URL="postgresql://(username):(password)@localhost:5432/(database name)"

Modifiez le schéma Prisma (prisma/schema.prisma) pour définir vos modèles de données.
Migrate votre base de données :
```
npx prisma migrate dev --name init
```
Mettre a jours votre base de données :
```
npx prisma migrate dev --name
```
Lancez le serveur back-end :
```
npm run dev
```
Pour visualiser la base de donnée simplement :
```
npx prisma studio
```

🔒 Authentification JWT

Connexion : Lorsqu'un utilisateur se connecte, un JWT est généré et envoyé au client. Ce token est stocké dans le localStorage.
Middleware de protection : Les routes nécessitant une authentification sont protégées par un middleware qui vérifie le JWT dans le header Authorization.

📖 API Routes

Method	Endpoint	Body	Header	Response	Response Code	Description	Sécurisé
POST	/auth/register	{ email: String, password: String }		{ "id": String, "email": String, "name": String, "password": String, "createdAt": TimeStamp, "updatedAt": TimeStamp }	201 Created	Inscrire un utilisateur	❌
POST	/auth/login	{ email: String, password: String }		{ "token": String }	200 OK	Connecter un utilisateur	❌
GET	/auth/check		Author: String	{ "isAuthenticated": Bool }	200 OK	Check si le token est encore valide	✅
POST	/documents	{ "title": String, "content": String }	Author: String, UserId: String	{ "success": Bool }	201 Created	Créer un document	✅
GET	/documents		Author: String	{ "documents": Array }	200 OK	Récupérer tous les documents	✅
GET	/documents/:id/content		Author: String	{ "document": Object }	200 OK	Récupérer le contenu d'un document	✅
PUT	/documents/:id/content	{ "title": String, "content": String }	Author: String, UserId: String	{ "success": Bool }	202 Accepted	Modifier le contenu ou le titre d’un document	✅
DELETE	/documents/:id/content		Author: String	{ "success": Bool }	200 OK	Supprimer un document	✅
GET	/documents/sidebar		Author: String	{ "documents": Array }	200 OK	Récupérer les documents pour la barre latérale	✅
GET	/documents/trash		Author: String	{ "documents": Array }	200 OK	Récupérer les documents archivés	✅
POST	/documents/:id/archive		Author: String	{ "success": Bool }	200 OK	Archiver un document	✅
POST	/documents/:id/restore		Author: String	{ "success": Bool }	200 OK	Restaurer un document	✅
POST	/documents/:id/favorite		Author: String	{ "success": Bool }	200 OK	Ajouter un document aux favoris	✅
POST	/documents/:id/unfavorite		Author: String	{ "success": Bool }	200 OK	Retirer un document des favoris	✅
GET	/documents/favorite		Author: String	{ "documents": Array }	200 OK	Récupérer les documents favoris	✅
GET	/documents/favorite/count		Author: String	{ "count": Number }	200 OK	Compter les documents favoris	✅
POST	/documents/:id/shared		Author: String	{ "success": Bool }	200 OK	Partager un document	✅
GET	/documents/shared		Author: String	{ "documents": Array }	200 OK	Récupérer les documents partagés	✅
GET	/documents/search		Author: String	{ "documents": Array }	200 OK	Rechercher des documents	✅
DELETE	/documents/:id/removeicon		Author: String	{ "success": Bool }	200 OK	Supprimer l'icône d'un document	✅
GET	/documents/:id/coveroffset		Author: String	{ "offset": Object }	200 OK	Récupérer l'offset de la couverture d'un document	✅
PUT	/documents/:id/coveroffset	{ "offset": Object }	Author: String	{ "success": Bool }	200 OK	Mettre à jour l'offset de la couverture d'un document	✅

MCD Diagram

Modèle Logique de Données (MLD)

Table `User`

Nom de colonne	Type	Contraintes
`id`	`UUID`	PK, Généré par défaut
`email`	`String`	Unique, Non NULL
`name`	`String`	Optionnel
`password`	`String`	Non NULL
`createdAt`	`DateTime`	Défaut : `now()`
`updatedAt`	`DateTime`	Mis à jour automatiquement

Relations :

1:N avec Document (via documents).
N:N avec Document pour les documents partagés (via sharedDocuments et la relation nommée "SharedDocuments").

Table `Document`

Nom de colonne	Type	Contraintes
`id`	`UUID`	PK, Généré par défaut
`title`	`String`	Non NULL
`userId`	`UUID`	FK vers `User(id)`
`isArchived`	`Boolean`	Défaut : `false`
`parentDocumentId`	`UUID`	FK vers `Document(id)` (relation récursive)
`content`	`String`	Optionnel
`coverImage`	`String`	Optionnel
`icon`	`String`	Optionnel
`isPublished`	`Boolean`	Défaut : `false`
`urlPublished`	`String`	Unique, Optionnel
`createdAt`	`DateTime`	Défaut : `now()`
`updatedAt`	`DateTime`	Mis à jour automatiquement

Relations :

N:1 avec User (via ownerUser).
N:N avec User pour les documents partagés (via sharedUsers et la relation nommée "SharedDocuments").
1:N avec elle-même pour les documents enfants (via parentDocument et children).

Index :

idx_documents_by_user : sur userId.
idx_documents_by_user_parent : sur userId, parentDocumentId.

Relations entre Tables

User (1) ↔ (N) Document : Un utilisateur peut posséder plusieurs documents.
User (N) ↔ (N) Document (via sharedDocuments) : Les documents peuvent être partagés entre plusieurs utilisateurs.
Document (1) ↔ (N) Document : Relation parent-enfant pour structurer les documents.

Looping MLD

User

-----------------------------------------------
|                    User                     |
-----------------------------------------------
| id              : UUID (PK)                |
| email           : String (Unique)          |
| name            : String (Nullable)        |
| password        : String                   |
| role            : String (Default: "USER") |
| imageProfile    : String (Nullable)        |
| createdAt       : DateTime (Default: now)  |
| updatedAt       : DateTime (Auto-update)   |
| boardingStatus  : Boolean (Default: false) |
-----------------------------------------------
| FK: - documents (1:N -> Document.userId)   |
|     - sharedDocuments (N:M -> Document)    |
-----------------------------------------------

-----------------------------------------------
|                  Document                   |
-----------------------------------------------
| id               : UUID (PK)               |
| title            : String                  |
| userId           : UUID (FK -> User.id)    |
| isArchived       : Boolean (Default: false)|
| archivedId       : UUID (Nullable)         |
| isFavorite       : Boolean (Default: false)|
| parentDocumentId : UUID (Nullable)         |
| content          : String (Nullable)       |
| coverImage       : String (Nullable)       |
| offsety          : Float (Nullable)        |
| icon             : String (Nullable)       |
| isPublished      : Boolean (Default: false)|
| urlPublished     : String (Unique, Nullable)|
| createdAt        : DateTime (Default: now) |
| updatedAt        : DateTime (Auto-update)  |
-----------------------------------------------
| FK: - ownerUser (N:1 -> User)              |
|     - sharedUsers (N:M -> User)            |
|     - parentDocument (1:N Self-relation)   |
-----------------------------------------------
| Index: idx_documents_by_user               |
|        idx_documents_by_user_parent        |
-----------------------------------------------

-----------------------------------------------
|                   Image                     |
-----------------------------------------------
| id         : UUID (PK)                     |
| url        : String (Unique)               |
| filename   : String                        |
| filepath   : String                        |
| uploadedAt : DateTime (Default: now)       |
-----------------------------------------------

-----------------------------------------------
|                   Recover                   |
-----------------------------------------------
| id        : UUID (PK)                      |
| emailPrev : String                         |
| email     : String (Nullable)              |
| token     : String                         |
| createdAt : DateTime (Default: now)        |
-----------------------------------------------

🤝 Contribution

Les contributions sont les bienvenues !
Créez une branche, proposez vos modifications via une Pull Request et nous serons heureux de les examiner. 😊

🧑‍💻 Auteur

Martig Antonin

Merci d'avoir exploré ce projet ! 🌟

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Bookly - React + Express + JWT

Features

📂 Structure du projet

Front-End

Back-End

Project Index

🛠️ Technologies utilisées

Front-End :

Back-End :

📦 Installation et exécution (FRONT)

Prérequis :

Étapes :

📦 Installation et exécution (BACK)

Prérequis :

Étapes :

🔒 Authentification JWT

📖 API Routes

MCD Diagram

Modèle Logique de Données (MLD)

Table `User`

Relations :

Table `Document`

Relations :

Index :

Relations entre Tables

Looping MLD

User

🤝 Contribution

🧑‍💻 Auteur

About

Uh oh!

Releases

Packages

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 170 Commits
.vscode		.vscode
backend		backend
frontend		frontend
README.md		README.md
compose.dev.yaml		compose.dev.yaml
compose.yaml		compose.yaml
desktop.ini		desktop.ini
docker-compose.yml		docker-compose.yml

File Name	Summary
compose.dev.yaml	- Defines a Docker Compose configuration for a multi-service application, orchestrating a frontend built with React, a backend API, and a PostgreSQL database - Facilitates seamless communication between services through a shared network, while managing environment variables for secure configurations - Ensures that the application components are properly built, connected, and ready for deployment, enhancing the overall architecture of the project.
compose.yaml	- Defines a Docker Compose configuration for a web application architecture comprising a frontend, backend, and PostgreSQL database - Facilitates the orchestration of services, ensuring seamless communication and dependency management - The setup allows for local development with environment variables for secure configurations, while enabling persistent data storage and health checks for the database, all within a dedicated network.
README.md	- Bookly-React + Express + JWT## SummaryBookly is a project management and document management application inspired by Notion, designed to streamline the organization of notes and user interactions - The application leverages a React front-end to provide a user-friendly interface, allowing users to create, edit, and delete notes seamlessly - On the back-end, Express serves as a robust API that facilitates secure user authentication and efficient data management through a structured database - The integration of JSON Web Tokens (JWT) ensures secure authentication, enhancing user data protection - Overall, Bookly aims to deliver an intuitive and responsive experience for users managing their projects and documents effectively.
docker-compose.yml	- Defines the configuration for a Docker environment that facilitates the deployment of a backend service - It establishes essential parameters such as database connectivity, networking, and volume management, ensuring seamless integration with a PostgreSQL database - This setup supports efficient development and testing workflows by encapsulating the backend service within a containerized architecture, promoting consistency across different environments.

File Name	Summary
app.ts	- Establishes the core server functionality for the backend of the application, integrating essential routing for documents, authentication, images, and recovery processes - It configures middleware for JSON parsing and CORS, ensuring secure and flexible communication with the frontend - Additionally, it sets up a cron job for scheduled tasks, facilitating automated processes within the application - Overall, it serves as the backbone for handling API requests and responses.
Dockerfile	- Facilitates the deployment of the backend application in a production environment by creating a lightweight Docker container - It sets up the necessary working directory, installs dependencies, and prepares the application for execution - By exposing the appropriate port and executing the start command, it ensures seamless integration with other components of the codebase, enabling efficient interaction with the PostgreSQL database and overall application functionality.
tsconfig.json	- Configuration settings define the TypeScript compilation process for the backend of the project - By specifying options such as module type, ECMAScript target, and strict type checking, it ensures a robust development environment - This setup facilitates the inclusion of TypeScript and JavaScript files, while optimizing the output for better debugging and module resolution, ultimately contributing to a maintainable and scalable codebase architecture.
package.json	- Defines the configuration and dependencies for the backend of the project, facilitating the development and execution of a TypeScript-based application - It manages essential packages for server functionality, including Express for routing, Prisma for database interactions, and Nodemon for development convenience - This setup supports building, running, and maintaining a robust backend architecture, enabling seamless integration with front-end components and enhancing overall project efficiency.
start.sh	- Initiates the database migration process for the backend of the project - By executing the necessary migrations, it ensures that the database schema is up-to-date and aligned with the current application requirements - This step is crucial for maintaining data integrity and supporting the overall functionality of the application within the broader codebase architecture.

File Name	Summary
ImageRepository.ts	- ImageRepository serves as a centralized module for managing image data within the backend architecture - It facilitates the creation, updating, retrieval, and deletion of images, ensuring seamless interaction with the database - Additionally, it provides functionality to find images by their unique identifiers and links them to associated documents, thereby enhancing the overall image management capabilities of the application.
RecoveryRepository.ts	- RecoveryRepository facilitates the management of user recovery processes within the application - It enables the creation and retrieval of recovery emails and passwords, ensuring secure handling of user credentials - Additionally, it provides functionality to delete recovery records, enhancing data integrity and user experience - This repository plays a crucial role in the overall architecture by supporting user account recovery mechanisms efficiently.
AuthRepository.ts	- AuthRepository serves as a crucial component of the backend architecture, facilitating user management within the application - It provides essential functionalities such as retrieving user details by email or ID, creating new users, checking for duplicate emails, and updating user information - By leveraging Prisma for database interactions, it ensures efficient and reliable access to user data, supporting the overall authentication and authorization processes of the project.
DocumentRepository.ts	- DocumentRepository serves as a centralized interface for managing document-related operations within the application - It facilitates the retrieval, creation, updating, and deletion of documents, while also supporting features like document sharing, archiving, and favoriting - By providing a structured approach to document management, it enhances user interaction with documents and ensures efficient data handling across the codebase.

File Name	Summary
RecoveryRoutes.ts	- RecoveryRoutes facilitates user account recovery processes within the application - It defines endpoints for sending recovery emails, verifying tokens, and resetting passwords, ensuring secure authentication through middleware - By integrating with the RecoveryController, it streamlines user interactions related to account recovery, enhancing overall user experience and security in the codebase architecture.
AuthRoutes.ts	- AuthRoutes facilitates user authentication and management within the application - It defines endpoints for user registration, login, and profile management, ensuring secure access through authentication middleware - By providing functionalities such as user retrieval and password updates, it plays a crucial role in maintaining user sessions and data integrity, thereby enhancing the overall user experience in the codebase architecture.
ImageRoutes.ts	- ImageRoutes facilitates image management within the backend architecture by providing endpoints for uploading, retrieving, and deleting images - It utilizes multer for handling file uploads, ensuring that only valid image files are processed and stored in a designated directory - This routing module integrates seamlessly with the ImageController, enabling efficient image operations while maintaining a structured approach to file handling and storage.
DocumentRoutes.ts	- DocumentRoutes serves as a crucial component of the backend architecture, facilitating the management and retrieval of document-related data - It defines various endpoints for operations such as creating, updating, archiving, and sharing documents, while ensuring user authentication - This structure enhances the overall functionality of the application by providing a comprehensive interface for document interactions, thereby streamlining user experience and data management.

File Name	Summary
ImageController.ts	- ImageController facilitates image management within the application by providing endpoints for uploading, retrieving, and deleting images - It interacts with the ImageService to handle image data and metadata, ensuring seamless integration with the overall backend architecture - This controller enhances user experience by enabling efficient image storage and retrieval, while also managing error responses to maintain robust application functionality.
AuthController.ts	- AuthController facilitates user authentication and management within the application - It provides essential functionalities such as user registration, login, password verification, and user profile retrieval - Additionally, it supports administrative actions like fetching all users and updating user details - By leveraging JWT for secure token management, it ensures that user interactions are both authenticated and authorized, contributing to the overall security and integrity of the codebase architecture.
DocumentController.ts	- DocumentController manages document-related operations within the application, facilitating user interactions such as retrieving, creating, updating, and deleting documents - It ensures secure access through user authentication and authorization, particularly for admin actions - Additionally, it supports features like document sharing, archiving, and favoriting, thereby enhancing user experience and document management capabilities across the codebase.
RecoveryController.ts	- RecoveryController facilitates user account recovery processes, including email and password changes - It manages the sending of recovery emails, updates user information, and verifies tokens for secure operations - By integrating with AuthService and RecoveryService, it ensures that users can efficiently recover their accounts while maintaining security and tracking request information, thereby enhancing the overall user experience within the application.

File Name	Summary
RecoveryService.ts	- RecoveryService facilitates the management of user recovery processes within the application - It handles the registration of recovery emails and passwords, retrieves recovery identifiers based on previous emails, and allows for the deletion of recovery records - By ensuring secure and efficient recovery operations, it plays a crucial role in enhancing user experience and maintaining account security across the codebase.
AuthService.ts	- AuthService provides essential functionalities for user authentication and management within the backend architecture - It facilitates user registration, login, and token verification while ensuring secure password handling through hashing - Additionally, it supports user role checks and updates, enabling administrative oversight - By integrating with the AuthRepository, it streamlines user data interactions, contributing to a robust and secure authentication system for the overall application.
DocumentService.ts	- DocumentService provides a comprehensive set of functionalities for managing documents within the application - It facilitates operations such as retrieving, creating, updating, deleting, archiving, and restoring documents, while ensuring proper user authentication and authorization - Additionally, it supports document sharing, favoriting, and searching, thereby enhancing user collaboration and document organization in the overall codebase architecture.
ImageService.ts	- ImageService facilitates the management of image data within the application, enabling functionalities such as saving, updating, retrieving, and deleting images - By interacting with the ImageRepository and DocumentRepository, it ensures that image metadata is accurately stored and maintained, while also handling file operations - This service plays a crucial role in the overall architecture by providing a centralized interface for image-related operations, enhancing the applications media management capabilities.

File Name	Summary
postcss.config.js	- Configures PostCSS to enhance the styling capabilities of the frontend by integrating Tailwind CSS for utility-first design and Autoprefixer for automatic vendor prefixing - This setup streamlines the development process, ensuring consistent and responsive styling across various browsers, thereby contributing to a more efficient and maintainable codebase architecture.
tailwind.config.js	- Configures Tailwind CSS for a frontend application, enabling a responsive and customizable design system - It establishes dark mode support, defines content sources for styling, and extends the theme with a comprehensive color palette and animations - This setup enhances the user interface by ensuring consistent styling across various components and pages, ultimately contributing to a cohesive and visually appealing user experience.
nginx.conf	- Configures an Nginx server to handle HTTP and HTTPS traffic for the application hosted at maant.dipsw-ccicampus.dev - It ensures secure connections by redirecting HTTP requests to HTTPS and serves static files from a specified directory - Additionally, it facilitates API requests by proxying them to a backend service, enhancing the overall architectures efficiency and security.
Dockerfile	- Facilitates the building and deployment of a frontend application using Node.js and Nginx - It sets up a development environment, installs dependencies, compiles the application, and configures Nginx to serve the built assets - Additionally, it incorporates SSL certificates for secure connections, ensuring a robust and secure user experience within the overall project architecture.
config-overrides.js	- Configures the Webpack setup for the frontend of the project by establishing path aliases for easier module resolution and integrating Babel for JavaScript transpilation - Additionally, it customizes the development server settings to prevent automatic browser opening upon startup - This enhances the development experience and streamlines the code organization within the overall architecture of the application.
tsconfig.json	- Configuration of TypeScript compiler options facilitates the development of a React-based frontend application - It ensures strict type-checking, supports modern JavaScript features, and enables seamless integration of TypeScript with JavaScript files - By defining module resolution and path aliases, it enhances code organization and maintainability, ultimately contributing to a robust and scalable architecture for the overall project.
components.json	- Defines the configuration for the frontend components of the project, establishing a structured approach to styling and component management - It integrates Tailwind CSS for design consistency, sets up aliases for streamlined imports, and specifies the use of an icon library - This foundational setup enhances the overall architecture by promoting modularity and maintainability across the codebase.
package.json	- Defines the configuration and dependencies for the Bookly React frontend application, facilitating the development and build processes - It integrates various libraries for UI components, state management, form handling, and routing, ensuring a robust user experience - Additionally, it sets up scripts for development, testing, and production builds, streamlining the workflow for developers working on the project.

File Name	Summary
NotChange.tsx	- Displays an error message when a user encounters issues while attempting to change their email or password - Utilizing parameters from the URL, it provides specific feedback based on the type of error, enhancing user experience by guiding them on what went wrong - The layout is designed to be visually appealing and responsive, ensuring clarity and support during error scenarios within the application.
NotPublish.tsx	- NotPublishPage serves as a user-friendly interface for handling scenarios where a requested page is either unavailable or access is restricted - It effectively communicates the issue to users through a visually appealing layout, combining informative text with illustrative imagery - This component enhances the overall user experience by providing clear feedback and maintaining consistent design across the application.
404.tsx	- Provides a user-friendly 404 error page that enhances the overall user experience by clearly communicating when a requested page is not found - It offers a visually appealing layout with an option to navigate back to the home documents page, ensuring users can easily recover from navigation errors - This component integrates seamlessly into the frontend architecture, contributing to a cohesive and responsive web application.

File Name	Summary
trash-box.tsx	- TrashBox component facilitates the management of archived documents within the application - It allows users to search for specific documents, restore them back to active status, or permanently delete them - By integrating with the document context and utilizing modals for confirmation, it enhances user interaction while maintaining a clean and organized interface for document retrieval and management.
favorite-list.tsx	- Facilitates the display and interaction with a users favorite documents within the application - It retrieves and manages the favorite documents based on the provided parent ID, allowing users to expand and view additional details - The component enhances user navigation by enabling redirection to specific documents and dynamically updates the view as favorites change, contributing to a seamless user experience in the overall codebase architecture.
animation.js	- Animation functions enhance user experience by providing engaging visual transitions throughout the application - Key features include a preloader animation that smoothly introduces the landing page, menu opening and closing animations that create a dynamic navigation experience, and various reusable animations for elements like text and shapes - These animations contribute to a polished and interactive interface, aligning with the overall architectures focus on user engagement and aesthetic appeal.
publish.tsx	- Publish component facilitates the publishing and unpublishing of notes within the application - It provides users with a user-friendly interface to manage the visibility of their notes, allowing them to share content easily via a generated URL - Additionally, it incorporates feedback mechanisms to inform users of the publishing status and offers clipboard functionality for easy sharing - This enhances the overall user experience in the content management workflow.
user-item.tsx	- UserItem component enhances user interaction by displaying user information and providing a dropdown menu for actions - It showcases the users avatar and name, while allowing easy access to logout functionality - Integrated with authentication context, it ensures real-time updates of user data, contributing to a seamless user experience within the broader application architecture focused on user management and engagement.
card-add.tsx	- CardAdd serves as a user interface component within the project, designed to facilitate the addition of new pages - Its visually appealing layout, featuring a prominent + symbol and a subtle hover effect, enhances user engagement - Positioned within the broader architecture, this component contributes to a seamless and interactive experience, encouraging users to expand their content effortlessly.
navigation.tsx	- Navigation component facilitates user interaction within the application by providing a sidebar and a responsive navbar - It enables document management features such as creating, favoriting, and accessing archived documents, while adapting to different screen sizes - Additionally, it integrates user settings and search functionalities, enhancing the overall user experience and accessibility of the application’s core features.
document-list.tsx	- Facilitates the display and interaction with a hierarchical list of documents within the application - It retrieves documents based on a parent ID, allowing users to expand and navigate through nested document structures - By integrating with context and query hooks, it ensures real-time updates and efficient data fetching, enhancing user experience in managing and accessing documents seamlessly.
tooltip.tsx	- Provides a Tooltip component designed to enhance user experience by displaying contextual information - Positioned dynamically, it overlays text on the main content, ensuring visibility and accessibility - This component integrates seamlessly into the broader frontend architecture, allowing developers to enrich interactive elements with informative tooltips, thereby improving usability and engagement within the application.
cover.tsx	- Cover component facilitates the display and management of a cover image within the application - It allows users to reposition the image and delete it if necessary, enhancing the user experience by providing interactive controls - Integrated with context hooks, it updates the document state and image offset dynamically, ensuring a seamless interaction with the overall codebase architecture focused on document management and image handling.
navbar.tsx	- Facilitates the rendering of a responsive navigation bar within the application, integrating document management functionalities - It retrieves and displays document details, handles loading states, and navigates users to a 404 page if documents are unavailable - Additionally, it incorporates components for document publishing and menu options, enhancing user interaction while providing contextual information about archived documents.
item.tsx	- Item component facilitates the display and interaction with documents within the application - It allows users to create, archive, and favorite documents while providing a dropdown menu for additional actions - The component enhances user experience by visually indicating document hierarchy and status, and it integrates seamlessly with authentication and theme contexts, ensuring a cohesive and responsive interface for managing documents.
title.tsx	- Title component facilitates the editing and display of document titles within the application - It allows users to switch between viewing and editing modes, updating the title in real-time while ensuring synchronization with the backend - By leveraging React hooks and context, it enhances user interaction and maintains data consistency across the application, contributing to a seamless document management experience.
card-document.tsx	- CardDocument serves as a visually engaging component within the projects frontend architecture, designed to display document-related information in a user-friendly format - It showcases an image, relevant details about the document, and the current users avatar, enhancing the overall user experience - By integrating user authentication context, it personalizes the display, indicating the document's status and ownership, thereby fostering interaction and clarity in the application.
toolbar.tsx	- Toolbar component facilitates user interaction with document titles in a dynamic and intuitive manner - It allows users to edit titles, select icons, and add cover images, enhancing the overall document management experience - By integrating with the applications context and query management, it ensures real-time updates and a seamless user interface, contributing significantly to the projects architecture focused on collaborative document editing.
editor.tsx	- Provides a rich text editing experience within the application, enabling users to create and modify content seamlessly - By integrating the BlockNote editor, it allows for dynamic content management while supporting both light and dark themes - The component captures changes in real-time, ensuring that updates are reflected immediately, thus enhancing user interaction and engagement with the content creation process.
menu.tsx	- Provides a user-friendly dropdown menu component for managing document actions within the application - It enables users to archive documents seamlessly while displaying relevant user information - The component enhances the overall user experience by integrating toast notifications for feedback and adapting to the current theme, ensuring a consistent and visually appealing interface across the application.
banner.tsx	- Banner component facilitates user interaction with documents that are in the trash - It provides options to restore or permanently delete a document, enhancing user experience by allowing easy management of document states - By integrating with context hooks for document operations and utilizing toast notifications for feedback, it ensures a seamless and responsive interface within the broader application architecture focused on document management.
preloader.tsx	- Provides a visually engaging preloader component for the Bookly application, enhancing user experience during loading times - By displaying a welcoming message, it sets a friendly tone for users as they navigate the platform - This component integrates seamlessly within the frontend architecture, contributing to the overall aesthetic and functionality of the application while ensuring a smooth transition into the main content.

File Name	Summary
Footer.tsx	- Footer component enhances the user interface by providing essential navigation links, including Privacy Policy and Terms & Conditions, while maintaining a consistent design across the application - Positioned at the bottom of the page, it ensures accessibility and visibility, contributing to a user-friendly experience - This component integrates seamlessly with the overall architecture, reinforcing the projects commitment to clarity and usability in its frontend design.
Navbar.tsx	- Navbar component enhances user navigation by providing a fixed top interface that includes branding, a login button, and a mode toggle for light and dark themes - It dynamically adjusts its appearance based on scroll position, ensuring a consistent and engaging user experience - This component plays a crucial role in the overall architecture by facilitating user interactions and maintaining visual coherence across the application.
Login.tsx	- Facilitates user authentication by providing a login interface within the application - It allows users to enter their email and password, handle login attempts, and manage error messages - Additionally, it offers options for password recovery and user registration through pop-up dialogs, enhancing the overall user experience and security of the application - This component plays a crucial role in the user management aspect of the codebase architecture.
Logo.tsx	- Renders a responsive logo component for the Bookly application, facilitating navigation to the homepage - It adapts to light and dark themes by displaying different logo images based on the users preference - Positioned within the home page structure, this component enhances the user interface and brand visibility, contributing to an engaging user experience across various devices.
Preview.tsx	- Preview component enhances the user experience by displaying synchronized video content based on the current theme (light or dark) - It facilitates user engagement through a prominent call-to-action button, while managing video playback and error handling seamlessly - This component plays a crucial role in the overall architecture by integrating visual elements that align with the applications thematic design, ensuring a cohesive and interactive interface.
Register.tsx	- RegisterPage component facilitates user registration within the application, providing a user-friendly interface for inputting essential information such as email, username, and password - It incorporates validation to ensure data integrity and handles user interactions, including error messaging and navigation to the login interface upon successful registration - This component plays a crucial role in the overall user authentication flow of the project.
Heading.tsx	- Consolidating ideas, documents, and projects in one place - It encourages user engagement through a call-to-action button that opens a login popup, facilitating seamless access to the platform - This component enhances the user experience by providing a visually appealing and informative entry point into the application.

File Name	Summary
use-cover-image.tsx	- Facilitates the management of cover image states within the application by providing a context for opening, closing, and replacing cover images associated with specific documents - It enables components to access and manipulate the visibility and identity of cover images seamlessly, enhancing user experience and interaction throughout the frontend architecture - This context-driven approach promotes a clean and organized state management strategy.
use-boarding.tsx	- Facilitates a context-driven approach to manage the state of a boarding process within the application - By providing a centralized store for the boarding status, it enables components to easily access and modify the visibility of the boarding interface - This enhances user experience by allowing seamless interactions with the boarding feature throughout the application.
use-origin.tsx	- Provides a custom React hook that retrieves the origin of the current window location, ensuring it only executes in a browser environment - By managing the mounted state, it guarantees that the origin is returned only after the component has fully mounted - This functionality is essential for components that rely on the current URL context, enhancing the overall user experience within the application.
usePromise.tsx	- UsePromise serves as a custom React hook designed to simplify the handling of asynchronous operations within the application - By managing the loading state, error handling, and data retrieval from promises, it enhances the user experience by providing a clear and efficient way to work with asynchronous data - This hook integrates seamlessly into the broader architecture, promoting cleaner code and improved maintainability across the frontend components.
use-document-admin.tsx	- Facilitates the management of document editing states within the application by providing a context for opening and closing document editing interfaces - It enables components to access and manipulate the visibility of the document editor and the currently selected document, ensuring a cohesive user experience in the document administration workflow - This enhances the overall architecture by promoting state management and context usage across the frontend.
use-options.tsx	- Provides a context for managing the visibility of a settings interface within the application - It encapsulates the state and behavior related to opening and closing the settings, allowing components to easily access and manipulate this state - By utilizing a context provider, it ensures that any child component can seamlessly interact with the settings state, promoting a cohesive user experience across the codebase.
use-panel.tsx	- Facilitates the management of a panels open and closed states within the application - By providing a context for the panels visibility and associated actions, it enables components to easily access and manipulate the panel's state - This enhances the user experience by allowing seamless interactions with the panel across the frontend, ensuring consistent behavior throughout the application.
use-scroll-top.tsx	- Provides a custom React hook that tracks the users scroll position, determining whether it exceeds a specified threshold - This functionality enhances user experience by enabling components to respond dynamically to scrolling behavior, such as displaying or hiding elements based on the scroll state - It integrates seamlessly within the frontend architecture, contributing to a more interactive and responsive application.
use-search.tsx	- Provides a context and custom hook for managing the search functionality within the application - It enables components to easily access and control the visibility of the search interface, facilitating a seamless user experience - By encapsulating the state and behavior related to search, it promotes a clean architecture and enhances maintainability across the codebase.

File Name	Summary
ErrorHandler.tsx	- Error handling functionality enhances user experience by providing clear feedback on issues encountered during API interactions - It captures various error scenarios, displaying relevant messages through toast notifications, and redirects users to the login page when authentication fails - This component plays a crucial role in maintaining application stability and guiding users effectively within the overall architecture of the frontend application.
icon-picker.tsx	- IconPicker facilitates the selection of emojis within the application, enhancing user interaction by providing a visually appealing and organized interface - It allows users to filter emojis by description, view them categorized, and select or randomize their choices - This component integrates seamlessly into the broader frontend architecture, promoting a cohesive user experience while leveraging theming and popover functionalities.
mode-toggle.tsx	- ModeToggle facilitates user interaction with theme preferences in the application, allowing seamless switching between light and dark modes - By integrating with the theme context, it enhances the user experience by providing a visually appealing and accessible way to customize the interface - This component plays a crucial role in the overall architecture by promoting user personalization and engagement within the frontend ecosystem.
single-image-dropzone.tsx	- SingleImageDropzone facilitates the user-friendly upload of a single image file within the application - It provides visual feedback for drag-and-drop interactions, displays error messages for invalid file types or sizes, and allows users to preview the selected image - This component enhances the overall user experience by streamlining image uploads while ensuring adherence to specified file constraints.
search-command.tsx	- SearchCommand facilitates a dynamic document search experience within the application, allowing users to quickly find and navigate to their documents - It integrates with authentication and document contexts to retrieve and display relevant results, while also providing keyboard shortcuts for ease of access - This component enhances user interaction by presenting a responsive dialog that updates based on user input and selections.

File Name	Summary
popup-context.tsx	- Provides a context for managing popup states within the application - It enables components to easily open and close popups while maintaining the current popup type - By utilizing a centralized context, it streamlines the interaction with popups across the frontend, ensuring a consistent user experience and simplifying state management for popup-related functionalities throughout the codebase.
useAnimation.tsx	- Facilitates animation management within the application by providing a context for tracking the completion state of animations - It initializes an animation sequence and updates the state accordingly, allowing components to react to animation status changes - This enhances user experience by ensuring that animations are properly handled and synchronized across the frontend, contributing to a seamless interface.
useImage.tsx	- Image context management enables seamless image upload and removal functionalities within the application - By leveraging authentication details, it ensures secure interactions with the image service - This component provides a centralized context for managing image-related operations, enhancing the user experience by allowing easy integration of image handling features throughout the frontend architecture.
useTheme.tsx	- Theme management functionality enhances the user experience by allowing dynamic switching between light and dark themes within the application - It provides a context for theme state, enabling components to access and modify the current theme seamlessly - Additionally, it ensures that user preferences are persisted in local storage and updates the favicon accordingly, contributing to a cohesive and visually appealing interface across the codebase.
useAuth.tsx	- Provides an authentication context for managing user sessions within the application - It facilitates user registration, login, and profile updates while maintaining authentication state and handling token management - Additionally, it offers methods for password recovery and user retrieval, ensuring a seamless user experience across the frontend - This context is integral to the overall architecture, enabling secure access and user management throughout the application.
useDocuments.tsx	- Document management functionality is provided through a context that facilitates the creation, retrieval, updating, and deletion of documents within the application - It supports user-specific operations such as favoriting, archiving, and sharing documents, while also enabling search capabilities - This context serves as a centralized state management solution, ensuring that document-related data is consistently accessible and manageable across the frontend components of the application.
themeContext.tsx	- Theme management is facilitated through a context provider that allows components to access and modify the applications theme state - By storing the users theme preference in local storage, it ensures a consistent experience across sessions - This functionality enhances the overall user interface by enabling dynamic theme switching between light and dark modes, contributing to a more personalized and visually appealing application.

File Name	Summary
panel-admin.tsx	- View and Manage UsersAdministrators can access a list of users, sort them based on various criteria, and update their roles or information as needed.-Handle DocumentsThe component provides functionality to view and manage documents, ensuring that all necessary documentation is organized and up-to-date.-Search and FilterUsers can search for specific users or documents, making it easier to find relevant information quickly.## UsageThis component is designed to be integrated into the broader application architecture, where it interacts with various hooks and context providers to fetch and manipulate data - It enhances the overall user experience by providing a responsive and intuitive interface for administrative tasks.By utilizing this modal, administrators can maintain control over user management and document organization, contributing to the overall efficiency and effectiveness of the application.
confirm-modal.tsx	- ConfirmModal serves as a user interface component that facilitates confirmation actions within the application - By presenting a dialog that prompts users to confirm or cancel potentially destructive actions, such as deletions, it enhances user experience and prevents accidental data loss - This component integrates seamlessly into the broader architecture, ensuring consistent interaction patterns across the frontend.
boarding-modal.tsx	- BoardingModal facilitates user profile configuration within the application, allowing users to upload an image and set a username - It integrates with various hooks to manage state and user authentication, ensuring a seamless onboarding experience - By providing a dialog interface, it enhances user interaction, enabling easy submission of profile details while maintaining a responsive design.
document-admin-modal.tsx	- AdminEditDocumentModal facilitates the editing of documents within the application by providing a modal interface for administrators - It integrates user authentication and document management functionalities, allowing for seamless updates and retrieval of document information - The modal enhances user experience by overlaying a focused editing environment, ensuring that administrators can efficiently manage document content while maintaining a clear and organized workflow.
settings-modal.tsx	- SettingsModal facilitates user account management and preferences within the application - It provides an interface for users to update their personal information, change email and password, and manage account settings - Additionally, it allows users to customize the appearance of the interface and includes a confirmation process for account deletion, enhancing user experience and security in the overall codebase architecture.
password-change-modal.tsx	- Facilitates a user-friendly modal for changing passwords within the application - It prompts users to enter their current password, a new password, and a confirmation of the new password, ensuring validation at each step - By integrating with authentication context, it verifies the current password and provides feedback on password strength and matching, enhancing the overall security and user experience in the application.
cover-image-modal.tsx	- CoverImageModal facilitates the user experience for uploading and managing cover images within the application - It provides a dialog interface that allows users to select an image, which is then uploaded and associated with a specific document - By integrating with various hooks and context providers, it ensures seamless interaction with the applications state and document management, enhancing the overall functionality of the frontend architecture.
mail-change-modal.tsx	- InputMailModal serves as a user interface component for prompting users to enter and confirm a new email address - It enhances the overall user experience by providing a modal dialog that includes input validation and clear action buttons - This component integrates seamlessly into the broader application architecture, facilitating email updates while maintaining a consistent design and interaction pattern across the frontend.

File Name	Summary
input-name.tsx	- Facilitates user interaction for editing and updating a users name within the application - By providing an input field that toggles between display and edit modes, it allows users to modify their profile name seamlessly - Changes are captured and sent to the backend for updating, ensuring the user interface remains in sync with the underlying data, enhancing the overall user experience in the application.
input-email.tsx	- InputEmail component facilitates the editing of a users email address within a modal interface - It allows users to toggle between viewing and editing their email, ensuring real-time validation and updates - Upon entering a valid email, changes are saved and reflected in the user profile, enhancing user experience by providing immediate feedback and maintaining data integrity across the application.
input-title.tsx	- InputTitle component facilitates the editing of document titles within a modal interface - It allows users to toggle between viewing and editing states, updating the title in real-time while ensuring changes are reflected in the application state - By leveraging React hooks and context, it enhances user interaction and maintains synchronization with the document data, contributing to a seamless user experience in the overall project architecture.
action-document.tsx	- ActionDocument facilitates the management of document states within the application, allowing users to publish, unpublish, archive, and restore documents seamlessly - It integrates with the context of document management and utilizes a popover interface for user interactions, ensuring a smooth experience - By leveraging real-time updates and notifications, it enhances user engagement and maintains the integrity of document workflows across the codebase.

File Name	Summary
input.tsx	- Input component serves as a customizable and reusable UI element within the frontend architecture, enhancing user interaction by providing a styled input field - It integrates seamlessly with the overall design system, ensuring consistency in appearance and behavior across the application - By leveraging Reacts forwardRef, it allows for flexible usage in various contexts, promoting efficient form handling and user experience.
popover.tsx	- Popover component enhances user interaction by providing a customizable overlay that displays additional information or options when triggered - It integrates seamlessly into the UI, allowing for flexible positioning and styling - This component is essential for creating intuitive interfaces, enabling users to access contextual content without cluttering the main view, thereby improving overall user experience within the application.
button.tsx	- Provides a versatile button component designed for a React application, enabling consistent styling and behavior across various use cases - It supports multiple visual variants and sizes, enhancing the user interface by allowing developers to easily implement buttons that align with the overall design system - This component contributes to a cohesive user experience within the broader frontend architecture.
dialog.tsx	- Provides a customizable dialog component for the user interface, enhancing user interaction by presenting modal content effectively - It integrates various subcomponents such as headers, footers, titles, and descriptions, allowing for a structured and visually appealing presentation of information - This component is essential for managing user prompts and confirmations within the broader application architecture, ensuring a seamless user experience.
label.tsx	- Label component serves as a customizable UI element within the frontend architecture, enhancing form accessibility and usability - By leveraging Radix UIs label primitives and a utility for class variance, it ensures consistent styling and behavior across various contexts - This component integrates seamlessly into the broader application, promoting a cohesive design language while maintaining flexibility for developers.
alert-dialog.tsx	- Provides a customizable alert dialog component for user interactions within the frontend application - It enhances user experience by presenting critical information and actions in a modal format, ensuring clarity and focus - The component integrates seamlessly with the overall architecture, leveraging Radix UI for accessibility and styling utilities for consistent design across the application.
dropdown-menu.tsx	- Dropdown menu components enhance user interaction by providing a flexible and accessible way to present options within the UI - These components, built using Radix UI, allow for the creation of nested menus, checkable items, and radio selections, all styled for a cohesive look - They contribute to the overall architecture by ensuring a consistent and intuitive navigation experience across the application.
avatar.tsx	- Provides a customizable avatar component suite for user interfaces, enhancing the visual representation of user profiles - It includes a main avatar container, an image display, and a fallback option for when the image is unavailable - This component integrates seamlessly with the overall project architecture, promoting a consistent and user-friendly design across the frontend application.
separator.tsx	- Provides a customizable separator component that enhances the user interface by visually dividing content - It supports both horizontal and vertical orientations, allowing for flexible design choices - By integrating with Radix UIs separator primitives, it ensures accessibility and consistent styling, contributing to a cohesive and polished frontend experience within the overall project architecture.
command.tsx	- Provides a set of React components for a command interface, enhancing user interaction within the application - It includes elements such as dialogs, input fields, lists, and items, all styled for a cohesive user experience - This architecture facilitates efficient command execution and navigation, contributing to a more intuitive and responsive frontend design.

File Name	Summary
imageService.tsx	- ImageService facilitates the uploading and removal of images within the application, streamlining interactions with the backend API - It manages file uploads by creating form data and handles deletions through specified document IDs - Additionally, it ensures robust error handling and authorization through token management, contributing to a seamless user experience in managing image assets across the platform.
recoveryService.tsx	- RecoveryService facilitates user account recovery processes within the application by providing essential functionalities such as sending recovery emails, resetting passwords, and verifying recovery tokens - It interacts with the backend API to ensure secure communication and error handling, thereby enhancing user experience during account recovery scenarios - This service is integral to maintaining user access and security in the overall codebase architecture.
authService.tsx	- AuthService provides essential functionalities for user authentication and management within the application - It facilitates user login, registration, password verification, and profile updates while ensuring secure communication with the backend through token-based authorization - Additionally, it allows for user data retrieval and validation, contributing to a seamless user experience and robust security framework in the overall codebase architecture.
documentsService.tsx	- DocumentService provides a comprehensive set of functionalities for managing documents within the application - It enables users to create, retrieve, update, delete, and share documents, as well as manage archived and favorite documents - Additionally, it supports searching for documents and handling document icons and cover images - This service acts as a crucial intermediary between the frontend and backend, ensuring seamless document operations and user interactions.

HydroTuConnais/bookly

Folders and files

Latest commit

History

Repository files navigation

Bookly - React + Express + JWT

Features

📂 Structure du projet

Front-End

Back-End

Project Index

🛠️ Technologies utilisées

Front-End :

Back-End :

📦 Installation et exécution (FRONT)

Prérequis :

Étapes :

📦 Installation et exécution (BACK)

Prérequis :

Étapes :

🔒 Authentification JWT

📖 API Routes

MCD Diagram

Modèle Logique de Données (MLD)

Table User

Relations :

Table Document

Relations :

Index :

Relations entre Tables

Looping MLD

User

🤝 Contribution

🧑‍💻 Auteur

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Table `User`

Table `Document`

Packages