What I built

I have built a real-time collaboration platform with team management, task tracking, and chat features. The application utilizes Supabase for real-time database and authentication, MUI for responsive user interfaces, and Refine for streamlined data management. The goal is to enhance team productivity and communication within a user-friendly environment.

Category Submission:

• Best Overall Project
• Most Visually Pleasing
• Most Technical Impressive
• Best Project built using Supabase as the main data provider for the refine app.
• Best Project built using Material UI as the main UI framework for the refine app.

App Link

Live Demo

Screenshots

• Authentication Pages

I used Supabase Auth to manage users

• Login Page

• Register Page

• Forgot Password
  

• Teams Page
  

• Create Team Page

• Edit Team Page

• Show Tasks of a Team
  

• Show Members of a Team
  

• My Tasks Page (Kanban)
  This page is built by using dnd-kit. Users can change the status of their tasks by drag-and-drop. Also, this page supports realtime changes.

• My Tasks Page (List)

• Task Detail Page

This page supports realtime changes. In this page, I used Framer Motion to animate components.

• Chats

This page has realtime updates.

• Chat Detail

• Invitations

This page shows users' invitations. The user can approve or decline the invitation.

• Invitation Page

When a user is invited to a team, user will receive an email about the invitation. I built an edge function to make it possible by using Resend, Supabase Edge Functions and Database Webhooks

Email Invitation example with Resend and Database Webhooks

• My Profile Page

• Profile Page

• Update Profile

In this page, I used Supabase Storage to store the files uploaded by the users

• Change Password Page

In this page user can change their password. I created a Database Function called change_user_password for change password flow

Description

The project is a real-time collaboration platform with team management, task tracking, and chat features. It utilizes Supabase for real-time database and authentication, MUI for responsive user interfaces, and Refine for creating crud applications. The primary objective of the project is to enhance team productivity and communication within a user-friendly environment.

Link to Source Code

Github Repository

Permissive License

MIT License: This is a very popular permissive license that allows users to freely use, modify, distribute, and sublicense the code without any warranty.

Background (What made you decide to build this particular app? What inspired you?)

I decided to build this app because I saw the need for seamless collaboration and efficient teamwork. The desire to enhance team productivity and communication inspired me to create a platform that fosters real-time collaboration and user-friendly task management. Additionally, I was motivated to contribute to the open-source community and saw the hackathon as a perfect opportunity to showcase my skills and collaborate with other developers.

How I built it (How did you utilize refine? Did you learn something new along the way? Pick up a new skill?)

In the project, I used Refine because, it provides a framework for building data-driven applications with React, allowing for easier handling of data, forms, and CRUD (Create, Read, Update, Delete) operations. Also, I utilized Refine's Core API Hooks, Providers, Components and more.

While working with Refine, I gained valuable experience in efficiently managing data and creating interactive user interfaces for data-driven applications. The framework's features enabled me to focus more on implementing the application's core logic and user experience, rather than getting bogged down in repetitive data management tasks.

Additionally, by integrating Supabase for real-time support, auth, storage and more, I learned new skills related to incorporating real-time functionality into the application. Supabase, as a backend-as-a-service platform, provided the tools necessary to build real-time features and authentication, giving users a seamless and responsive experience.

Moreover, by using MUI to create a modern web app with a user-friendly interface. MUI's ready-made components and responsive design made it look great on different devices. Following Material Design principles gave it a polished and up-to-date appearance, and I could also customize its branding. With help from MUI's support and guides, I added the features I wanted, making it easy for users to enjoy.

Overall, the project allowed me to pick up new skills in working with Refine for data management and real-time functionality using Supabase. This experience has not only enhanced my development capabilities but also enabled me to create more dynamic and collaborative applications in the future.

Additional Resources/Info

1. Resend is a populer Email API for sending emails
2. Emotion is a popular JavaScript library for styling React components. It offers powerful features like CSS-in-JS, theming, and automatic vendor prefixing.
3. Framer Motion is an animation library for React that allows developers to create smooth and interactive animations with a straightforward API.
4. dnd-kit is a flexible and accessible drag-and-drop library for React. It provides a range of features to build custom drag-and-drop interfaces.
5. DayJS is a lightweight and fast JavaScript library for manipulating dates and times. It offers a moment.js-like API but with a much smaller footprint.
6. Supabase Youtube Channel, I whatched several tutorials on Supabase's Youtube Channel