Mouth ctrl

Inspiration

because this hackathon is open-themed my team want ot make something fancy project and review ours react and firebase skill that we learned before, We get inspiration from drawing game like pixel painter and drawing map in roblox that draw in each game have diff way to draw

What it does

Mouth ctrl is website that allow you to have new experience in drawing image, normally artist use pen mouse and normal mouse in sometime but this website need you to use real mouth to draw image and you can post it in ours website to show how good you can do it

How we built it

we want to learn about react much as we can for making this project then we select framework and library that we have some knowledge like react firebase and tailwind and need to select mouth detect model call blazeface to detect face and mouth position and use normal html canvas to make canvas to draw image

Challenges we ran into

the biggest poblem we ran to is make pan and zoom in drawing section it make a lot waste of time a second problem is a uxui because we not know how uiux design and it make us need to learn about it and it is a lot of time

Accomplishments that we're proud of

we proud of successful integration of blazeface and html canvas and this ours first hackathon it have some hard to collaboration but at finally we can collaborate in large project for the first time

What we learned

we learned so much about how to collaborate when code , learned some basic of firebase like firestore storage and learn a lot of tailwind and react this this own first time make large project with react we learn so much from make this project

What's next for Mouth ctrl

now this website have no secrurity at all because i didn't write firebase secrurity rule because some function we used in this project need firebase cloud fuction (unique username checking and other) and we don't how use it now then next for Mouth ctrl is make it real secrurity and correct as first point
we need to build more feature in drawing section more in show image section and better uxui as second point