DragMe

DragMe is a simple, intuitive Kanban board web application designed to help you and your team manage tasks and visualize project workflows with ease. With its powerful drag-and-drop functionality, customizable views, and a clean, modern interface, DragMe makes organization effortless.

---

✨ Features

• Drag-and-Drop: Seamlessly move task cards between columns or reorder them within a column.
• In-Place Editing: Edit task titles and descriptions directly on the card.
• Task Cards: Create and manage individual task cards with titles, descriptions, and tags.
• Tagging System: Categorize tasks with custom tags for better organization and filtering.
• Column Management: Add, delete, and lock columns to fit your workflow.
• Dark Mode: A comfortable viewing experience with a user-friendly dark theme.
• Firebase Integration: Real-time data persistence with Firestore.

---

🚀 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js
• npm (Comes with Node.js)

Installation

1. Clone the repo:

   git clone https://github.com/MarioLJFerreira/mini-dragme

2. Navigate to the project directory:

   cd mini-dragme

3. Install NPM packages:

   npm install

4. Set up environment variables:

   # Copy the example file and add your Firebase configuration
   cp .env.example .env.local
   # Edit .env.local with your Firebase values (see ENVIRONMENT_SETUP.md)

5. Run the development server:

   npm run dev

The app will be available at http://localhost:5173.

---

🧪 Running Tests

The project uses Vitest as the testing framework. You can run the tests with the following command:

npm test

---

📂 Project Structure

The project is structured to be modular and scalable, with clear separation of concerns. Below is a detailed breakdown of the main directories and their contents.

mini-dragme/
│
├── .env.example            # Environment variables template for development setup.
├── .firebaserc             # Firebase project configuration.
├── .gitignore              # Git ignore rules for the project.
├── ENVIRONMENT_SETUP.md    # Guide for setting up environment variables.
├── eslint.config.js        # ESLint configuration for code quality.
├── firebase.json           # Firebase hosting and Firestore configuration.
├── firestore.indexes.json  # Firestore database indexes configuration.
├── firestore.rules         # Firestore security rules.
├── index.html              # Main HTML entry point for the Vite application.
├── package.json            # Project dependencies and scripts configuration.
├── package-lock.json       # Locked versions of dependencies for consistent installs.
├── README.md               # Project documentation and setup instructions.
├── vite.config.js          # Vite build tool configuration.
│
├── .github/                # GitHub configuration and workflows.
│   └── workflows/          # GitHub Actions CI/CD workflows.
│       ├── firebase-hosting-merge.yml      # Deploy to production on main branch.
│       └── firebase-hosting-pull-request.yml # Deploy preview on pull requests.
│
├── public/                 # Static assets served directly by the web server.
│   ├── 404.html           # Custom 404 error page.
│   ├── index.html         # Firebase hosting welcome page.
│   └── vite.svg           # Vite logo.
│
└── src/                    # Source code directory.
    │
    ├── assets/             # Static images, icons, and logos.
    │   └── logo.svg        # App's logo.
    │
    ├── components/         # Reusable UI components.
    │   ├── auth/           # Authentication-related components.
    │   ├── board/          # Core components for the drag-and-drop board.
    │   ├── layout/         # Structural components for the application's layout.
    │   └── ui/             # Small, foundational UI elements.
    │
    ├── context/            # React Context API for global state management.
    │   ├── AuthContext.jsx     # Manages authentication state across the app.
    │   ├── BoardContext.jsx    # Manages the state for the current board (tasks, columns, etc.).
    │   └── ThemeContext.jsx    # Manages the light/dark mode theme.
    │
    ├── firebase/           # Firebase configuration and utilities.
    │   ├── auth.js         # Firebase authentication utilities.
    │   └── firebase.js     # Firebase app initialization and configuration.
    │
    ├── hooks/              # Custom React hooks for shared logic.
    │   ├── useAuth.js      # Handles user authentication state and logic.
    │   └── useDarkMode.js  # Manages dark mode state and local storage.
    │
    ├── lib/                # Utility functions and helper modules.
    │   ├── api.js          # Functions for making API calls to the backend.
    │   └── dndHelpers.js   # Helper functions for the drag-and-drop logic (e.g., reordering arrays).
    │
    ├── pages/              # Page-level components that compose the application's views.
    │   ├── Dashboard.jsx   # The main landing page after login.
    │   ├── Login.jsx       # The user login page.
    │   ├── ProjectView.jsx # The primary component for a single project board.
    │   ├── Register.jsx    # The user registration page.
    │   └── WelcomePage.jsx # The welcome page for new users.
    │
    ├── styles/             # Tailwind CSS Modules for component-specific styling.
    │   ├── buttons.module.css
    ��   ├── cards.module.css
    │   ├── forms.module.css
    │   ├── layout.module.css
    │   └── tags.module.css
    │
    ├── App.css             # Main application styles.
    ├── App.jsx             # The root component that renders the application's pages.
    ├── index.css           # Global CSS styles and Tailwind imports.
    ├── main.jsx            # Main entry point that renders the React app.
    └── tailwind.config.js  # Configuration for Tailwind CSS.

---

Implementation Details:

• React DnD (@hello-pangea/dnd): The core drag-and-drop logic is implemented with this library.
• Firebase Integration: Authentication and real-time data are handled through Firebase.
• Firestore: Board data, including tasks and columns, is persisted in Firestore.
• Board State: The state of the board is managed within BoardContext.jsx.
• Environment Variables: All sensitive configuration is managed through environment variables.
• CI/CD Pipeline: Automated deployment to Firebase Hosting via GitHub Actions.

---

🤝 Contributing

Commit and Branching Practices

To contribute to this project, you must first create a new branch for your changes. This practice keeps our main branch clean and ensures that your contributions are reviewed before being merged.

How to Create a New Branch

1. Start by ensuring you are on the main branch and that it's up to date.

   git checkout main
   git pull origin main

2. Create a new branch with a descriptive name. Your branch name should start with a prefix indicating the type of change, followed by a short, kebab-cased description.

   • feature/your-feature-name: For adding a new feature.
   • bugfix/your-fix-name: For fixing a bug.
   • enhancement/your-improvement-name: For improving an existing feature.
   • docs/your-doc-change: For changes to documentation.
   • refactor/your-refactor-name: For code refactoring.
   • chore/your-chore-name: For maintenance tasks or build changes.

   Example:

   git checkout -b feature/add-dark-mode

3. Make your changes in this new branch.

Committing Your Changes

Once you've made your changes, you can commit them to your new branch.

1. Stage your changes:

   git add .

2. Commit your changes with a clear and concise message. The first line should be a brief summary (under 50 characters), followed by a more detailed description if needed.

   Example:

   git commit -m "feat: add dark mode toggle"

3. Push your branch to the remote repository:

   git push origin feature/add-dark-mode

4. Finally, open a Pull Request from your branch to the main branch to have your changes reviewed and merged.

---

Project Link: https://github.com/MarioLJFerreira/mini-dragme