Manage your projects with style! Create boards, organize tasks, collaborate with teams, and track progress with an intuitive drag-and-drop interface.
- ✅ Multiple Boards: Create and switch between different project boards
- ✅ Drag & Drop: Smooth card and list reordering with visual feedback
- ✅ Real-time Updates: Instant synchronization across all connected clients
- ✅ Responsive Design: Optimized for desktop, tablet, and mobile devices
- ✅ Card Operations: Create, edit, archive, and delete cards
- ✅ Rich Descriptions: Support for formatted text and markdown
- ✅ Due Dates: Set and track deadlines with visual indicators
- ✅ Checklists: Break down tasks into manageable subtasks
- ✅ Labels: Color-coded categorization system
- ✅ Cover Images: Add visual context to cards
- ✅ Team Members: Add and manage workspace members
- ✅ Card Assignment: Assign members to specific tasks
- ✅ Comments: Threaded discussions on cards
- ✅ Attachments: Upload files and add links
- ✅ Activity Logs: Track all changes and updates
- ✅ Board Themes: Multiple background options including Trello Classic
- ✅ Custom Colors: Personalize with color picker
- ✅ Member Avatars: Custom initials and color schemes
- ✅ Dark/Light Modes: Adaptive theming (planned)
- ✅ Search: Find cards by title instantly
- ✅ Filtering: Filter by labels, members, due dates, and status
- ✅ Keyboard Shortcuts: Power user shortcuts for efficiency
- ✅ Export/Import: Data portability options
- ⚡ Next.js 15 - React framework with App Router
- ⚛️ React 18 - UI library with hooks and concurrent features
- 🎨 CSS Modules - Scoped styling with responsive design
- 🎯 @hello-pangea/dnd - Advanced drag-and-drop functionality
- 📅 date-fns - Modern date utility library
- 🎭 Lucide React - Beautiful icon library
- 🟢 Node.js - Runtime environment
- 🔄 Next.js API Routes - Serverless API endpoints
- 🗄️ Prisma ORM - Type-safe database operations
- 🐘 PostgreSQL - Robust relational database
- ☁️ Neon - Serverless PostgreSQL hosting
- 🚀 Vercel - Deployment and hosting platform
- 📦 npm - Package management
- 🎯 ESLint - Code quality and linting
- 🔧 Prisma CLI - Database management
- 📝 Git - Version control
- Node.js 18+ installed
- npm or yarn package manager
- Git for version control
-
Clone the repository
git clone https://github.com/yourusername/taskorbit-board.git cd taskorbit-board -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open your browser
http://localhost:3000
For full persistence, set up PostgreSQL:
- Create a Neon database (or any PostgreSQL instance)
- Add environment variable
echo "DATABASE_URL=your_postgresql_connection_string" > .env
- Initialize database
npx prisma generate npx prisma db push npm run seed
- Click the "Add Board" button
- Choose a background theme
- Start adding lists and cards
- Add Lists: Click "Add List" to create columns
- Create Cards: Click "Add Card" within any list
- Drag & Drop: Move cards between lists or reorder them
- Edit Details: Click any card to open the detail modal
- Add Members: Use the member panel to add team members
- Assign Tasks: Drag members onto cards
- Add Comments: Discuss tasks directly on cards
- Attach Files: Upload images, documents, or links
taskorbit-board/
├── app/ # Next.js app directory
│ ├── api/ # API routes
│ ├── globals.css # Global styles
│ ├── layout.js # Root layout
│ └── page.js # Home page
├── backend/ # Backend logic
│ ├── board-repository.js # Data access layer
│ ├── prisma.js # Database client
│ └── store.js # In-memory fallback
├── frontend/ # Frontend components
│ ├── components/ # Reusable UI components
│ └── styles/ # Component styles
├── prisma/ # Database schema
│ ├── schema.prisma # Prisma schema
│ └── seed.js # Database seeding
├── public/ # Static assets
└── shared/ # Shared utilities
├── board-state.js # Initial state
└── board-themes.js # Theme definitions
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run seed # Seed the databasenpx prisma studio # Open Prisma Studio
npx prisma db push # Push schema changes
npx prisma generate # Generate Prisma clientCreate a .env file in the root directory:
DATABASE_URL=postgresql://username:password@host:port/database- Connect your repository to Vercel
- Add environment variables in Vercel dashboard
- Deploy automatically on every push
npm run build
npm run startWe welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Commit your changes
git commit -m 'Add amazing feature' - Push to the branch
git push origin feature/amazing-feature
- Open a Pull Request
- Follow the existing code style
- Write meaningful commit messages
- Add tests for new features
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- Trello for the inspiration and design patterns
- Vercel for amazing deployment platform
- Neon for serverless PostgreSQL
- Prisma for the excellent ORM
- Next.js team for the fantastic framework
If you have any questions or need help:
- 📧 Email: goyalnipurn203@gmail.com
- 🐛 Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions
Made with ❤️ using Next.js, React, and Prisma