-
-
Homepage with 2 example notes
-
Example tag channel
-
Trash channel
Inspiration
When we were coming up with ideas on what to build for this hackathon, we noticed that we all had a personal Discord server to keep track of our notes. However, Discord servers are not intended for this purpose. So, we decided to create a note-taking website with better organization, referencing popular note-taking applications such as Google Keep.
What it does
Users are able to create and delete notes, each with a title and a tag. All notes are shown on the homepage while deleted notes are displayed in the trash channel. Each new tag creates a new channel that allows users to access specific notes with the selected tag. Users can also use the search bar to find certain notes with relevant content.
How we built it
Once we had an idea of what we wanted to build, we set up a Magma board to plan and visualize the basic structure of our site. We then created a list of tasks to address, including a tag list, an add-note function, a search function, and the stylesheet. To get started, we made a React app and GitHub repository. We also found a video that we used as a base for our project (reference video). While working, we made sure to actively discuss our thoughts to prevent confusion.
Challenges we ran into
Throughout our experience, we came across multiple challenges, the most prevalent one being merging conflicts on GitHub. The tag list was very difficult to implement, and the components were hard to visualize because of our lack of familiarity with React. Towards the end, we had issues with deploying the website to GitHub.
Accomplishments that we're proud of
This is one of our first hackathons, and we're proud to have created something in such a short amount of time. We were also able to learn and use React.js with no prior experience in web development. Furthermore, our workflow was smooth due to our collective decision to brainstorm ideas and distribute tasks among us.
What we learned
Participating in this hackathon taught us important skills such as problem-solving and collaborative programming using GitHub. While developing the website, we learned how to implement the useState Hook and animations with CSS.
What's next for CozyInk
We plan to implement an account system so that notes can be accessed after closing the browser. To improve user experience, we also hope to add the option to create multiple tags per note, edit notes, and organize notes by date created.
Log in or sign up for Devpost to join the conversation.