Managify: Manage Your Teams Easily
Tags: refinehackathon, supabase, mui, refine
Published: 2023-07-20 22:17:00

## 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](https://managify-refine.vercel.app/)

### Screenshots 

- Authentication Pages

I used [Supabase Auth](https://supabase.com/docs/guides/auth) to manage users

- Login Page

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzdmb7i1btosdzit8jen.png)

- Register Page
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0aqwwssnw2uwi47mbat8.png)
- Forgot Password
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvsoprf8ajdamdbxnurf.png)

- Teams Page
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kz2ov9uhopl34lb3k6ng.png)

- Create Team Page

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jjgddnphemeye10ne7h.png)

- Edit Team Page

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wrhfhgbwhlpiftemgy50.png)


- Show Tasks of a Team
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uc9rc6jizvmcsprkqgpf.png)

- Show Members of a Team
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfpi95mhxn3324tfb0al.png)

- My Tasks Page (Kanban)
This page is built by using [dnd-kit](https://docs.dndkit.com/). Users can change the status of their tasks by drag-and-drop. Also, this page supports realtime changes.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxwx9dfpl8bvx7tzn4lo.png)

- My Tasks Page (List)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxykd7lkzg7f5jpptshu.png)

- Task Detail Page

This page supports realtime changes. In this page, I used [Framer Motion](https://www.framer.com/motion/) to animate components.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4cc82zvbnwf6iz2cr9v.gif)

- Chats

This page has realtime updates.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzbfdqvhoyrvy8jfn512.png)

- Chat Detail

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khu5z61exlse0981gcar.png)

- Invitations

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1db96701jbl2aqad96v.png)

- 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](https://resend.com), [Supabase Edge Functions](https://supabase.com/docs/guides/functions) and [Database Webhooks](https://supabase.com/docs/guides/database/webhooks)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhjmngave7czgo9bvlem.png) 

**Email Invitation example with** [Resend] (https://resend.com) and [Database Webhooks](https://supabase.com/docs/guides/database/webhooks)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znvv2ucjdblx0w6r2ns2.png)


- My Profile Page

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lqhew7dv10776zpmyou.png)

- Profile Page

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yijwe42p49ew1s87e1j.png)

- Update Profile

In this page, I used [Supabase Storage](https://supabase.com/docs/guides/storage) to store the files uploaded by the users 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9zkmuo8p0pedhhthygb.png)

- Change Password Page

In this page user can change their password. I created a  [Database Function](https://supabase.com/docs/guides/database/functions) called **_change_user_password_** for change password flow

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akdl1uceaih473zna6m4.png)




### 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](https://github.com/rasitcolakel/managify)


### 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](https://refine.dev/) 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](https://refine.dev/docs/api-reference/core/) 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](https://supabase.com/) 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](https://mui.com/) 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](https://resend.com) is a populer Email API for sending emails
2. [Emotion](https://emotion.sh/docs/introduction) 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](https://www.framer.com/motion/) is an animation library for React that allows developers to create smooth and interactive animations with a straightforward API.
4. [dnd-kit](https://docs.dndkit.com/) 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](https://day.js.org/) 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](https://www.youtube.com/c/supabase), I whatched several tutorials on Supabase's Youtube Channel