noote
Simple, lightweight note app with React. 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