COINSPIRE

Graphic Art Just Got Better!

Comment

What it does

COINSPIRE is a collaborative place where users from around the world can contribute pixel by pixel to collaboratively create a graphical image! With a timeout of one second, users can only get so far on their own and are encouraged to collaborate to take over the board.

Inspiration

We were inspired by games such as Microsoft Paint and Wordle, as well as collaborative tools like Visual Studio Code’s Live Share extension where users can work together simultaneously.

Fun fact, we used Live Share extensively while creating this app.

How does our project help the world?

After the COVID-19 pandemic, our team was feeling that the world was a bit bland. Our team wanted to build a project that would help people come together to create something beneficial while having a fun and rewarding experience. We brainstormed COINSPIRE, a platform for people to collaboratively build art and one that evolves over time as more people contribute to it. We also envisioned our platform to be something that can be used daily and something that people can talk about and share.

Just like wordle, we envisioned our platform to be used daily, like an ever-evolving video game that changes with its players. In short, COINSPIRE brings a bit more lemony to people’s lives.

How we built it

We built COINSPIRE with HTML, CSS with bootstrap, and JavaScript for our frontend, Node.js and Express.js for our backend, socket.io for webhooks and real-time client-server communication, and SQL with Cockroach DB for our database to store all data received to transmit updates in live time to all users. We hosted the website with Google Cloud services and reserved the coinspire.tech domain on domain.com.

Challenges we ran into

This was our team's first time working with professional database services as well as implementing features such as live time updates. We faced a lot of difficulty reading and writing to our database, as we cannot have duplicate (x, y) coordinates and reserve compute time.

Setting up and learning how to host a dynamic node.js server on google cloud also proved to be a bit difficult, but after a few hours of staring at random stackoverflow pages, everything managed to work out.

Accomplishments that we're proud of

We are very proud of being able to actually implement so many fully functioning features in one working application. At the start of this hackathon none of our teammates thought that such a complex and multifaceted task could be completed with such little experience and time, especially as we are just high school students competing against those majoring in related fields.

What we learned:

We learned how to access and use databases, write SQL, communicate with websockets, host dynamic websites via cloud computing, and work together as a team. Additionally, we have also learned some essential skills like time management and efficient virtual collaboration between people more than 100 kilometres away.

What's next for COINSPIRE?

We plan to expand our project and add more features like converting the canvas to a PNG file and sharing options to make it more interactive. Furthermore, we plan to add collaborative rooms in the server where groups of users can create their own unique art. We also plan to add more drawing tools, such as paint brushes, various textures, and a eraser tool.

Share this project:

Updates