Track your interests over time
Tags: refinehackathon, react, materialui, supabase
Published: 2023-07-18 01:16:06

## What I built 
Interests tracker.

I built Interests in 8days with no prior knowledge of Refine or MaterialUI.

### Category Submission: 

- Best Overall Project
- Most Visually Pleasing
- 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
[Link](https://interests.vercel.app/)
### Screenshots 

![Welcome Page:](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z24equpc5wiq94tlcsqu.png)

![HomePage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hoe08gczeqp9mmr6t29y.png)

![Interest](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jkdazg6shujnlxs6tgef.png)

![Profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjigboonezse28o3dsym.png)

### Description
Interests is an easy-to-use app for tracking your interests over time. If you have recently watched a fantastic movie, read an exciting book or listened to a lovely song you would like to remember, use **Interests🎉**.

Interests helps you save the memories that matter. 

### Link to Source Code 
[Source code](https://github.com/adeleke5140/Interests)

### Permissive License 
MIT

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

MMy Go-to tracking app has always been my notes on my iPhone. Finding what I have saved on it takes time and effort. I wanted an easy way to find the interests I enjoyed at a particular time, which is how Interests was born.

After conducting user research with my friends, I realised that this is something people could find helpful. 

The MVP is ready to use, but the possibilities for what Interests could be is limitless.

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

This hackathon is my at creating a product using Refine with materialUI.

**Refine** was used as the frontend framework, **Material UI** as a UI library and **supabase** for both auth and as a database

Refine provides a solid foundation for bootstrapping CRUD apps which I was able to utilize. The authProvider and dataProvider supplied by the swizzle CLI help abstract away the complexity of creating auth and database connection.

I have used Supabase in the past but have yet to be as integrated as this. Refine helps make working with supabase a breeze. 

I also appreciate the React hooks provided by the team to interact with the supabase client and request the supabase database.

MaterialUI removed all the complexity of styling and overall layout. Initially, the theming feature was a bit hard to grasp, and I was overwhelmed by the complexity, but after reading through the docs for a couple of days, I got the hang of it.

The whole stack enabled me to realize this product's vision in 10 days.

Building this app in Refine has expanded my skillset and my proficiency in technology.

This is v1, I have started work on improving the design and the overall feel of the app.

I am also going to conduct more user research in order to add features as well as release a cross platform app in the future.

Your interests deserve to be remembered.

### Additional Resources/Info

A couple of resources I found useful include:

- [Refine Docs](https://refine.dev/docs/)

- [Refine-Supabase Data Provider](https://refine.dev/docs/examples/data-provider/supabase/)

- [MaterialUI Docs](https://mui.com/material-ui/getting-started/)

- [Supabase Docs](https://supabase.com/docs/guides/database/overview)