I love use all sorts of management tools, simply because I am kinda obsessed with the beauty of each tool has its core idea of how to solve problems.
When I was in my previous company as a marker, we always stored our projects by using gxxxxe drive, we didn't have a space for marketing specifically (something like confluence page, which each department can build its own knowledge base), therefore, there were lots of scattered documents, let alone to update these files, as for budget planning, we ended up using different sheet to maintain our budget, ever since then the idea of building my own work space has been planted in my mind.
Skill | Description |
---|---|
React Hook | SPA with function components |
Context API | For authentication |
React Router | SPA routing |
style-components | Build custom components by writing CSS in JS, easy to build scope for styles |
Git | Version control |
webpack | Module bundler |
Babel | Compiler |
Firebase | Firestore: Add, update and delete collection / document |
Firebase Authentication: Sign up, login and logout |
Third party libraries:
-
Create global context for user authentication, onece user signup, login or logout, it would trigger signup custom hooks (signup, login and logout) to connect with firebase authentication.
- Signup : After clicking signup, by using firebase auth "createUserWithEmailAndPassword" and "updateProfile" to create user data in firestore and uploading image in storage.
- Login : After entering email and password, it will trigger login custom hook and connect with firebase auth "signInWithEmailAndPassword" to check if email and password are correct.
- Logout: Triggering logout custom hook to update user status from online to offline and redirect user to login page.
-
Dashboard contains a doughnut chart, project list and a load more button when there are more then 3 projects.
-
Projects are sorted by due date, the nearest date will be shown first.
-
Doughnut chart will be rerendered once user adds or deletes new expense.
-
By submitting project, custom firebase hook will be triggered and added project details in firestore, user will be redirected to dashboard and project will be rendered in the same time.
-
By submitting budget, custom firebase hook will be triggered and added budget details in firestore, expense detail will be shown immediately on the left side.
-
Expense category and amount will be shown on the top.
-
Spent and remain budget will be deducted automatically based on the total budget.
-
Idea behind :
- Make it like other input fields, creating keys when page starts rendering and storing data after user typing / selecting any values.
-
Outcome:
- This approach only worked for normal input and select field.
-
Solution :
- Need to Create 2 buttons, one for saving texts in localstorage, another for restoring texts from localstorage.
- This approach wasn't the best one, since user needs to "click" to save and restore, it would be bad for user experience.
-
Filter was one of the features that took me for a while to figure out, initially I wasn't sure where should I put my states, so I've searched few similar features as references.
-
Learning points:
- Component should be (not limited) as clean as possible, for filter, I shouldn't put all the logics in this component, it only needs to check which tag is active.
- It would be better to put all the logics in dashboard as it has filter component, and pass data as props.
- Destructure props in filter component.
First time checking app performance (website) by Lighthouse, the scores were:
- Performace: 63
- Accessibility: 89
- SEO: 82
Lists that can be optimized:
Performance:
- Time to interactive: 2.5s
- Speed index: 2.3s
- Total Blocking time: 1,610ms
Accessibility:
- Link don't have a discernible name
- Adding
aria-label=""
to Github and Linkedin links.
- Adding
- Lists do not contain only
<li>
element & script supporting elements- Adding
<li>
before 2<a>
links in the footer.
- Adding
SEO:
- Document doesn't have meta description
- Adding
<meta name="description" content="">
in index.html
- Adding
Best practice:
- Browser errors were logged to the console
- Adding
type="text/babel"
in<script>
- Adding
- User can reply in the comment section.
- Single chatroom
- Mention functionality and notification.
- Fix text editor for saving and restoring content automatically without clicking.
Time: 20th Jul 2022
- Compiled pages into one file (
index.js
). - Added member and todo component (Work in Progress).
- Hiding API key by using .env