Creating a New eLibrary website for fun using React Material UI as my frontend.
So far I've made the ERD, Models and Database entries for each entity. Planning to make serializers for JSON formatting, views for CRUD operations, and urls to connect for backend to frontend connection.
So far I've made the ERD, Models and Database entries for each entity. Planning to make serializers for JSON formatting, views for CRUD operations, and urls to connect for backend to frontend connection.
November 3, 2025 at 12:57 PM
Creating a New eLibrary website for fun using React Material UI as my frontend.
So far I've made the ERD, Models and Database entries for each entity. Planning to make serializers for JSON formatting, views for CRUD operations, and urls to connect for backend to frontend connection.
So far I've made the ERD, Models and Database entries for each entity. Planning to make serializers for JSON formatting, views for CRUD operations, and urls to connect for backend to frontend connection.
To increase complexity, instead of using a single key to store encrypted image data. Used MultiFernet to assign each Chat a rotating key, ensuring there is no single point of failure in case the key might get leaked.
The increased overhead may cause performance issues if there's many users (2/2).
The increased overhead may cause performance issues if there's many users (2/2).
June 26, 2025 at 12:59 PM
To increase complexity, instead of using a single key to store encrypted image data. Used MultiFernet to assign each Chat a rotating key, ensuring there is no single point of failure in case the key might get leaked.
The increased overhead may cause performance issues if there's many users (2/2).
The increased overhead may cause performance issues if there's many users (2/2).
When adding indexing for the chat system image storage I realized how accessible the images can be. I Included Fernet AES-CBC encryption for secure image storage as a utils command to ensure only authorized Group Chat/DM participants can view the images (1/2)
June 26, 2025 at 12:54 PM
When adding indexing for the chat system image storage I realized how accessible the images can be. I Included Fernet AES-CBC encryption for secure image storage as a utils command to ensure only authorized Group Chat/DM participants can view the images (1/2)
Updated the backend model, serializers, apis and views to support MessageImages (Messages with Image attachments) including the frontend to preview and edit images.
I was unable to get the message to send with images and text, It instead returns an axios error - bad request.
I was unable to get the message to send with images and text, It instead returns an axios error - bad request.
June 18, 2025 at 1:58 PM
Updated the backend model, serializers, apis and views to support MessageImages (Messages with Image attachments) including the frontend to preview and edit images.
I was unable to get the message to send with images and text, It instead returns an axios error - bad request.
I was unable to get the message to send with images and text, It instead returns an axios error - bad request.
I had issues identifying a logged in user. I Wanted to compare the users and group participant ids
Planning to make a profile page for users to update their work details and profile pictures whilst getting an all-in-one summary of their files, conversations, task scheduling and meetings.
Example:
Planning to make a profile page for users to update their work details and profile pictures whilst getting an all-in-one summary of their files, conversations, task scheduling and meetings.
Example:
June 16, 2025 at 2:06 PM
I had issues identifying a logged in user. I Wanted to compare the users and group participant ids
Planning to make a profile page for users to update their work details and profile pictures whilst getting an all-in-one summary of their files, conversations, task scheduling and meetings.
Example:
Planning to make a profile page for users to update their work details and profile pictures whilst getting an all-in-one summary of their files, conversations, task scheduling and meetings.
Example:
Got the test data from my backend to work in my frontend. Able to send messages but the sample data from faker is too gibberish and has the same image of a guy mogging me.
I'll try to create some profile image variation with Django's media files assigned to each user at random (1/2).
I'll try to create some profile image variation with Django's media files assigned to each user at random (1/2).
June 16, 2025 at 2:00 PM
Got the test data from my backend to work in my frontend. Able to send messages but the sample data from faker is too gibberish and has the same image of a guy mogging me.
I'll try to create some profile image variation with Django's media files assigned to each user at random (1/2).
I'll try to create some profile image variation with Django's media files assigned to each user at random (1/2).
I could have made the search filtering system more efficient since they all share the same functionality, except they're split into 3 categories. Perhaps a filter selection to only filter 'friends', 'group chats', or 'users' would make this function more appropriate.
Unsure which approach is best.
Unsure which approach is best.
June 8, 2025 at 2:04 PM
I could have made the search filtering system more efficient since they all share the same functionality, except they're split into 3 categories. Perhaps a filter selection to only filter 'friends', 'group chats', or 'users' would make this function more appropriate.
Unsure which approach is best.
Unsure which approach is best.
Made 2 Modal components for creating a Group Chat or DM and for search filtering users, friends, and conversations. Planning to extend the modal by adding a direct message and add friend functionality once the Django backend API is complete.
June 8, 2025 at 1:59 PM
Made 2 Modal components for creating a Group Chat or DM and for search filtering users, friends, and conversations. Planning to extend the modal by adding a direct message and add friend functionality once the Django backend API is complete.
Sorry for the Web dev text spam, I'm just transferring my web dev journal from Twitter to Bluesky, hence the inconsistencies in the post timestamps.
Its been a while since I've consistency completed my journaling. Have been procrastinating and dreading moving each of my post over here until now.
Its been a while since I've consistency completed my journaling. Have been procrastinating and dreading moving each of my post over here until now.
June 4, 2025 at 8:20 PM
Sorry for the Web dev text spam, I'm just transferring my web dev journal from Twitter to Bluesky, hence the inconsistencies in the post timestamps.
Its been a while since I've consistency completed my journaling. Have been procrastinating and dreading moving each of my post over here until now.
Its been a while since I've consistency completed my journaling. Have been procrastinating and dreading moving each of my post over here until now.
Feb 8, 2025
I studied the django REST framework tutorial to advance my API implementation for improved usage User and Snippet Serializers. I wanted to convert Django models into JSON so react can parse table information that is easy to display and readable (e.g, flight time objects)
I studied the django REST framework tutorial to advance my API implementation for improved usage User and Snippet Serializers. I wanted to convert Django models into JSON so react can parse table information that is easy to display and readable (e.g, flight time objects)
June 4, 2025 at 8:17 PM
Feb 8, 2025
I studied the django REST framework tutorial to advance my API implementation for improved usage User and Snippet Serializers. I wanted to convert Django models into JSON so react can parse table information that is easy to display and readable (e.g, flight time objects)
I studied the django REST framework tutorial to advance my API implementation for improved usage User and Snippet Serializers. I wanted to convert Django models into JSON so react can parse table information that is easy to display and readable (e.g, flight time objects)
Feb 2, 2025 (2/2)
For my workplace communication software I wanted to ensure the task section was interchangeable:
Example: Users can freely edit due dates, tags, attachments, descriptions, titles and participants. Unfortunately this added too much complexity to the app.
For my workplace communication software I wanted to ensure the task section was interchangeable:
Example: Users can freely edit due dates, tags, attachments, descriptions, titles and participants. Unfortunately this added too much complexity to the app.
June 4, 2025 at 8:17 PM
Feb 2, 2025 (2/2)
For my workplace communication software I wanted to ensure the task section was interchangeable:
Example: Users can freely edit due dates, tags, attachments, descriptions, titles and participants. Unfortunately this added too much complexity to the app.
For my workplace communication software I wanted to ensure the task section was interchangeable:
Example: Users can freely edit due dates, tags, attachments, descriptions, titles and participants. Unfortunately this added too much complexity to the app.
Feb 2, 2025 (1/2)
I created tables for Task, Column, Task Comments and Task attachments.
Additionally, I included a TaskSerializer to convert Query sets into JSON data that can be parsed through the API. I'm using a ModelSerializer so manually naming fields isn't necessary.
I created tables for Task, Column, Task Comments and Task attachments.
Additionally, I included a TaskSerializer to convert Query sets into JSON data that can be parsed through the API. I'm using a ModelSerializer so manually naming fields isn't necessary.
June 4, 2025 at 8:16 PM
Feb 2, 2025 (1/2)
I created tables for Task, Column, Task Comments and Task attachments.
Additionally, I included a TaskSerializer to convert Query sets into JSON data that can be parsed through the API. I'm using a ModelSerializer so manually naming fields isn't necessary.
I created tables for Task, Column, Task Comments and Task attachments.
Additionally, I included a TaskSerializer to convert Query sets into JSON data that can be parsed through the API. I'm using a ModelSerializer so manually naming fields isn't necessary.
Oct 9, 2024 (2/2)
I'll ensure the display are separate between 'Group Info' and 'User Profile' interchangeably and may include an upgrade popup at the bottom right to make up for the white space.
Having issues with web responsiveness/scalability on tablets. May do a redesign for it.
I'll ensure the display are separate between 'Group Info' and 'User Profile' interchangeably and may include an upgrade popup at the bottom right to make up for the white space.
Having issues with web responsiveness/scalability on tablets. May do a redesign for it.
June 4, 2025 at 8:16 PM
Oct 9, 2024 (2/2)
I'll ensure the display are separate between 'Group Info' and 'User Profile' interchangeably and may include an upgrade popup at the bottom right to make up for the white space.
Having issues with web responsiveness/scalability on tablets. May do a redesign for it.
I'll ensure the display are separate between 'Group Info' and 'User Profile' interchangeably and may include an upgrade popup at the bottom right to make up for the white space.
Having issues with web responsiveness/scalability on tablets. May do a redesign for it.
Oct 9, 2024 (1/2)
Completed the desktop + mobile frontend chat page prototype for business communication website 'Chorus'; some slight adjustments to the Figma design, specifically the 'User Profile' and 'Group Chat' panels on the right section of the page as it will not fit. Made placeholder chats
Completed the desktop + mobile frontend chat page prototype for business communication website 'Chorus'; some slight adjustments to the Figma design, specifically the 'User Profile' and 'Group Chat' panels on the right section of the page as it will not fit. Made placeholder chats
June 4, 2025 at 8:15 PM
Oct 9, 2024 (1/2)
Completed the desktop + mobile frontend chat page prototype for business communication website 'Chorus'; some slight adjustments to the Figma design, specifically the 'User Profile' and 'Group Chat' panels on the right section of the page as it will not fit. Made placeholder chats
Completed the desktop + mobile frontend chat page prototype for business communication website 'Chorus'; some slight adjustments to the Figma design, specifically the 'User Profile' and 'Group Chat' panels on the right section of the page as it will not fit. Made placeholder chats
Oct 7, 2024 (2/2)
I'm still figuring out how I want the images to be compressed, saved and presented on a image/document displayer.
I'm still figuring out how I want the images to be compressed, saved and presented on a image/document displayer.
June 4, 2025 at 8:14 PM
Oct 7, 2024 (2/2)
I'm still figuring out how I want the images to be compressed, saved and presented on a image/document displayer.
I'm still figuring out how I want the images to be compressed, saved and presented on a image/document displayer.
Oct 7, 2024 (1/2)
Created the desktop + mobile layout for the file management system in Figma. I wanted to make sure all information is presented in a readable and simplistic format
The image icon placeholders will have actual images instead. Name changed to 'Chorus', Color = Teal.
Created the desktop + mobile layout for the file management system in Figma. I wanted to make sure all information is presented in a readable and simplistic format
The image icon placeholders will have actual images instead. Name changed to 'Chorus', Color = Teal.
June 4, 2025 at 8:14 PM
Oct 7, 2024 (1/2)
Created the desktop + mobile layout for the file management system in Figma. I wanted to make sure all information is presented in a readable and simplistic format
The image icon placeholders will have actual images instead. Name changed to 'Chorus', Color = Teal.
Created the desktop + mobile layout for the file management system in Figma. I wanted to make sure all information is presented in a readable and simplistic format
The image icon placeholders will have actual images instead. Name changed to 'Chorus', Color = Teal.
Oct 4, 2024
Created the Desktop + Mobile Tasks page mockup for the business communication website.
Might include a timeline and adjust the display layout for list/flowchart layout. I removed the idea for notes page as tasks already fulfils it (Can be a feature in dashboard?).
Created the Desktop + Mobile Tasks page mockup for the business communication website.
Might include a timeline and adjust the display layout for list/flowchart layout. I removed the idea for notes page as tasks already fulfils it (Can be a feature in dashboard?).
June 4, 2025 at 8:13 PM
Oct 4, 2024
Created the Desktop + Mobile Tasks page mockup for the business communication website.
Might include a timeline and adjust the display layout for list/flowchart layout. I removed the idea for notes page as tasks already fulfils it (Can be a feature in dashboard?).
Created the Desktop + Mobile Tasks page mockup for the business communication website.
Might include a timeline and adjust the display layout for list/flowchart layout. I removed the idea for notes page as tasks already fulfils it (Can be a feature in dashboard?).
Oct 3, 2024
Added prototype Desktop + Mobile pages for Calendar and Meeting Pages.
Currently not too satisfied with participants section and bottom-row user participants display of the meeting page.
I'm planning to include another set of designs to introduce dark mode.
Added prototype Desktop + Mobile pages for Calendar and Meeting Pages.
Currently not too satisfied with participants section and bottom-row user participants display of the meeting page.
I'm planning to include another set of designs to introduce dark mode.
June 4, 2025 at 8:13 PM
Oct 3, 2024
Added prototype Desktop + Mobile pages for Calendar and Meeting Pages.
Currently not too satisfied with participants section and bottom-row user participants display of the meeting page.
I'm planning to include another set of designs to introduce dark mode.
Added prototype Desktop + Mobile pages for Calendar and Meeting Pages.
Currently not too satisfied with participants section and bottom-row user participants display of the meeting page.
I'm planning to include another set of designs to introduce dark mode.
Oct 1, 2024
Planning to make business collaboration and communication website with embedded CRM features. I intend to learn more about state management and WebSockets using Socket IO or other WebSocket APIs to establish connections.
Made progress on Figma for chat dashboard section.
Planning to make business collaboration and communication website with embedded CRM features. I intend to learn more about state management and WebSockets using Socket IO or other WebSocket APIs to establish connections.
Made progress on Figma for chat dashboard section.
June 4, 2025 at 8:12 PM
Oct 1, 2024
Planning to make business collaboration and communication website with embedded CRM features. I intend to learn more about state management and WebSockets using Socket IO or other WebSocket APIs to establish connections.
Made progress on Figma for chat dashboard section.
Planning to make business collaboration and communication website with embedded CRM features. I intend to learn more about state management and WebSockets using Socket IO or other WebSocket APIs to establish connections.
Made progress on Figma for chat dashboard section.
Sep 28,
I Implemented useReducer research from react documentation, allowing for better state management and proper debugging & validation testing.
Example: I used a reducer for creating, editing and deleting list items for an Itinerary. Also used in chatroom.
I Implemented useReducer research from react documentation, allowing for better state management and proper debugging & validation testing.
Example: I used a reducer for creating, editing and deleting list items for an Itinerary. Also used in chatroom.
June 4, 2025 at 8:12 PM
Sep 28,
I Implemented useReducer research from react documentation, allowing for better state management and proper debugging & validation testing.
Example: I used a reducer for creating, editing and deleting list items for an Itinerary. Also used in chatroom.
I Implemented useReducer research from react documentation, allowing for better state management and proper debugging & validation testing.
Example: I used a reducer for creating, editing and deleting list items for an Itinerary. Also used in chatroom.
Sep 27, 2024
By sharing the functionality of use states from children to parent, each child component is no longer independent (now collective).
Using onShow and isActive properties combined, I understood how to show dropdowns referencing the index, like an accordion.
By sharing the functionality of use states from children to parent, each child component is no longer independent (now collective).
Using onShow and isActive properties combined, I understood how to show dropdowns referencing the index, like an accordion.
June 4, 2025 at 8:11 PM
Sep 27, 2024
By sharing the functionality of use states from children to parent, each child component is no longer independent (now collective).
Using onShow and isActive properties combined, I understood how to show dropdowns referencing the index, like an accordion.
By sharing the functionality of use states from children to parent, each child component is no longer independent (now collective).
Using onShow and isActive properties combined, I understood how to show dropdowns referencing the index, like an accordion.
Sep 27, 2024
I studied sharing between, preserving, and resetting
react states.
Through react documentation I constructed, tested an accordion that initially had separate states, then merged into a collective state by moving the states and functionality to the parent node.
I studied sharing between, preserving, and resetting
react states.
Through react documentation I constructed, tested an accordion that initially had separate states, then merged into a collective state by moving the states and functionality to the parent node.
June 4, 2025 at 8:11 PM
Sep 27, 2024
I studied sharing between, preserving, and resetting
react states.
Through react documentation I constructed, tested an accordion that initially had separate states, then merged into a collective state by moving the states and functionality to the parent node.
I studied sharing between, preserving, and resetting
react states.
Through react documentation I constructed, tested an accordion that initially had separate states, then merged into a collective state by moving the states and functionality to the parent node.
Sep 26, 2024
Took a break to setup my new computer and install the necessary software applications and import files from my old device.
Took a break to setup my new computer and install the necessary software applications and import files from my old device.
June 4, 2025 at 8:10 PM
Sep 26, 2024
Took a break to setup my new computer and install the necessary software applications and import files from my old device.
Took a break to setup my new computer and install the necessary software applications and import files from my old device.
Sep 20, 2024
Explored React Documentation to practice and revise updating Arrays and Objects in State. I researched and noted how React snapshot state functioned including best practices for handling array data (e.g., creating and settings copies of original arrays to ensure it is immutable).
Explored React Documentation to practice and revise updating Arrays and Objects in State. I researched and noted how React snapshot state functioned including best practices for handling array data (e.g., creating and settings copies of original arrays to ensure it is immutable).
June 4, 2025 at 8:04 PM
Sep 20, 2024
Explored React Documentation to practice and revise updating Arrays and Objects in State. I researched and noted how React snapshot state functioned including best practices for handling array data (e.g., creating and settings copies of original arrays to ensure it is immutable).
Explored React Documentation to practice and revise updating Arrays and Objects in State. I researched and noted how React snapshot state functioned including best practices for handling array data (e.g., creating and settings copies of original arrays to ensure it is immutable).
Sep 6, 2024
Created a Tic Tac Toe game by following React Step-by-Step Documentation.
I wanted to refresh my complete understanding about react useStates, useEffect, and props before increasing the complexity of the full stack implementation of the flights booking website.
Created a Tic Tac Toe game by following React Step-by-Step Documentation.
I wanted to refresh my complete understanding about react useStates, useEffect, and props before increasing the complexity of the full stack implementation of the flights booking website.
June 4, 2025 at 8:03 PM
Sep 6, 2024
Created a Tic Tac Toe game by following React Step-by-Step Documentation.
I wanted to refresh my complete understanding about react useStates, useEffect, and props before increasing the complexity of the full stack implementation of the flights booking website.
Created a Tic Tac Toe game by following React Step-by-Step Documentation.
I wanted to refresh my complete understanding about react useStates, useEffect, and props before increasing the complexity of the full stack implementation of the flights booking website.