Zen-NotePad

Description

---

zen-notepad is a AgularJS one-page web application, running on light back-end RubyOnRails. To see it live, please visit zen-notepad for a live demo. zen-notepad is essentially a note pad to write notes, it allows user to create, delete, view and edit the note. Notes are stored on browser local storage, so if you accidentally closed the browser, data will remain.

Notepad2.png

Check out the project on GitHub: https://github.com/shawnfan/zen-notepad.git

Features and Walk Through

• One-Page web app that runs multiple templates: Home, Note, Navigation. Code is quite clean to read.
• MVC framework: AngularJS serves as controller and view in this demo, and the model is simulated bylocal storage + angular service
• Device responsive. It transforms to mobile device size and feel when viewing on a phone.
• Follow the design pattern of Google Angular Material
• Add, View, Edit, Remove function
  Add: click "+" icon to create a new note. Page directs to that new page, then you can edit title and note contents.
  View: click on note title to view
  Edit: click on editing field when viewing the note
  Remove: click on '-' button to remove the note.
• Add image to individual note, use AWS api to store image on AWS S3, and view image via AWS Cloud Front.
• Limit image size to 2 MB and totaly 6 images. User can select multiple images at once. The app will throw error notice if try to go over the limit.
• Prompt user with dialog when trying to delete a note or reset the local storage.
• Click on Home button to return to home page.
• Display notes with ng-repeat by order of note creation time on home page. Datetime is generate on note creation.
• Allow user to reset local storage, which removes all notes from the notepad.
• User can check off the note, so it works like a todo-list
• Browser local storage: all data is stored locally
• Auto save: user does not need to click 'save' button to store notes. It's automatic.

This app is mainly to demonstrate the the usage of some really nice web development tools, framework and UI design patterns.

Front-end: zen-notepad uses the set of tools around AngularJS: angular of course,angular-ui-router to build one-page navigation, angular-material for the Material Design Pattern, ngStorage to store data in browser local storage.

Backend: RubyOnRails with minimum backend code, majorly just serving up the angular app and support resources assets pipeline. The web app is hosted on Heroku.

Cloud Storage I used AWS S3 to store uploaded images, and use AWS Cloud Front to deliver the images to user, in case in some area a CDN could speed up the image loading.

Note, originally the angular app was using inline template for routing and page navigation. However, the routing generates error because google chrome restricts XHR calls on file:// protocol. Secondly, as the app grow, the index.html code does not look sufficient. So I made the decision to quickly serve it up with Rails. On the backend, there is just minimum configurations. Rails also helps to manage all the angular script, css input pipeline, so the index and template pages all look very clear.

Run it locally

---

If you want to run the server locally, simply clone this git repository, and run rails s. Though, if you are not using rails previously, you may need to make sure a few components already installed: Ruby ,Rails, sqlite(We are using browser local storage rather than sql db. Here sqlite is installed as part of Rails structure)

Clone zen-notepad:

git clone https://github.com/shawnfan/zen-notepad.git

In the root directory of zen-notepad:

If bundle not installed, make sure to install it:

gem install bundler

Then, install all packages:

bundle update 
bundle install

If bundle throws any tools or resources with error, follow the instruction to install the missing parts.
To start the server, simply run:

rails s 

The server will be running at localhost:3000 by default.

Code Structure

---

Quite a few dependencies and setup has been done with RubyOnRails, and basically to integrate Angular Front-end with the Assets Pipeline.

As a result, the front-end files are hosted in a very clear way: under root folder zen-notepad/app/assets/, I put all angular javasript, html template, css style sheet.

The one-page frame is part of RubyOnRails, which is the application.html.erb. This file contains the rails js and css pipeline, ng-app and ui-view, and it's basically a skeleton frame.

zen-notepad/app/views/layouts/application.html.erb

For front-end code review, the only section of code we need to look at is:

zen-notepad/app/assets/*

Just a brief view of the front-end code under zen-notepad/app/assets/:

zen-notepad/app/assets/ 
       |----javascripts 
                ||- home/ 
                        ||**||- _home.html 
                        ||**||- notePadCtrl.js 
                ||- note/ 
                        ||**||- _note.html 
                        ||**||- noteCtrl.js 
                        ||**|| noteService.js 
                ||- app.js 
                ||- application.js
       |----stylesheets 
                ||- application.css

The front-end code is grouped together by page functionality; each page has a controller. The major service is the noteService.js, which serves as Model, and is our core object in the app. I followed this pattern for coding efficiency: it's easier to navigate to templates and edit code since I'm building a one-page app with multiple templates.

App Creation Process:

---

Below is the thinking && plan process. Basic features mentioned below are all implemented.

UI Draft
Sketch up the pages, which is the goal to accomplish, with basic functionalities of create, edit and view note; also added a few features as next step: note check-off function, remove function, user account, add attachment function to cloud storage.

Also, see the sketch below:

alt text

Start the draft design for the core objects

NotePad (Home page), Note (Individual Note page)

Do a simple object oriented design: In each object, list out the attributes of each type of object and the possible methods to create.

The core object is the note object, and I probably will create angular service around the note object, saved on local storage; this is going to serve as the 'Model' for the MVC app, since I'm not going to implement real backend Model and controller with Rails ActiveRecord. Clearly, in this demo Angular serves as the frontend controller and it renders the view.

List all of the features and the according tech stack that maybe used

• For objects Note and NotePad, store on browser: browser local stroage. Use JSON format to create dummy data.
• List of Notes: Angular ng-repeat
• One-page app and 2 templates for Home and note: Angular ui-view and ui-router
• Host the app on a server. Google chrome won't allow XHR calls
• Use bower, gem to nicely record dependencies, so to make it easy to clone&&run.
• Button, layout, responsive design: Angular Material layout and directives

If with more time:

• Image attachment: AWS S3 storage.
• User login and account creation: Use RubyOnRails + Devise. (Not included in this demo)

Tasks

1. Create index + angular, simple test, build Note JSON object, display list of objects on Home Page.

2. Host RoR, link to github.

3. Setup app structure in RoR. Move index and angular code. Configure the pipeline. Test.

4. Test router in angular config.

5. Create the pages in separate templates

6. Work on simple grid and replace UI elements with angular material elements.

7. Build methods for note object, test it with angular.

8. Add imageattachment feature.