- MyNotes is a hybrit note taking web app based on widgets.
- Users can signup or login with mail.
- Users can take notes with advanced editor, voice notes, create task lists, set events and sync with Google Calendar.
- Some features are not cross browser yet. Google Chrome is recommended browser to test demo.
- MyNotes is a final personal project of Social Hackers Academy Front End Development Course
- More features, bug fixes, updates will come as the development process continues.
- Project is divided in 3 paths, at the end of production there will be 3 versions. Web (React), Mobile (React Native) & Desktop (Electron).
- JavaScript
- React
- React Router Dom
- Context API
- Material UI
- Google APIs
- JS Speech Recognition
- Firebase auth, firestore & firebase hosting.
- 3rd party libraries ( CKEditor, Splidejs )
- Figma
To use the demo, you can sign up with a dummy email (for exampple: [email protected]).
Note that Voice Note feature is currently in experimental status and works best in Chrome.
Project DEMO
-
Login/Signup
-
Home
-
Notes
-
Tasks
-
Info
- Design project components & widgets in Figma.
- Create React Environment in local.
- Install Packages.
- Create folder structure.
- Code basic outlines.
- Implement React router structure.
- Build Material UI custom theme.
- Build side nav & implement redirecting.
- Build Home, Widgets, ContextAPI structure.
- Notes Widget, implement Sliderjs to show cards.
- In here, notes will be read only. Add routing on click.
- Implement Sliderjs and make adjustments.
- Add editor drawer.
- Instant Note Widget.
- Implement a form & text field which will allow user to create basic/undecorated text notes.
- Voice Note Widget
- Implement Google Speech-to-Text API. ( Will be added in second sprint )
- Add JS Speech Recognition. ( This is an experimental feature, will be replaced with Google Speech-to-Text API )
- Check the user's browser to display widget in the home page or not.
- Task List Widget.
- Make each task appear in card, user only allowed to change checkbox status.
- Build in-component drawer for input group.
- Events Widget.
- Build in-component drawer for input group.
- Implement Google Calendar API and sync events. (Update-only for now)
- Notes Widget, implement Sliderjs to show cards.
- Build Notes Component.
- Display notes in separate cards and each card should have delete, edit, update button. (Appear at hover)
- Make instant edit feature. User will edit the text directly in the card without opening editor.
- Make the 'New Note' button and open editor drawer on click.
- Build a submit in Editor handling mechanism which will decide to edit or create new note.
- Implement CKEditor5 Classic Editor.
- Build Tasks Component.
- Build input drawer & 'New' button.
- Display each task list in a card. In cards, every task list item will have checkboxes & delete buttons.
- Make each editable, user can edit text directly.
- Auth
- Install Firebase & create project in Firebase console, enable Email & Google Sign In methods.
- Create real time database in Firestore.
- Build Login/Signup/Logout components.
- Refactor Routing, add redirect.
- Build static components.
- Refactor CSS, create a Context to distribute common styles.
- Deploy.
- Add user feedback, manage & display errors properly.
- Improve Auth. Add Google sign in.
- Store user data in Firestore, create a data structure for every user & store everything.
- Update events, sync user's all events from Google Calendar and display in widgets. Add reminders & send sms/email notification to users.
- Update Voice Note feature, make it cross browser. Switch to Google Speech-to-Text API.
- Update Note Editor. Allow users to upload documents & media files.
- Update Instant Note, add Balloon Editor.
- Implement Voice Command feature to navigate and use the app.
- Update task list input group, add Balloon Editor.
- Update side nav, make it treeview, display categories.
- Implement dynamic search bar.
- Create user profile area & make it editable.
- Add finance & email widgets.
- Make the notes downloadable & shareable in pdf, word, docs formats.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent