LaneUp - Modern Task Management Application

🚀 Overview

LaneUp is a modern, real-time task management application built with cutting-edge technologies. It provides a seamless experience for teams to collaborate, track progress, and manage projects efficiently.

✨ Key Features

• Real-time Collaboration: Instant updates across all users thanks to Convex
• Multiple Views: Board (Kanban), List, Table, and Timeline views
• Advanced Filtering: Filter by status, priority, userIds, labels, and more
• Drag & Drop: Intuitive task management with drag-and-drop support
• Rich Text Editor: Full-featured text editor with TipTap
• File Attachments: Upload and manage task attachments
• Comments & Activities: Track all changes and discussions
• Internationalization: Support for multiple languages
• Dark Mode: Built-in theme support
• Mobile Responsive: Works seamlessly on all devices

🛠️ Tech Stack

Frontend

• Framework: Vue 3 (Composition API)
• Language: TypeScript
• Styling: Tailwind CSS v4
• UI Components: shadcn-vue
• State Management: Pinia
• Routing: Vue Router
• Build Tool: Vite

Backend

• Database: Convex (Real-time, serverless)
• Authentication: Clerk
• File Storage: AWS S3 / R2

Libraries

• Editor: TipTap
• Drag & Drop: vue-draggable-plus
• i18n: vue-i18n
• Animations: Motion-v
• Icons: Lucide Vue

📦 Installation

Prerequisites

• Node.js 18+
• Bun (recommended) or npm
• Convex account
• Clerk account

Setup

1. Clone the repository

   git clone https://github.com/yourusername/laneup.git
   cd laneup

2. Install dependencies

   bun install
   # or
   npm install

3. Environment Variables Create a .env file in the root directory:

   # Convex
   VITE_CONVEX_URL=your_convex_deployment_url
   
   # Clerk
   VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
   
   # Optional: S3/R2 for file uploads
   CONVEX_S3_ACCESS_KEY_ID=your_access_key
   CONVEX_S3_SECRET_ACCESS_KEY=your_secret_key
   CONVEX_S3_ENDPOINT=your_endpoint
   CONVEX_S3_BUCKET=your_bucket_name

4. Setup Convex

   npx convex dev

   This will:

   • Create a new Convex project (if needed)
   • Deploy your schema
   • Start the Convex dev server

5. Run the development server

   bun run dev
   # or
   npm run dev

6. Open your browser Navigate to http://localhost:5173

🏗️ Project Structure

laneup/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── ui/             # shadcn-vue components
│   │   ├── task/           # Task-related components
│   │   ├── views/          # View components (board, list, etc.)
│   │   └── selectors/      # Selection components
│   ├── composables/        # Vue composables
│   ├── stores/             # Pinia stores
│   ├── pages/              # Route pages
│   ├── types/              # TypeScript types
│   ├── lib/                # Utilities and helpers
│   ├── locales/            # i18n translations
│   └── main.ts             # App entry point
├── convex/
│   ├── _generated/         # Auto-generated Convex files
│   ├── modules/            # Domain modules
│   ├── queries.ts          # Shared queries
│   ├── schema.ts           # Database schema
│   └── schema.args.ts    # Schema value definitions/table definition
├── public/                 # Static assets
└── package.json           # Project dependencies

📖 Documentation

Component Development

Components follow a strict structure for consistency:

<template>
	<div data-component="component-name">
		<!-- Component content -->
	</div>
</template>

<script setup lang="ts">
// Imports organized by type
import type { _TaskType } from '@/types'
import TaskCard from '@/components/task/TaskCard.vue'
import { useI18n } from '@/composables'

// Props & Emits
const props = defineProps<{
	task: _TaskType
}>()

// Composables
const { t } = useI18n()

// Component logic
</script>

State Management

The app uses Pinia stores with Convex integration:

export const useSpaceStore = defineStore('space', () => {
	// Convex queries
	const { data: tasks } = useConvexQuery(api.queries.getTasks, query)

	// Reactive state
	const currentProjectId = ref<ProjectId | null>(null)

	// Actions
	const selectProject = (id: ProjectId) => {
		currentProjectId.value = id
	}

	return { tasks, currentProjectId, selectProject }
})

Database Schema

The Convex schema defines the following tables:

• users - User profiles
• workspaces - Team workspaces
• projects - Projects within workspaces
• tasks - Individual tasks
• members - Workspace members
• comments - Task comments
• activities - Activity logs
• views - Saved view configurations

🚀 Deployment

Build for Production

bun run build
# or
npm run build

Deploy Convex Functions

npx convex deploy

Deploy Frontend

The built files in dist/ can be deployed to any static hosting service:

• Vercel
• Netlify
• AWS S3 + CloudFront
• Cloudflare Pages

🧪 Testing

# Run unit tests
bun run test

# Run type checking
bun run build:types

# Lint code
bun run lint

🤝 Contributing

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

Please read the Cursor Rules for code style guidelines.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Vue.js - The Progressive JavaScript Framework
• Convex - The reactive database
• shadcn-vue - Beautiful UI components
• Tailwind CSS - Utility-first CSS framework

📞 Support

For support, email support@laneup.app or join our Discord community.

---

Made with ❤️ by the LaneUp Team

# laneup # laneup # laneup