Home   system-design  

System design for Jira - System design interview

Below is a high-level overview of the components and the tech stack involved, along with simplified code snippets to illustrate basic concepts when building Jira like system.

Components of a Jira-like System

  1. Backend Server

    • Manages user authentication, project management, issue tracking, collaboration features (boards, sprints), and notifications.
    • Tech Stack: Node.js, Express.js, MongoDB or PostgreSQL (for data storage), WebSocket for real-time updates.
  2. Database

    • Stores user profiles, projects, issues, boards, sprints, comments, etc.
    • Tech Stack: MongoDB or PostgreSQL for relational data storage.
  3. Authentication

    • Registers users, manages login/logout, and access control.
    • Tech Stack: JSON Web Tokens (JWT) for authentication, bcrypt for password hashing.
  4. Project and Issue Management

    • Handles CRUD operations for projects, boards, issues, sprints, etc.
    • Tech Stack: Express.js (RESTful APIs), WebSocket for real-time updates.
  5. Collaboration Features

    • Enables collaboration through issue assignment, comments, attachments, and notifications.
    • Tech Stack: WebSocket (for real-time updates), RESTful APIs for CRUD operations.
  6. Frontend Client (Web Interface)

    • Provides user interface for project management, issue tracking, boards, and collaboration.
    • Tech Stack: React.js, Redux for state management, Material UI or Bootstrap for UI components.
  7. Notifications

    • Sends notifications for issue updates, assignments, mentions, and other activities.
    • Tech Stack: WebSocket (for real-time notifications), Email notifications.

Low-Level Overview and Sample Code

Here's a simplified outline with sample code snippets for key components:

Backend Server (Node.js with Express)

  1. User Authentication and Registration

    const express = require('express');
    const bcrypt = require('bcrypt');
    const jwt = require('jsonwebtoken');
    const User = require('./models/User');
    
    const app = express();
    const secretKey = 'your_secret_key';
    
    // Register a new user
    app.post('/api/register', async (req, res) => {
        try {
            const { username, password } = req.body;
            const hashedPassword = await bcrypt.hash(password, 10);
            const newUser = new User({ username, password: hashedPassword });
            await newUser.save();
            res.status(201).json({ message: 'User registered successfully' });
        } catch (err) {
            res.status(500).json({ error: err.message });
        }
    });
    
    // User login
    app.post('/api/login', async (req, res) => {
        try {
            const { username, password } = req.body;
            const user = await User.findOne({ username });
            if (!user) {
                return res.status(404).json({ message: 'User not found' });
            }
            const isMatch = await bcrypt.compare(password, user.password);
            if (!isMatch) {
                return res.status(401).json({ message: 'Invalid credentials' });
            }
            const token = jwt.sign({ userId: user._id }, secretKey, { expiresIn: '1h' });
            res.json({ token });
        } catch (err) {
            res.status(500).json({ error: err.message });
        }
    });
    
    app.listen(3000, () => {
        console.log('Server started on port 3000');
    });
    
  2. Project and Issue Management

    const express = require('express');
    const Project = require('./models/Project');
    const Issue = require('./models/Issue');
    
    const app = express();
    
    // Create a new project
    app.post('/api/projects', async (req, res) => {
        try {
            const { projectName, description } = req.body;
            const newProject = new Project({ projectName, description });
            await newProject.save();
            res.status(201).json({ message: 'Project created successfully' });
        } catch (err) {
            res.status(500).json({ error: err.message });
        }
    });
    
    // Create a new issue
    app.post('/api/issues', async (req, res) => {
        try {
            const { projectId, title, description, assignedTo } = req.body;
            const newIssue = new Issue({ projectId, title, description, assignedTo });
            await newIssue.save();
            res.status(201).json({ message: 'Issue created successfully' });
        } catch (err) {
            res.status(500).json({ error: err.message });
        }
    });
    
    app.listen(3000, () => {
        console.log('Server started on port 3000');
    });
    

Frontend Client (React.js)

  1. Project and Issue Management

    import React, { useState, useEffect } from 'react';
    import axios from 'axios';
    
    const ProjectList = () => {
        const [projects, setProjects] = useState([]);
    
        useEffect(() => {
            axios.get('/api/projects')
                .then(res => setProjects(res.data))
                .catch(err => console.error('Error fetching projects:', err));
        }, []);
    
        return (
            <div>
                <h1>My Projects</h1>
                <ul>
                    {projects.map(project => (
                        <li key={project.id}>
                            <a href={`/project/${project.id}`}>{project.projectName}</a>
                        </li>
                    ))}
                </ul>
            </div>
        );
    };
    
    export default ProjectList;
    
Published on: Jul 10, 2024, 01:56 AM  
 

Comments

Add your comment