Skip to content

nathanlao/2024-SystemsHacks-DreamWeaver

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Dreamweave Journal

2024 System Chaos Hackaton

result

result

Inspiration

In daily life, people always "shout at" Chaos and try to avoid it. However, chaos is not a monster that we should get afraid of. We treat chaos as the spring of inspiration. In the world of art, chaos could be a masterpiece. That's our initiate to develop this online diary designer, which enable people to express with freedom and create their own arts.


What it does

In our projects, we provided a canvas for users to create their own stories in a diary, which is empowered by our amazing tools, including draggable texts, rotatable stickers and also a panel to paint graffiti.


How we built it

We built our project with JavaScript and React, and the draggable components with canvas were created by react-konva library.


Challenges we ran into

In terms of reusability, one of the challenges we ran into is the high level design of the application, specifically how to make our design/react component more reusable.In terms of technical part, we ran into the issue of setting the constraint on the draw board’s size, which is related to CSS styling issue.


Accomplishments that we're proud of

We architected a robust framework featuring reusable workflows, allowing seamless attachment of draggable and rotatable content onto the canvas. Our pride stems from the successful creation of a dynamic diary designer that marries power with functionality. This achievement is a testament to our team's remarkable collaboration and ambitious spirit, especially considering that we formed during a hackathon. Despite our impromptu origins, our collective efforts and seamless teamwork elevated us to conquer challenges with finesse.


What we learned

We learned a lot after today. In terms of technologies: we discovered a React library called Konva for simple drawing and learned how to use it. We also got a chance to practice using the callback function in React. Another thing that we learned is rapid prototyping: after having the ideas, our team had to make a quick prototype deciding the structure for the application. In addition, this is all our first time joining a hackathon, so we learned how to manage time effectively to meet tight deadlines: we learned to scope and prioritize features based on feasibility and impact. Most importantly, we learned how to collaborate and communicate clearly, concisely with each other under time constraints.


What's next for Dream Weave Journal

The next for Dream Weave Journal could be the integration of rich text editing as this could bring users more flexibility to format their journal. This can include text styles, links and perhaps embedded images and videos. Moreover, we could integrate the templates, which are customizable for different journal entries. The last thing is that we could bring in the feature of creating customized stickers, reuse them in the application and personalize the journal.

About

Online diary designer powered by React

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 69.1%
  • CSS 23.6%
  • HTML 7.3%