<Make> Something

note editor with markdown
new note
homescreen
notes page
markdown rendered

Inspiration

Josh's welcome speech about what the hackathon is about was our biggest inspiration. He told us to "make something", so we did. We decided to make a markdown online note taking app so that others could "make something"

What it does

This is a markdown note taking app. It allows user's to register accounts with a unique usernames and passwords saved to a database. For added security the passwords are hashed so that in the unlikely event that the website would be hacked, the user's passwords are safe. Users can then log into their accounts and have the option to change their password, logout, see their recent notes, see all their notes as well as create new notes.

The Notes

When user's create new notes they are first invited to create a title and their new note is added to the database, linked by a foreign key to their unique user id in the users table. They are then taken to the edit note page where they are allowed to add the content of the note. In here they can use markdown formatting such as '#' for headers, '**' for bolds and even code blocks using '```'. They can then review the rendered page by pressing the display button. If any changes need to be made, they can press the edit button to switch back.

In order to help keep track of all the user's notes we have 2 options. One option is the 'Recent Notes' dropdown menu. This, using a 'last_modified' field, gives hyperlinked options to the 10 most recent modified notes. The other available option is a list of all notes. These give an alphabetical list of all the notes the user has created.

In order to protect from javascript injection, when the notes are rendered we have added special commands that replace any <script> and <\script> so that this does not occur

How we built it

We started off by brainstorming in the most prestigious note taking app available... MS paint. We decided on the features we wanted adding and got to work. We decided to do our back end code in python's microweb framework Flask and then our front end using templated of HTML, CSS and JavaScript. We used GitHub to push and pull our changes so that everyone could keep work on individual aspects of the project separately and then we could combine our code when needed.

Challenges we ran into

We ran into a few issues combining our front end code with our back end code. This was due to lack of knowledge as well as lack of time. However, we produced fully working front end models that can be demonstrated separately to the website. This meant that our main website's front end is quite botched and not as pleasing to the eye as we wanted to.

Another challenge we ran into was installing the prerequisites on everyone's laptops as not everyone had used python or git before. We also wanted to include emails and email authentication however the previously used technique was no longer available due to Google's security policy changes. Thus we had to focus on just a username and password

Accomplishments that we're proud of

We worked really well together as a group, delegating tasks when necessary and imploring everyone's unique skills. This allowed those who were not as confident with what we decided on implementing but gave them a new opportunity to learn new skills. Another accomplishment was actually having a finished project. We came to the hackathon with no idea what even a hackathon was so we are proud that we were able to complete something that works and functions mostly with what we wanted it to be

What we learned

We learnt how to work together on a project as a team, how to best to utilise everyone's skills. We all learnt new programming skills, as well as strengthened our current ones. We learnt how to better abstract as some of our initial ideas were not as crucial as some of the others. We also learnt how much it takes to build a fully functional website and how we needed to think more about how to join the front end and the back end so that they would have fitted together at the end. We also learnt to be mindful about when to take breaks... and when to touch grass... so that we did not burn out and could continue throughout the night.

What's next for Something

Next we would want to implement a text editor menu so those who are not as confident in markdown could use buttons to add certain features. We would have liked to improve the design of the website so it was more streamlined and everything was where it was supposed to be. We would work to make the current untethered front end work with our current back end, perhaps needing to tweak both. It would also be nice if we could add the option to share notes with other users and add email authentication for added security.