Collabify - A Jira & Trello Alternative 🧩

Collabify is a modern, feature-rich project management tool designed to help teams plan, organize, and collaborate seamlessly. Built on Next.js (as a full-stack framework), styled with Tailwind CSS, and powered by Shadcn UI, Collabify provides a great user experience with beautiful UI components and smooth animations via Framer Motion, with internationalization support using i18next for multilingual capabilities.

One of the key features is secure authentication using Auth0, which is integrated using both Regular Web Applications (RWA) and Machine-to-Machine (M2M) credentials, with Role-Based Access Control (RBAC) for enhanced security. The application also utilizes MongoDB for data storage, ensuring reliable and scalable data management. Another key feature is the integration of a chatbot assistant, which provides users with a conversational interface to interact with the application and get assistance with their projects and tasks.

Table of Contents

• Overview
• Features
• Tech Stack
• User Interface
• API Endpoints
• Getting Started
  • Prerequisites
  • Installation
  • Environment Variables
• Why Auth0?
  • Benefits of using Auth0
• Auth0 Setup Guide
  • 1. Setting Up Your Auth0 Tenant
  • 2. Creating the Regular Web Application (RWA)
  • 3. Creating the Machine-to-Machine (M2M) Application
  • 4. Configuring Your Auth0 API and Client Grants
  • 5. Testing the Application
• Shadcn UI
• Tailwind CSS
• Internationalization (i18n)
• Chatbot Feature - Collabify Assistant
• Deployment
• Containerization
• Optional Ruby on Rails Backend
• License
• Contact
• Contributing
• Conclusion

Overview

Collabify helps teams manage projects and tasks effortlessly. With its intuitive interface, robust security through Auth0, and real-time analytics, Collabify is ideal for organizations looking to boost productivity and collaboration. Its modern UI is built using Next.js, Tailwind CSS, and Shadcn UI components, while animations provided by Framer Motion enhance the user experience.

Currently live at: https://collabify-pm.vercel.app/. Create an account and start managing your projects today! 🚀

Features

• Secure Authentication & Authorization: Collabify uses Auth0 to manage user sign-up, login, and secure role-based access. It supports both regular web applications and machine-to-machine integrations.

• Project Management: Users can create new projects, join existing ones, and view a list of projects they belong to.

• Task Management: Add tasks to projects, assign them to team members, and track progress with interactive charts.

• Real-Time Analytics: Visual dashboards (Bar, Pie, Line charts, etc.) built with Chart.js provide insights into task status and project progress.

• Modern & Responsive UI: Built with Next.js and Tailwind CSS, the UI is responsive and polished with smooth animations from Framer Motion and UI components from Shadcn UI.

• Database Integration: MongoDB is used for data storage, ensuring reliable and scalable data management.

• User Roles: Role-Based Access Control (RBAC) allows for different permissions based on user roles, enhancing security and collaboration within teams.

• User-Friendly Interface: The application is designed to be intuitive and easy to navigate, making it accessible for users of all skill levels.

Tech Stack

Collabify is built using a modern tech stack that ensures a great user experience and robust functionality. Here are the key technologies used in this project:

• Framework: Next.js
• Styling: Tailwind CSS
• UI Components: Shadcn UI
• Authentication: Auth0
• Database: MongoDB (via Mongoose)
• Charts: Chart.js with react-chartjs-2
• Animations: Framer Motion
• Icons: Lucide React
• State Management: React Query for data fetching and caching
• Deployment: Vercel (recommended for Next.js apps)
• Code Formatting: Prettier for consistent code style
• Linting: ESLint for identifying and fixing code quality issues
• Version Control: Git for version control and collaboration
• and many more!

User Interface

Collabify features a modern and user-friendly interface designed to enhance productivity and collaboration. The UI is built using Next.js, Tailwind CSS, and Shadcn UI components, providing a responsive and polished experience. Below are some screenshots of the application:

Landing Page

Dashboard

Dashboard - Vietnamese

Project List Page

Project Details Page

Project Details Page - Vietnamese

Tasks Table

Profile Page

Admin Panel

Swagger API Documentation

and more...

The UI is designed to be intuitive and easy to navigate, making it accessible for users of all skill levels. The use of Tailwind CSS ensures that the application is responsive and looks great on all devices.

The UI may be updated in the future to include more features and improvements. Feel free to explore the codebase and customize the UI components as needed.

API Endpoints

Collabify provides a set of RESTful API endpoints for managing projects, tasks, and users. The API is designed to be intuitive and easy to use, with clear documentation available in the codebase.

Endpoint	Method	Description
/api/admin/roles	GET/POST	Manage admin user roles
/api/auth/[...auth0]	Varies	Auth0 authentication routes (callback, logout, etc.)
/api/logs	GET	Retrieve application logs
/api/projects	GET/POST	List all projects or create a new project
/api/projects/[id]	GET/PUT/DELETE	Retrieve, update, or delete a specific project
/api/projects/[id]/tasks	GET	Get tasks for a specific project
/api/projects/[id]/tasks/tasks	POST	Create a new task for the project
/api/projects/[id]/tasks/join	POST	Join a task under the specified project
/api/projects/[id]/tasks/leave	POST	Leave a task under the specified project
/api/projects/[id]/tasks/[taskId]/toggle	PATCH	Toggle task state (e.g., complete/incomplete)
/api/projects/[id]/tasks/index	GET	Index endpoint for tasks (possible metadata or summaries)
/api/users/info	GET	Get user profile/info
/api/users/logs	GET	Get user activity logs
/api/users/roles	GET	Get roles associated with the user

To access the API documentation, you can use the Swagger UI integrated into the application. Simply navigate to /api-docs in your browser after starting the application. This will provide you with a user-friendly interface to explore the available endpoints, their parameters, and expected responses.

More API endpoints will be added in the future, and the documentation will be updated accordingly. The API is designed to be extensible, allowing for easy addition of new features and functionalities as needed.

Getting Started

Prerequisites

Before starting, make sure you have:

• Node.js (v14 or later) installed
• npm or Yarn installed
• A MongoDB instance or a MongoDB Atlas account
• An Auth0 account

Installation

1. Clone the repository:

   git clone https://github.com/hoangsonww/Collabify-Project-Manager.git
   cd collabify

2. Install dependencies:

   npm install # or npm install --legacy-peer-deps if you encounter issues
   # or
   yarn install

Environment Variables

Create a file called .env.local in the root directory and add the following variables (adjust values as needed):

AUTH0_SECRET=your_auth0_secret_here
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=https://your-auth0-domain.auth0.com
AUTH0_CLIENT_ID=your_auth0_client_id
AUTH0_CLIENT_SECRET=your_auth0_client_secret
MONGODB_URI=your_mongodb_connection_string
AUTH0_AUDIENCE=https://yourapi.example.com/
AUTH0_M2M_CLIENT_ID=your_m2m_client_id
AUTH0_M2M_CLIENT_SECRET=your_m2m_client_secret
AUTH0_TENANT_DOMAIN=your-auth0-tenant-domain.auth0.com

Note: MongoDB connection string should be in the format: mongodb+srv://<username>:<password>@cluster.mongodb.net/<dbname>?retryWrites=true&w=majority. Alternatively, if you are using a local MongoDB instance, it can be mongodb://localhost:27017/collabify.

Why Auth0?

Collabify uses Auth0 for secure authentication and authorization. Auth0 provides a robust and scalable solution for managing user identities, roles, and permissions. By leveraging Auth0, we can ensure that user data is protected and that only authorized users have access to specific features and functionalities within the application.

Benefits of using Auth0:

• Security: Auth0 provides advanced security features, including multi-factor authentication (MFA), anomaly detection, and secure token storage.
• Scalability: Auth0 can handle millions of users and provides a seamless experience for both small and large applications.
• Ease of Use: The Auth0 dashboard is user-friendly, making it easy to manage users, roles, and permissions.
• Integration: Auth0 integrates easily with various platforms and technologies, allowing for quick setup and configuration.
• Customizability: Auth0 allows for custom login pages, user flows, and branding, enabling you to create a unique authentication experience for your users.
• Role-Based Access Control (RBAC): Auth0 supports RBAC, allowing you to define user roles and permissions easily. This is crucial for applications like Collabify, where different users may have different levels of access to projects and tasks.
  • A project may have a project manager who can create and manage tasks, while team members may only have permission to view and comment on tasks. Meanwhile, project members can only add/edit tasks, while viewers can only view tasks and cannot make any changes.
  • Users with the admin role can manage all aspects of the application, including user management and project settings, as well as view the application logs in the admin panel.
• Social Login: Auth0 supports social login options (e.g., Google, Facebook, GitHub), making it easier for users to sign up and log in without creating a new account.
• User Management: Auth0 provides a comprehensive user management system, allowing you to view user profiles, roles, and activity logs.
• API Security: Auth0 can secure your APIs by issuing access tokens and validating them, ensuring that only authorized users can access your backend services.
• Ensured Compliance: Auth0 is compliant with various security standards and regulations, such as GDPR, HIPAA, and SOC 2, ensuring that your application meets industry standards for data protection.

With Auth0, Collabify can provide a secure and efficient authentication process, ensuring that user data is protected and that users have the appropriate access to the features they need.

Disclaimer: I strongly believe that Auth0 is on its way to becoming the best authentication solution for web applications. It is a powerful tool that simplifies the authentication process and provides a wide range of features to enhance security and user experience. However, please note that this is my personal opinion, and I encourage you to evaluate different authentication solutions based on your specific needs and requirements.

Auth0 Setup Guide

Follow these steps to configure Auth0 for Collabify:

1. Setting Up Your Auth0 Tenant

1. Sign Up/Log In:
   Visit Auth0 and sign up or log in.

2. Create a New Tenant:
   If you don’t already have a tenant, create one. For example, use a name like dev-collabify.

3. Note Your Domain:
   In the Auth0 Dashboard, your domain will look like dev-ywgxp8dwn5jtlj3a.us.auth0.com. Use this domain in your environment variables (see above).

2. Creating the Regular Web Application (RWA)

1. In the Auth0 Dashboard, navigate to Applications > Applications.

2. Click Create Application.

3. Name your application: e.g., "Collabify RWA".

4. Select Application Type: Choose Regular Web Applications.

5. Configure Allowed URLs:

   • Allowed Callback URLs: http://localhost:3000/api/auth/callback
   • Allowed Logout URLs: http://localhost:3000
   • Allowed Web Origins: http://localhost:3000
   • Add more as needed, especially when you deploy to production, or if, for some reason, your app starts up on a different port.

6. Save your settings.

7. Copy the Client ID and Client Secret into your .env.local as AUTH0_CLIENT_ID and AUTH0_CLIENT_SECRET.

3. Creating the Machine-to-Machine (M2M) Application

1. In the Auth0 Dashboard, go to Applications > Applications.
2. Click Create Application.
3. Name your application: e.g., "Collabify M2M".
4. Select Application Type: Choose Machine to Machine Applications.
5. Authorize Access:
   Under APIs, authorize your API (created in the next step) with the necessary scopes.
6. Copy the Client ID and Client Secret into your .env.local as AUTH0_M2M_CLIENT_ID and AUTH0_M2M_CLIENT_SECRET.

4. Configuring Your Auth0 API and Client Grants

1. In the Auth0 Dashboard, navigate to APIs.
2. Click Create API.
3. Name your API: e.g., "Collabify API".
4. Identifier: Set it to https://myapp.example.com/ (this will be your audience, AUTH0_AUDIENCE).
5. Signing Algorithm: Choose RS256.
6. Save your API.
7. In your M2M application settings (from step 3), grant it the required scopes to interact with this API (e.g., read:users, update:users, read:roles, etc.).
8. Now your Auth0 setup is complete.

5. Adding Roles

1. In the Auth0 Dashboard, navigate to User Management > Roles.
2. Click Create Role.
3. Name your role: e.g., "Project Manager".
4. Description: Add a description for the role.
5. Assign Permissions: Assign the necessary permissions to this role (e.g., read:projects, create:tasks, etc.).
6. Save the role.
7. Repeat for other roles as needed (e.g., "Project Member", "Viewer", "Admin"). It is of utmost importance to ensure that the roles are set up correctly, as they will determine what users can and cannot do within the application.

6. Testing the Application

1. Run the development server:

   npm run dev
   # or
   yarn dev

2. Open your browser: Go to http://localhost:3000.

3. Sign Up/Log In: Use the login button to authenticate with Auth0. You should be redirected to the Auth0 login page. Upon successful login, you will be redirected back to your application, automatically.

Shadcn UI

Collabify uses Shadcn UI for its UI components. Shadcn UI provides a set of pre-designed components that are easy to use and customize. You can find the documentation for Shadcn UI here.

Most, if not all, components have already been added to the project. You can find them in the components directory. Feel free to explore and customize them as needed.

However, if you need to add new components, you can do so by running the following command:

npx shadcn@latest add <component-name>

Replace <component-name> with the name of the component you want to add (e.g. button, card, etc.). This will automatically generate the necessary files and import them into your project.

Tailwind CSS

Collabify uses Tailwind CSS for styling. Tailwind CSS is a utility-first CSS framework that allows you to build custom designs without leaving your HTML. It provides a set of pre-defined classes that you can use to style your components.

You can customize the Tailwind CSS configuration by modifying the tailwind.config.js file in the root directory. You can add custom colors, fonts, and other styles as needed.

To learn more about Tailwind CSS, check out the documentation.

Internationalization (i18n)

Collabify supports internationalization (i18n) using the i18next library. Currently, it supports Vietnamese and English languages, but you can easily add more languages by following the i18next documentation.

To get started with i18n, you can find the configuration in the i18n.js file in the root directory. The translations for each language are stored in the public/locales directory.

Step-by-step instructions for adding a new language:

1. Modify the components/Navbar.tsx file to include the new language in the language switcher.

2. Create a new folder in public/locales with the language code (e.g., fr for French).

3. Inside the new folder, create a <component>.json file with the translations for that language. For example, common.json for common phrases, or navbar.json for navbar-specific translations.

4. Add the translations in the JSON file. For example:

   {
     "welcome": "Bienvenue",
     "projects": "Projets",
     "tasks": "Tâches"
   }

5. Test the new language by switching to it in the application. You should see the translations applied!

Chatbot Feature - Collabify Assistant

Collabify also includes a chatbot feature to allow users to interact with the application using natural language, which provides a conversational interface for users to ask questions and receive answers related to project management, tasks, and other features of the application.

Collabify Assistant has access to all the user's projects and tasks, and can provide information about them. It can also help users create new tasks, update existing ones, and manage their projects more efficiently.

Users can ask various questions about their taska and projects, and even get recommendations on how to improve their productivity.

Cool stuff: I took some time to make the chatbot toggler look like Apple's Assistive Touch button that you can drag around the screen and it'll snap to the edges. This is a fun little feature that adds a nice touch to the user experience.

Note: In mobile, the drag and drop feature may not work as expected due to the limitations of mobile gestures. However, it should work perfectly fine on desktop and laptop devices.

Deployment

Collabify is built with Next.js, so it’s optimized for platforms like Vercel. For deployment:

1. Push your code to GitHub (or your preferred Git provider).
2. Connect your repository to Vercel.
3. Set up your environment variables on Vercel:
   Use the same values as in your .env.local.
4. Deploy your project.

For other platforms, refer to the Next.js deployment documentation.

For now, our project is live on Vercel at https://collabify-pm.vercel.app/. Feel free to check it out and explore the features!

Containerization

Collabify also comes with a Dockerfile for easy containerization. You can build and run the application in a Docker container using the following commands:

docker-compose up

This will build the Docker image and start the application in a container. Make sure you have Docker installed and running on your machine.

Optional Ruby on Rails Backend

The optional backend of Collabify is built using Ruby on Rails. The Rails API provides the necessary endpoints for managing projects, tasks, and users. The frontend (Next.js) communicates with the Rails API to fetch and update data.

To run the Rails backend, follow these steps:

1. Navigate to the backend directory:

   cd backend

2. Install dependencies:

   bundle install

3. Set up the database:

   rails db:create
   rails db:migrate

4. Run the Rails server:

   rails server

5. Open your browser: Go to http://localhost:3000 to access the Rails API.

6. Test the API: You can use tools like Postman or Insomnia to test the API endpoints.

7. Connect the frontend to the backend: Make sure to update the API URLs in the Next.js application to point to the Rails API endpoints.

8. Run the Next.js application: Follow the steps in the "Getting Started" section to run the Next.js application.

Note: This backend is optional. Without it, the application will still work, but you won't have access to the Rails API features. You can choose to use either the Rails backend or the Next.js API routes based on your preference.

License

This project is licensed under the MIT License.

Contact

For questions or contributions, please reach out to Son Nguyen.

• GitHub: @hoangsonww
• LinkedIn: @hoangsonw
• Email: hoangson091104@gmail.com

I know the Auth0 stuff may be a bit overwhelming, but don't worry! I've got your back. If you have any questions or need help with the setup, just reach out to me. I'm here to assist you every step of the way. Let's make this project a success together! 💪

Contributing

Contributions are welcome! If you have suggestions for improvements or new features, feel free to open an issue or submit a pull request.

1. Fork the repository
2. Create a new branch (git checkout -b feature/YourFeature)
3. Make your changes
4. Commit your changes (git commit -m 'Add some feature')
5. Push to the branch (git push origin feature/YourFeature)
6. Open a pull request
7. Wait for review and feedback. We'll review your pull request and provide feedback. If everything looks good, we'll merge it into the main branch.

We appreciate your contributions to make Collabify even better!

Also, feel free to open an issue if you find any bugs or have feature requests. We are always looking to improve the application and your feedback is invaluable.

Note: Please make sure to follow the code style and conventions used in the project. This will help maintain consistency and readability throughout the codebase.

Conclusion

Collabify is designed with a great UI powered by Next.js, Tailwind CSS, and Shadcn UI, and leverages Auth0 for secure authentication and MongoDB for reliable data storage. This README should help you set up and get started with the project even if you’re a beginner.

---

Happy managing your projects with Collabify! If you have any questions or need assistance, feel free to reach out. Enjoy building and collaborating! 🎉

🔝 Back to Top