Skip to content
A delightful little notetaking app.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.firebase
public
src
.firebaserc
.gitignore
.travis.yml
README.md
firebase.json
package-lock.json
package.json
tsconfig.json
tslint.json
yarn.lock

README.md

Womby Build Status

Womby is a delightfully simple web-based notetaking app that autosaves your notes as you type. It works on all devices with modern internet browsers.

Demo Account

Email: msgreen@test.com

Password: password

See it live:

https://womby-staging.firebaseapp.com/

A screenshot of Womby's desktop layout

Data persistence is achieved using a RESTful API built with NodeJS and Express. The backend repo can be found here.

Engineering Highlights

  • Designed for both mobile and desktop devices
  • Thoughtful autosaving to reduce load on backend while never losing user data
  • Persistent login / authentication using JWTs
  • Data persistence using a RESTful backend (check it out here).

Tech Stack

Front End

  • JS / React / Sass
  • Hosting with Google Firebase
  • Testing with Jest / Enzyme
  • Git / GitHub for version control
  • Travis for Continuous Integration

Back End

  • NodeJS for runtime environment
  • Express for the HTTP server layer
  • PassportJS framework for authentication strats
  • Mocha / Chai for testing
  • Heroku for backend deployment
  • Git / GitHub for version control
  • Travis for Continuous Integration

Architecture

The entire application lives in the src/ folder:

.
├── components
│   ├── common     <-- Holds a few general helper functions
│   ├── landing    <-- Houses the unauthenticated user flow
│   └── workbench  <-- Contains the meat of the application
│       ├── Workbench.js  <-- The container component for the editor app
│       ├── addNote       <-- The add note (+) button
│       ├── editor        <-- The Editor component (the heart of the application)
│       │   ├── Autosaver.js  <-- A clever little way to debounce autosaving
│       │   └── Editor.js     <-- See inline documentation!
│       └── menus         <-- Contains the menu components for both layouts
│           ├── MobileMenu.js  <-- The hamburger and slide-out menu for mobile
│           ├── Toolbar.js     <-- The desktop toolbar on the left side
│           └── sidebar        <-- The file explorer used in both menus
├── controller  <-- Holds the Redux layer of the application
└── db          <-- An interface to access the backend of the application
You can’t perform that action at this time.