DOCSEARCHbyAlgolia
Submit Docs

jira_clone

repository·master·Indexed 27 days ago

https://github.com/oldboyxx/jira_clone

A simplified Jira clone built with React (functional components and hooks) and Node.js (TypeScript and TypeORM). The project features a modular client architecture and an Express API with TypeORM entities for Users, Projects, Issues, and Comments. It includes a Kanban board view with filtering, JWT-based authentication, and a custom error handling system.

Tokens
11.3K
Snippets
2
Records
96
Agent score
95%

What's inside jira_clone

  1. Understand the API project structure

    master

    The jira_api codebase follows a standard Express and TypeORM architecture. Key directories and files include:

    • src/index.ts: The entry point for setting up middleware, attaching routes, and initializing the database and Express server.
    • src/routes.ts: Definitions for all public and private routes.
    • src/controllers: Request handlers that interact with entities and the database to perform CRUD operations.
    • src/entities: TypeORM models defining database columns, relations, and validations.
    • src/database: Database-related logic and seed files.
    • src/middleware: Functions that modify requests/responses (e.g., authenticateUser which verifies tokens and attaches currentUser to the request).
    • src/serializers: Data transformation logic used to format database entities before sending them to the client.
    • src/errors: Custom error definitions and the catchErrors utility to handle asynchronous errors without repetitive try/catch blocks.
    • src/constants: Immutable values used throughout the application.
    • src/utils: Helper functions, such as TypeORM validation utilities.

  2. Understand the client project structure

    master

    The client application follows a modular architecture designed to prevent cross-module side effects. The codebase is organized into 'modules' based on application routes.

    The Core Rule: Files within a module (e.g., Auth or Project) can only import from:

    1. Ancestor folders within the same module.
    2. The src/shared directory.

    This structure ensures that changes in one module do not introduce bugs in another.

  3. Run Cypress end-to-end tests

    master

    To execute the end-to-end test suite using Cypress, ensure your development environment is set up and follow these steps:

    1. Test Database: Create a database named jira_test.
    2. Start Test API: Run the API in test mode:
      cd api && npm run start:test
    3. Run Cypress: In a separate terminal, run the client tests:
      cd client && npm run test:cypress

  4. Set up the development environment

    master

    To run the Jira clone locally, follow these steps to configure the PostgreSQL database and start both the API and Client services.

    1. Database Setup: Install PostgreSQL and create a database named jira_development.
    2. Clone Repository:
      git clone https://github.com/oldboyxx/jira_clone.git
    3. Configure API Environment: Create an empty .env file in the /api directory. Copy the contents of /api/.env.example into it and update the database username and password.
    4. Install Dependencies: Run npm run install-dependencies from the root directory.
    5. Start API:
      cd api && npm start
    6. Start Client: In a new terminal tab, run:
      cd client && npm start

    The application will be available at http://localhost:8080/.

    git clone https://github.com/oldboyxx/jira_clone.git
npm run install-dependencies
cd api && npm start
cd client && npm start

  5. Initialize the Jira API server

    master
    The API server is an Express-based application that requires a database connection to be established before the server starts listening. It uses dotenv for environment variable configuration and reflect-metadata for dependency injection/metadata support. The server listens on the port specified by the PORT environment variable, defaulting to 3000.

  6. Run the client development server

    master

    The client-side server is an Express application that serves the production build of the React application. It uses compression for performance and express-history-api-fallback to support client-side routing by redirecting non-static requests to index.html.

    The server listens on the port specified by the PORT environment variable, defaulting to 8081.

  7. Configure environment variables for the Jira API

    master

    The jira_api requires several environment variables to connect to the database and handle authentication. You can use the following keys in your .env file to configure the server environment.

    NODE_ENV=development
DB_HOST=localhost
DB_PORT=5432
DB_USERNAME=your_database_username
DB_PASSWORD=your_database_password
DB_DATABASE=jira_development
JWT_SECRET=development12345

  8. Reference the client directory layout

    master

    The following table describes the purpose of each key file and folder within the src directory:

    File or folderDescription
    src/index.jsxThe entry file. Imports babel polyfills and renders the App into the root DOM node.
    src/index.htmlThe single HTML file. Webpack injects scripts and styles here.
    src/AppGlobal components, main application routes, global CSS, and fonts. Acts as the ancestor to all modules.
    src/AuthThe Authentication module.
    src/ProjectThe Project module.
    src/sharedReusable components, constants, utils, hooks, and styles accessible by any module.

  10. Use the TextEditor component

    master

    The TextEditor component is a wrapper around the Quill rich text editor. It allows you to render a text editor with a 'snow' theme and a pre-configured toolbar.

    Note: While the component accepts a value prop, it treats it as an alias for defaultValue to maintain compatibility with form components. It does not update the Quill instance on every render for performance reasons; use defaultValue for initial content.

  11. Configure ProjectBoardIssueDetailsPriority props

    master

    The ProjectBoardIssueDetailsPriority component accepts the following props:

    • issue (Object, Required): The issue object. It must contain a priority property.
    • updateIssue (Function, Required): A callback function triggered when a new priority is selected. It receives an object containing the updated field, e.g., { priority: 'NEW_PRIORITY_VALUE' }.

  12. Use the Modal component

    master

    The Modal component is a versatile overlay used to display content in either a centered or side-aligned (aside) layout. It supports both controlled and uncontrolled modes of operation.

    Modes of Operation

    1. Uncontrolled Mode: If you do not provide the isOpen prop, the component manages its own open/closed state. You must use the renderLink prop to provide a trigger (like a button) that calls the open function provided in its arguments.
    2. Controlled Mode: If you provide the isOpen prop, the component relies on you to manage the state. You must also provide an onClose callback to handle closing the modal (e.g., when clicking the overlay, pressing Escape, or clicking the close icon).

    Key Features

    • Variants: Supports center (default) and aside layouts.
    • Accessibility: Automatically handles Escape key presses to close and prevents body scrolling when the modal is open.
    • Outside Click: Closes the modal when clicking the overlay area.
    • Portals: Renders the modal content into the #root DOM element using ReactDOM.createPortal.