/glance

simple work place for you and your team to gather project ideas and monitor budget.

Primary LanguageJavaScript

glance - simplified work space V.1

Table of contents

Why

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.

Project Description

Demo

Component Tree

Component tree

Tech stack:

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:

  1. react-select
  2. tinyMCE
  3. scrollReaveal
  4. react-chartjs-2

Features

1. Authentication

  • 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.

2. Dashboard

  • 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.

3. Add project

  • 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.

4. Budget planner

  • 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.

Learning / Faild case

Implement saving and restoring texts in localstorage for tinyMCE text editor.

  • 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.

Implement filter functionality

  • 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.

Performance optimization:

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.
  • Lists do not contain only <li> element & script supporting elements
    • Adding <li> before 2 <a> links in the footer.

SEO:

  • Document doesn't have meta description
    • Adding <meta name="description" content=""> in index.html

Best practice:

  • Browser errors were logged to the console
    • Adding type="text/babel" in <script>

Scores after fixing : Lighthiuse

Future update

  1. User can reply in the comment section.
  2. Single chatroom
  3. Mention functionality and notification.
  4. Fix text editor for saving and restoring content automatically without clicking.

Update V1.1

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