It is recommended to view this page in a wider screen.
This notes all activities that Vu Van Dung (@joulev) does on the ezkomment project from the day it commences (12 March 2022 – the date of the first commit) until 1 August 2022. Since all activities from 12 March to 7 May are not properly logged as they are done, the time spent on studying and playing with new technologies, as well as the time to make small fixes and improvements have to be merged to one entry. All other entries also have to be derived from the commit history.
All activities from 7 May onwards are properly logged as they are done.
Since the two project member live about 300km from each other during the summer, F2F is not possible, and we choose instant messaging for all communications. Therefore during the summer, we have no direct meetings, whether online or offline, between the members.
Total hours spent
453
Dates (D/M)
Content
Hrs
Remarks
12/03 – 07/05
Learn new features in Next.js v12.1 and React v18, as well as learn and experiment with the libraries we use or decided not to use in the codebase
30
- Since I study these libraries and technologies on-demand and incrementally, there is no specific period for each activity. The period is from the start of the project to the date this project log is first documented.
18/03 – 07/05
Make various bug fixes, hotfix, design improvement, UI/UX improvement
10
- These activities are also done on-demand and the time spent on them is scattered over the whole project duration
12/03
Brainstorm for Orbital ideas
6
- A F2F meeting with teammate
13/03 – 14/03
Finalise Orbital idea
10
- Decide on main app features
- Finalise the Orbital proposal for submission
14/03 – 17/03
Draft initial design
10
- Design the logo of the app
- Colour scheme
- Overall app design style and layout
18/03
Set up the main code structure
6
- Set up a monorepo for the app (intended to host both FE and BE)
- Set up automated deployment on Vercel
- Configure Prettier, Dependabot and other tools
18/03 – 20/03
Implement the navbar
11
20/03 – 21/03
Add dark mode support
2
21/03
Implement the footer
1
23/03
Implement form components (input, select)
4
24/03
Implement the button component
1
24/03 – 25/03
Implement the app dashboard
10
27/03
Implement the user settings page
4
27/03
Improve design of existing components
3
28/03
Implement /app/site/[siteId] route
4
29/03 – 05/04
Implement /app/site/[siteId]/customise route
5
08/04
Implement /app/site/[siteId]/settings route
2
08/04 – 09/04
Implement /a/s/sid/[pageId] route
2
13/04 – 14/04
Implement the modal component
2
15/04
Design the landing page and its illustrations
2
- Write the main content of landing page
- Draw the illustrations that will be used in the landing page
- Design the overall layout and the navigation bar
15/04 – 17/04
Implement the landing page
7
18/04
Implement authentication pages
1
18/04 – 21/04
Implement documentation pages (/docs)
13
18/04 – 21/04
Experiment with remark, prism and other tools used to render Markdown under /docs pages from server-side
8
- Do various experiments to render Markdown documentation files with all necessary features (custom components, syntax highlighting, etc.) while still delivering good UX
- Next.js in general is similar to React, however since Next.js offers the ability to server-side render pages, these experiments are used to achieve that.
21/04
Learn about React error handling and implement custom error pages
1
22/04 – 23/04 and 03/05
Produce landing page illustrations with web technologies instead of Figma drawings
5
23/04
Implement and test own @types/react-syntax-highlighter and submit PR on DefinitelyTyped
6
- Upgraded react-syntax-highlighter type version from v13 to v15
- DefinitelyTyped/DefinitelyTyped PR #60024
24/04
Learn and integrate GitHub API to get last modified dates
1
04/05 – 05/05
Learn about React custom hooks and refactor/simplify some logic (theme, screen width, etc.) with custom hooks
7
06/05
Completely render Prism on landing page at build time, remove Prism code from client JS (PR #39)
9
06/05 – 09/05
Produce the Liftoff video
12
- Initial attempt to produce the video from existing components by Remotion failed
- Write the main parts of the video from existing text in the website
- Produce the video with MS Powerpoint
08/05 – 09/05
Produce the Liftoff poster
5
N/A
09/05 – 10/05
Study and use MDX for all Markdown-related pages
4
- Remove react-markdown and react-syntax-highlighter
- Brought page SEO scores up massively
10/05
Add the Orbital proposal to the /orbital/proposal route
9
- Also make the proposal print-friendly. So from now we can make the README using the same format too, while taking advantage of the current site design and web technologies for consistent and good formatting
- Add various features to each post under the same layout (BlogLayout)
- https://ezkomment.vercel.app/orbital/proposal
12/05
Read mentors' introduction slides and apply for mentors
6
N/A
12/05
Set up CI for linting current code
1
- CD is already provided by Vercel
- CI is used to run the built-in Next.js' ESLint configuration
13/05
Set up the main workflow for the whole project
5
- Write specific rules that all developers need to abide by to ensure smooth progression of the project
- Set up GitHub Project
14/05 – 16/05
Write unit tests for the frontend code
18
- Learn Jest and React Testing Library
- Write unit tests for components with complex logic (so too-trivial components are excluded)
- Set up codecov
16/05 – 17/05
Add Firebase to frontend code (PR #57)
10
- Set up basic authentication
18/05
Attempt to set up a Firebase + Next.js project with auth handled on server
8
- Learn firebase-admin and how to handle session cookies with Firebase
- Suffer reading complicated and unclear online articles on CSRF attacks and CSRF tokens
- Make a sample minimal application with Firebase, Next.js with cookie-based authentication
19/05 – 20/05
Continue adding Firebase to frontend code
14
- Continue adding features to PR #57 after deciding handling server-side-based auth with optimised-for-client-side Firebase is just not worth it
21/05
Write the initial draft for the Milestone 1 README
7
N/A
22/05 – 23/05
Improve design of existing components
5
- Use .container Tailwind CSS class for consistent design between public pages and protected pages
- Fix dark mode flicker on load
24/05
Add Search Engine Optimisations to all pages (PR #66)
6
N/A
25/05
Add this project log page (PR #67)
4
- I want to host everything on the website instead of redirecting to third-party websites, therefore I did this.
26/05 – 31/05
Finalise Milestone 1 submissions and other things
8
- Finalise and publicise Milestone 1 README
- Help teammate with his own project log page
- Do various little things to kill time, such as making the readme.md look nicer, fixing typo, adding some small tests, making some small UI improvements, etc. as the backend development is so incredibly slow and I am terribly bored
31/05 – 01/06
Evaluate teams 2Donkeys and 24Health for Milestone 1
5
N/A
02/06
Fix serverless errors caused by Puppeteer (PR #75)
2
- Remove the need of ISR for log-joulev, instead use SWR
02/06
Assist backend in migrating to Next.js and Yarn
1
- Vercel doesn't support NPM workspaces well, so we are forced to use Yarn (for now)
- Help migrating parts of backend to /pages/api directory
03/06
Deploy a hot-fix for the landing page
1
- Fix an embarrassing error on Chrome for the landing page
04/06
Clean up after the emergency hot-fix yesterday
4
- Set up proper error logging to avoid similar incidents in the future
- Revert the visual content of the landing page to its previous state but without the errors and related complications
09/06 – 13/06
Redesign the landing page and improve some UI elements (PR #108)
15
- Redraw a landing page from scratch in Figma
- Make some UI improvement after feedback from Zhu Hanming (UI/UX workshop tutor)
- Learn Framer Motion 🚀
- Implement the redrawn landing page with all illustrations and animations
09/06
Code review Viet Anh's PR #90
2
N/A. Just go to the PR to read more details.
10/06
Restructure the whole repository (PR #96)
2
- Convert the repo from a monorepo to a normal repository
- Unify the import system and make clear separation between backend code and frontend code within the same codebase
11/06
Integrate the frontend with the new backend auth system (PR #102)
2
N/A
13/06
Fix a frontend bug on React hydration (PR #115)
1
N/A
15/06
Add a demo in Plain HTML™
1
- Add an API route where the HTML of the comment is served
- Add a plain HTML file where the comment section is embedded
- https://ezkdev.joulev.dev/sample/index.html
17/06
Code review Viet Anh's PR #121
1
N/A
18/06 – 20/06
Implement CRUD for sites (PR #132)
20
- I should probably have written a lot more here, but I wrote them already in the PR description so if you are interested, please go there
21/06
Initial design of the new poster for new milestone requirements
4
- Try to make a poster with sufficient information without showing too much text
- Learn Figma auto-layout (similar to CSS flexbox) for real this time
- Again (of course) everything is done in Figma
21/06
Code review Viet Anh's PR #134
1
N/A
22/06
Update frontend according to PR #134
1
- Migrate frontend code to the slightly-newly-redesigned backend
- Hurrah now the typing should be consistent for the entire application
22/06 – 23/06
Implement CRUD for pages (PR #141)
8
N/A
24/06 – 25/06
Write the Milestone 2 README (PR #143)
6
- Resolve existing issues with the app design specified in MS1 README
- Test and write the specification for the customisation feature, completely from scratch as previous design had two many issues
- Got punched directly in the face by Grammarly not once, but about 300 times
26/06 – 27/06
Make Milestone 2 video
6
- Make the slides from Viet Anh's suggestions
- Record myself (sh*tty audio, sorry but bear with it, I'm not a YouTuber)
30/06
Refactor test configuration (PR #158)
1
N/A
01/07 – 02/07
Evaluate teams inc sst and Paper Hands for Milestone 2
3
N/A
04/07
Further enhance test system (PR #176)
1
- Remove all remaining computer-generated files from version control (except yarn.lock)
- Modify custom server Jest environment
05/07
Set up PDF and Table of Contents (ToC) for READMEs
2
- Based on MS2 feedbacks
07/07
Decorate the auth page (/auth) with trianglify background
1
08/07
Allow users to approve/delete comments (PR #180)
1
N/A
08/07 – 25/07
Write the public documentation (PR #181)
16
N/A
09/07
Add notification sidebar with placeholder notifications
1
N/A
09/07
Enhance the process to build PDF from Markdown via LaTeX
1
- Use svg2tikz to convert the logo to portable LaTeX code
- Fix the bug that the logo is not rendered correctly on macOS Safari (not fixed for existing documents though since I don't like updating binary files in a git repository)
10/07 – 20/07
Various small improvements in UI design
3
- Confetti on page creation because why not
- Fix some buggy z-indexes. F*ck CSS
- Implement the toast to handle visual feedback to users in place of the existing banners
- Allow users to set customisation page to full screen
- Wonder why my teammate is using EN-US spelling in some places and EN-GB spelling in others
19/07
Integrate the backend's customisation routes
2
- Integrate the routes introduced in PR #197 to the frontend
20/07 – 21/07
Implement the search bar on documentation pages (PR #208)
4
N/A
22/07
Add small enhancements for both backend and frontend
2
22/07 – 25/07
Start working on Milestone 3 materials (PR #210)
7
N/A
23/07
Customise the Monaco editor to specifically work for the customisation feature
4
1ace2bd- Customise the theme: now the colours are consistent. Well... not *that* consistent but at least it's better than before.
- Customise the HTML language definition used.
26/07 – 28/07
Various small improvements in UI/UX design
3
29/07
Evaluate teams 24Health and Paper Hands for Milestone 3
3
N/A
30/07
Write more documentation (PR #227)
2
N/A
31/07 – 01/08
Write the demo application
8