Why Napkin?

Why Napkin? My partner in this project, Luke Parker, had the idea for a handwritten note app. Specifically, he was inspired by the idea of scrawled out notes on a napkin. They’re simple and accessible, and sometimes note-taking apps can be… less than simple and accessible. This is why we chose to create Napkin for our final project in a course at Make School. With my experience in front-end, and his idea, project management experience, and back-end skills, we actually came up with a neat little project.

The basics — our team

Luke Parker is a senior at Make School. I know him as one of the most successful project leaders and associate him with his project Boundri. Boundri is an app for visually impaired folks to use their phone to see. The way he’s taken accessibility seriously and used it as inspiration in its own right is amazing to me. So when we asked if I was looking for a partner for this project, I couldn’t have been more impressed with a potential partner. Luke’s concentration at Make School is in Back End Web technologies.

As for me, I’m Megan O’Bryan. I also am a senior at Make School, studying Back End Web tech, but I dabble quite a bit in the front end as well. I have lots of tech interests that I hope to explore more after graduation.

The basics — features

Canvas tools: marker, eraser, line tools. These tools enable drawing, erasing, and drawing straight lines respectively.

Authentication. This has users login to view and access and edit their napkins. Managing Napkins this way allows them to be private and relevant to you at all times.

Responsive canvas size. Resizing the window resizes the canvas.

The basics — our stack

Konva

Luke found Konva by searching for implementations of the tools he was interested in adding to Napkin. Konva is a 2d canvasing library for JavaScript, and it’s been a pleasure to work with. I mention it because it is the bulk of the technology I was writing for this MVP, and it’s the heart of our editor.

Flask

Flask is a micro web framework for Python that managed our routes for the web app. I dabbled a little bit in Flask for this project dealing with CORS issues with Ajax (for saving our Napkins), and ensuring saving worked with my adjustments to the app, but this was primarily Luke’s territory. Luke worked on routing and working with MongoDB via our flask app.

MongoDB

MongoDB is a document-oriented database. For our database, MongoDB was the right choice to save lots of JSON data. JSON data is how Konva data is stored.

Electron

Electron is a software framework for making web apps into desktop apps. Luke had a goal of working with Electron and made it happen! Napkin is meant to be cross-platform so it is, with a web app and a downloadable desktop app that will be available via our landing page. He actually reported that Electron made the experience much easier than expected.

The scoop — challenges

Production! So many production issues. I got the site up on Heroku moments before the class we were supposed to present started but even then the site didn’t have the landing page or all the correct styling or anything like that. I was a nervous wreck and wanted to call it there but Luke got it hosted on another site, worked through tons of access issues and terminal communication to get it up and running. When it couldn’t be perfected in time, he presented a gorgeous local demo. He really put effort into all the functionality and styling on his landing, login, and registration pages and I honestly love the Napkin aesthetic.

Learning Konva! Konva has a ton of great resources on how to best use the canvas tool. Still, we struggled to find a way to compromise a scrollable canvas and a responsive window size. We ended up scrapping the scrolling. We initially left it in after leaving it in after other problems with it, because the responsiveness was a bigger priority. In the future, this is likely something we’ll revisit.

Team issues. This is mostly on me; this term and even prior ones had big mental health struggles for me that hugely took from my ability to contribute toward schoolwork. Luke as a team lead was my biggest motivator for keeping up with contributing since he naturally has so much of the leadership skill we emphasized in this class. Being understanding and being willing to set up frequent accountability meetings was exactly what I needed from a partner in this project.

Many parts — including this blog post — were assigned as part of this project. Keeping up with them all is another challenge.

The scoop — future steps

There’s a lot of features we’d love to see with Napkin.

Scrolling and editable canvas size! Having these two features would require a great understanding of the front-end codebase, but it’s something I’m considering working on for my upcoming intensive project.

More customizability — color and thickness selectors! These features were planned for the first iteration of the project and are close to being ready to be deployed.

Sharing! It’s actually in our proposal that Napkins be shareable and that’s definitely a next step feature.

Further along — mobile versions? Having Napkins accessible on your mobile device could be huge for us to expand.

Conclusion

I’m really glad I got to work on a project that emphasized polish so much before my time at Make School ends. Getting to work with a partner whose work I admired for a while now was really great and this is the smoothest group project I’ve worked on at any school. I know a notes app can be so generic but having the handwritten aspect added a really interesting twist to it. With apps like Evernote where features are at every twist and turn, the notes app project has the potential to be really intimidating. Being inspired instead by something as simple as napkin scrawlings takes a lot of the pressure away.