/noote

Notepad with react&redux

Primary LanguageJavaScript

noote

Simple, lightweight note app with React. screenshot It is ZEPL's challenge.

How to run

It also deployed at Noote with Firebase.

# Run local
$ npm install
$ npm start

# Test
$ npm run test

Issues

Issues are in the github issue page

API Specifications

Method URI Action name Response
GET /api/note/ fetchNoteList [{ id: 1, title: "string", date: "date", notebookId: 1, notebookTitle: "string", contents: "string"}]
GET /api/notebook/ fetchNotebookList [{ id: 1, title: "string", desc: "string", noteIdList: [], color: "string" }]
GET /api/notebook/${id}/ fetchNotebookDetail { id: 1, title: "string", desc: "string", noteIdList: [], color: "string" }
POST /api/note/${id}/ postNote "Note no.${id} successfully saved"
DELETE /api/note/${id}/ deleteNote "Note no.${id} successfully deleted"
PUT /api/note/${id}/ moveNote "Note was successfully moved"

Dependencies

  • UI library: ant design
  • HTTP Client: axios-like custom mocking promise
  • CSS Preprocessor: LESS
  • WYSIWIG Editor: SimpleMDE
  • Hosting: Firebase
  • Testing: jest, enzyme
  • Other react related library: Redux, redux-promise

Goals

We want to implement single page application which can manage notes(in other words, memo).

And for managing notes, We need notebook which can organize note.

Expected User behavior in organizing note will be like this

  • Create note in the "Todo" notebook
  • Move note in the "Todo" notebook to "Done" notebook
  • Delete note in the "Done" notebook
  • Sort notes in the "Todo" notebook via notebook title or update time

Description

  • note has title, content and update time.
  • notebook has title, description and set of notes.
  • note should be included one of notebook.
  • In note page, you can read/update/remove note
  • In notebook page, you can manage notes - create, read, delete, move to other notebook, sort and filtering
  • In notebook page, you should not show note content fully, you should show little about content
  • Main page, you can see the notebooks and recent updated notes.

Requirement

  • You should implement using React
  • all notes and notebooks should be able to access by url
  • all communication with backend side will be happened via REST api
    • but you don’t need to implement, just make mock
    • We will not provide API, you should make your own specification
  • You need to write test against component

Good to have

  • Integration test
  • Rich notes content editor
  • Other features that can help user to using this app

Essential technology stack

  • React (+ jsx) for component based UI

Remarks:

  • jQuery or other library which can manipulate DOM is not recommended