A Million Dollar Project
(Two Sentence High Level Description) A web application that makes bullet journaling flexible and easy to use, allowing users to organize their tasks in a more effective way for easier retrieval and access. It aims to help users keep track of their habits, sort their daily activities, and plan for their future goals.
Project Description
The project aims to resolve some of the common issues faced by bullet journalists: time-consuming styling, difficult to look up for an item, inflexibility in adding, editing, or deleting pages, etc. Bullet journals are known for its systematic approach to help planning and prioritization. By digitizing bullet journals, we are striving for improvements in usability and flexibility. Most data will be in the form of text and date/time. The system would require users to register and sign in before using. Users can primarily filter, search, view, add, edit, and delete the entries. Additional functionalities may include pagination, uploading images, allowing users to publicize or share their bullet journals, etc.
Project Task Requirements
| Minimal Requirements |
|---|
| Able to add, delete, and edit a message |
| Able to search/filter journal for keywords and dates |
| Able to create and login to account |
| Change status of task |
| Navigation bar (As index/table of content) and Drawer (As toolbar in edit mode) |
| Standard Requirements |
|---|
| Multiple views (e.g. yearly, monthly, weekly, and daily, etc) |
| Pagination |
| Font customization |
| Able to customize bullet types |
| Keyboard shortcuts for formatting |
| Page flip animation (https://www.npmjs.com/package/react-flip-page) |
| Stretch Requirements |
|---|
| Allow for images to be uploaded and inserted |
| Allow for user sharing and viewing |
| Application of layout templates |
| Offline edits |
Task Breakdown
1. Able to add, edit, and delete a message
- HomePage
- This would be the first page the user sees once logged into the app
- Add welcome text with the user’s first name (or stick with “Hi, Gorgeous!” until the backend is set up properly)
- Add action for doing a GET request to fetch the user’s information and tasks
- Add three buttons for (1) Adding a dated list, (2) Adding an undated list, and (3) Going to the last created/updated list
- Add/Edit
- Front End:
- Implement a TextField without any outline until hovered over/on focus Add actions for sending a PUT request to the backend to save the updated message
- Front End:
- Delete
- Front End:
- Add erase icon onto the drawer toolbar
- Change cursor into an eraser (or some other indication to show that erase mode is on)
- Handle onClick action for the list items (i.e. status icon + task) when erase mode is on
- Add actions for sending a DELETE request to the backend to remove the item
- Front End:
2. Drawer as toolbar
- Add a drawer that can be controlled to open and close
- Add buttons to control different parts of the page (Need to finalize design first)
- Add logout button
- Add actions to clear the redux state upon logout
Prototype
