While working in the local environment, I used ngrok to set up an HTTPS domain for testing the Clerk webhook. It worked perfectly during testing. However, after deploying the project and replacing the dummy ngrok HTTPS domain with the actual domain, the Clerk webhook stopped triggering. Unfortunately, the issue arose near the end of the JS Hackathon, leaving me without enough time to debug it. To showcase the project’s functionality, I recorded a video demonstrating its features. If you'd like to test it locally, you can do so effortlessly. so then i have just updated the readme file video link
A Real-Time Collaborative Task Management App
FireGrid is a powerful, real-time task management application designed for both personal use and team collaboration. With seamless drag-and-drop functionality, advanced fuzzy search, customizable task cards, and dynamic filters, managing your tasks has never been easier!
- Collaborate effortlessly: Updates on tasks are instantly synced across all devices.
- Work on shared boards with your team or manage personal boards.
- Integrated FireGrid AI Bot to assist you if you're stuck while using the app.
- Get step-by-step guidance and suggestions from the AI directly in the app.
- Fork other users' board templates by simply clicking the Fork button.
- Create a copy and make it your own instantly.
- See other users' cursors in real time when working on the same board or organization.
- Enhanced collaboration with visual feedback of who is editing what.
- Change colors to categorize tasks (e.g., priority levels, task types).
- Add tags, due dates, and other metadata to keep everything organized.
- Intuitive drag-and-drop to rearrange tasks.
- Move tasks between columns or boards with ease.
- Quickly locate tasks using keywords, even with typos or partial matches.
- Search across all boards and its categories.
- Filter boards by:
- Order (asc, desc).
- Dates.
- Categories.
- Log in effortlessly using GitHub, Google, or email authentication powered by Clerk.
- Favorite and unfavorite boards to quickly access the ones that matter most.
- Switch between light and dark modes to suit your preference and reduce eye strain.
- Frameworks and Libraries: Next.js, React.js, ShadCN UI Component Library, Tailwind CSS.
- Real-Time Collaboration: Liveblocks for real-time presence and collaboration.
- Backend: Hono for APIs, Vercel AI for AI integrations.
- AI Bot: LangChain and Gemini, integrated with Datastax for efficient query processing.
- Database: Neon PostgreSQL with Drizzle ORM for structured and scalable data management.
- State Management: TanStack Query for efficient data fetching and caching.
- DevOps and Monitoring: Docker for containerization Docker repo link, Sentry for error tracking.
- Deployment: Vercel for seamless CI/CD and hosting.
- Create boards for personal goals and daily task management.
- Invite team members to collaborate on boards.
- Assign tasks to specific members and track progress.
- Change board themes and colors to suit your style.
- Organize columns based on workflows like Kanban (e.g., To-Do, In Progress, Done).
- Notifications: Get real-time notifications for task updates.
- Analytics: Insights into task progress, team productivity, and deadlines.
- Integrations: Connect with tools like Google Calendar, Slack, and Trello.
- Stripe: Implementing the stripe to pay bills of FireGrid.
- Uploadthing and Unsplash: Uploading your own custom image and integrating the unsplash.
Follow these steps to install and set up FireGrid:
Ensure you have the following installed on your system:
- Node.js (v18 or later)
- Docker (if using containerized deployment)
- Git (to clone the repository)
- A database instance (e.g., Neon PostgreSQL)
- Optional: Vercel CLI for deployment on Vercel.
Follow these steps to run the project locally:
- Clone the Repository:
git clone https://github.com/khalidkhankakar/Fire-Grid.git cd fire-grid - Setup the Enviroment key:
# Postgress database key # https://neon.tech/ POSTGRES_URL=postgresql://neondb_owner:********************* # Clerk Env Keys # https://clerk.com/ NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_********************* WEBHOOK_SECRET=********************* NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up CLERK_SECRET_KEY==********************* # https://sentry.io/welcome/ SENTRY_AUTH_TOKEN=********************* # https://aistudio.google.com/app/apikey GOOGLE_API_KEY=********************* # https://www.datastax.com/ ASTRA_DB_APPLICATION_TOKEN=********************* ASTRA_DB_API_ENDPOINT=********************* ASTRA_DB_NAMESPACE=********************* # Also add your own liveblocks key and project # https://liveblocks.io/
- Install Dependencies:
npm install --force or pnpm install
- Run the Development Server:
npm run dev or pnpm run dev
Learn more about the technologies and tools used to build FireGrid:
- Next.js – React-based framework for building server-rendered apps.
- React.js – A JavaScript library for building user interfaces.
- Tailwind CSS – Utility-first CSS framework for styling.
- ShadCN UI – Component library for building modern UI designs.
- Liveblocks – Real-time presence and collaboration for web apps.
- Hono – Ultrafast web framework for building APIs.
- Vercel AI SDK – Toolkit for integrating AI models into apps.
- TanStack Query – Powerful data-fetching library for React.
- Neon – Serverless PostgreSQL platform.
- Drizzle ORM – TypeScript ORM for type-safe SQL queries.
- LangChain – Framework for building AI-powered applications.
- Gemini AI – Advanced AI language models by Google.
- Datastax – NoSQL database and tools for AI applications.
- Docker – Containerization platform for scalable deployments.
- Sentry – Application monitoring and error tracking.
- Clerk – Authentication service with social login support.
- Vercel – Hosting platform for web applications.
These resources will help you understand the stack powering FireGrid and guide you in extending its functionality!
Whether you're a solo professional or managing a large team, FireGrid empowers you to stay organized, productive, and connected. Experience task management that's:
- Efficient: Real-time updates mean no more delays.
- Flexible: Customize workflows and collaborate your way.
- Powerful: AI integration, search, and filter tools to find exactly what you need.
We welcome contributions! Follow these steps:
- Fork the repository 🍴
- Create a new branch: git checkout -b feature-name 🌿
- Commit changes: git commit -m "Add new feature" 📝
- Push to branch: git push origin feature-name 🚀
- Submit a pull request 🔄
💬 Have questions or feedback? Open an issue. ⭐ Enjoyed the project? Give us a star!
This project is under active development. Stay tuned for updates! 🚧✨
I have created FireGrid specifically for the JavaScript Mastery Hackathon as a showcase of real-time collaborative task management capabilities. It demonstrates advanced features like AI integration, real-time collaboration, and seamless user experiences tailored for productivity apps.