Skip to content

Repository files navigation

Loomio - Community Task Management System

A comprehensive full-stack application for managing community tasks, events, attendance, and contributions with role-based access control.

๐Ÿš€ Features

Core Modules

  • User Management: Registration, authentication, and profile management
  • Community Management: Create and manage communities with member invitations
  • Task Management: Create, assign, and track tasks with status workflow
  • Contribution System: Point-based rewards for task completion and participation
  • Attendance Tracking: Daily attendance marking and leave management
  • Event Calendar: Community events and scheduling
  • Notifications: Email and in-app notification system
  • Dashboard & Analytics: Role-specific dashboards with reporting

User Roles

  • Platform Admin: System-wide management and oversight
  • Community Admin: Community-specific management and member oversight
  • Member: Task participation and contribution tracking

๐Ÿ› ๏ธ Tech Stack

Backend

  • Node.js with Express.js
  • MySQL database with Sequelize ORM
  • JWT authentication
  • Nodemailer for email notifications
  • Bcryptjs for password hashing

Frontend

  • React.js with Vite
  • Tailwind CSS for styling
  • React Router for navigation
  • Axios for API calls
  • React Hook Form for form handling
  • Heroicons for icons

๐Ÿ“ Project Structure

Loomio/
โ”œโ”€โ”€ backend/                 # Express.js API server
โ”‚   โ”œโ”€โ”€ src/
โ”‚   โ”‚   โ”œโ”€โ”€ config/         # Database and app configuration
โ”‚   โ”‚   โ”œโ”€โ”€ controllers/    # Route controllers
โ”‚   โ”‚   โ”œโ”€โ”€ middleware/     # Authentication and validation
โ”‚   โ”‚   โ”œโ”€โ”€ models/         # Sequelize models
โ”‚   โ”‚   โ”œโ”€โ”€ routes/         # API routes
โ”‚   โ”‚   โ””โ”€โ”€ server.js       # Main server file
โ”‚   โ”œโ”€โ”€ package.json
โ”‚   โ””โ”€โ”€ env.example
โ”œโ”€โ”€ frontend/               # React.js application
โ”‚   โ”œโ”€โ”€ src/
โ”‚   โ”‚   โ”œโ”€โ”€ components/     # Reusable components
โ”‚   โ”‚   โ”œโ”€โ”€ context/        # React context providers
โ”‚   โ”‚   โ”œโ”€โ”€ pages/          # Page components
โ”‚   โ”‚   โ”œโ”€โ”€ services/       # API service functions
โ”‚   โ”‚   โ”œโ”€โ”€ hooks/          # Custom React hooks
โ”‚   โ”‚   โ””โ”€โ”€ utils/          # Utility functions
โ”‚   โ”œโ”€โ”€ package.json
โ”‚   โ””โ”€โ”€ tailwind.config.js
โ””โ”€โ”€ README.md

๐Ÿš€ Getting Started

Prerequisites

  • Node.js (v16 or higher)
  • MySQL (v8.0 or higher)
  • npm or yarn

Quick Setup

  1. Clone the repository

    git clone https://github.com/jvkousthub/Loomio.git
    cd Loomio
  2. Environment Configuration

    copy .env.example .env

    Update the single .env file in the root directory with your credentials:

    DB_HOST=localhost
    DB_PORT=3306
    DB_NAME=loomio_db
    DB_USER=root
    DB_PASSWORD=your_password
    JWT_SECRET=your_super_secret_jwt_key_here
    PORT=5000
    VITE_API_URL=http://localhost:5000/api
  3. Install all dependencies

    npm install
    cd backend && npm install
    cd ../frontend && npm install
    cd ..
  4. Database Setup (see Database Setup section below)

  5. Start the application

    Option 1 - Complete Startup (Recommended for first time):

    start.bat

    This script will:

    • โœ… Check if MySQL is running
    • โœ… Verify database connection
    • โœ… Check environment configuration
    • โœ… Install dependencies if needed
    • โœ… Start backend server
    • โœ… Start frontend server
    • โœ… Open application in browser

    Option 2 - Quick Start (when already configured):

    start-quick.bat

    Starts both servers without checks (faster for development)

    Option 3 - Manual start:

    # Terminal 1 - Backend
    cd backend
    npm start
    
    # Terminal 2 - Frontend
    cd frontend
    npm run dev

    To stop the application:

    stop.bat

    Or close the Backend and Frontend terminal windows

    • Backend API: http://localhost:5000
    • Frontend: http://localhost:5173 (or the port shown in terminal)

Backend Setup (Manual)

  1. Navigate to backend directory

    cd backend
  2. Install dependencies

    npm install
  3. Environment Configuration

    cp env.example .env

    Update the .env file with your database credentials:

    DB_HOST=localhost
    DB_PORT=3306
    DB_NAME=loomio_db
    DB_USER=your_username
    DB_PASSWORD=your_password
    JWT_SECRET=your_super_secret_jwt_key
    PORT=5000
  4. Start the server

    npm run dev

    The API will be available at http://localhost:5000

Frontend Setup

  1. Navigate to frontend directory

    cd frontend
  2. Install dependencies

    npm install
  3. Environment Configuration

    cp env.example .env

    Update the .env file:

    VITE_API_URL=http://localhost:5000/api
  4. Start the development server

    npm run dev

    The application will be available at http://localhost:3000

๐Ÿ“Š Database Schema

Key Tables

  • Users: User accounts with roles and community associations
  • Communities: Community information and settings
  • Tasks: Task details with assignments and status tracking
  • TaskAssignments: Many-to-many relationship between tasks and users
  • Contributions: Point-based contribution tracking
  • Attendance: Daily attendance records
  • LeaveRequests: Leave request management
  • Events: Community events and calendar entries
  • Notifications: In-app and email notifications

๐Ÿ” Authentication & Authorization

  • JWT-based authentication with role-based access control
  • Protected routes with middleware validation
  • Role-based permissions for different user types
  • Secure password hashing with bcryptjs

๐ŸŽจ UI/UX Features

  • Responsive design with Tailwind CSS
  • Modern interface with clean, intuitive navigation
  • Role-specific dashboards with relevant information
  • Real-time updates for task status and notifications
  • Accessible components following best practices

๐Ÿ“ˆ Contribution System

Point Allocation

  • Task Completion: 10 points
  • Event Attendance: 5 points
  • Discussion Participation: 2 points

Features

  • Personal dashboards with contribution tracking
  • Community leaderboards with ranking system
  • Monthly reports and analytics
  • Achievement tracking and milestones

๐Ÿš€ Deployment

Backend Deployment (Railway/Render)

  1. Connect your GitHub repository
  2. Set environment variables
  3. Deploy the Express.js application

Frontend Deployment (Vercel)

  1. Connect your GitHub repository
  2. Set build command: npm run build
  3. Set output directory: dist
  4. Deploy the React application

Database Setup

  • Use a cloud MySQL provider (PlanetScale, Railway DB, or similar)
  • Update environment variables with production database credentials

๐Ÿ”ง API Endpoints

Authentication

  • POST /api/auth/register - User registration
  • POST /api/auth/login - User login
  • GET /api/auth/me - Get current user
  • POST /api/auth/logout - User logout

Users

  • GET /api/users - Get all users (admin)
  • GET /api/users/:id - Get user by ID
  • PUT /api/users/:id - Update user
  • DELETE /api/users/:id - Delete user

Communities

  • GET /api/communities - Get all communities
  • POST /api/communities - Create community
  • GET /api/communities/:id - Get community by ID
  • PUT /api/communities/:id - Update community
  • DELETE /api/communities/:id - Delete community
  • POST /api/communities/:id/invite - Invite user to community

Tasks

  • GET /api/tasks - Get all tasks
  • POST /api/tasks - Create task
  • GET /api/tasks/:id - Get task by ID
  • PUT /api/tasks/:id - Update task
  • POST /api/tasks/:id/assign - Assign task to users
  • PUT /api/tasks/:id/status - Update task status

๐Ÿค Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

๐Ÿ“ License

This project is licensed under the ISC License.

๐Ÿ†˜ Support

For support and questions, please open an issue in the GitHub repository.

๐Ÿ”ฎ Future Enhancements

  • Real-time notifications with WebSocket integration
  • File upload system for task submissions
  • Advanced analytics with charts and graphs
  • Mobile application with React Native
  • Integration APIs with external services
  • Advanced reporting with PDF export
  • Multi-language support for international communities

Releases

Packages

Contributors

Languages