04-11-24

Planning §

• Arrange meeting with Kabir and prepare a few options for him
• Finish off the Plastic Labs Bloom chat with website feature
• Take an hour to go through everything we’ve done so far and write some notes and retrospective about it.
• Make some quick notes on what I need to do to update the meditation tracker agent
• Update art.mahlen.xyz to use CloudFront so I avoid AWS out-of-region data transfer charges. This may require updating the imgURL keys in the database.

1. Go to AWS CloudFront console
2. Click "Create Distribution"
3. For "Origin Domain", select your S3 bucket
4. For "Origin Access": Choose "Origin Access Control settings (recommended)"
   - Click "Create control setting" and accept defaults
   - This creates a secure way for CloudFront to access your bucket

5. Default cache behavior settings:
   - Viewer Protocol Policy: "Redirect HTTP to HTTPS"
   - Cache Policy: Use "CachingOptimized" (default)
   - Price Class: Choose "Use only North America and Europe" to save costs

6. Click "Create Distribution"
   -----
After creation, you'll need to:

Update your S3 bucket policy with the provided CloudFront policy
Replace your S3 URLs with CloudFront URLs:

Old: https://your-bucket.s3.ap-southeast-2.amazonaws.com/image.jpg
New: https://xxx.cloudfront.net/image.jpg

Action Items §

Task Manager Project w/ Global State Project §

Summary: §

Create a task management application using Zustand. The app should support a standard set of task features and themes, as well as customizable themes. All state should be managed globally, there should be no state management inside of any components.

Concepts §

React Component Development Global State Management with Zustand Theming and Customization

Thinking Out Loud §

• The state of tasks needs to be stored globally

• The needs to be an array of tasks

• Tasks have props

• Tasks have 4 functions that can be performed on them: create, delete, updateTask, updateStatus

• There are 4 statuses: Pending, In-Progress, Completed, Archive

• Each status takes up a column in the kanban

• Whatever is stored in tasks array get’s mapped and rendered in a column as a card

• Each card has basically the same component that allows for (title, description, status)

• Clicking the card should render a subview that is a different component that allows further editing/details

• Components: TaskCard, TaskDetails

Pull Requests §

Bootcamp §

1. Initialised and setup the project: https://github.com/fractal-bootcamp/malin.task-manager/pull/1
2. Created global state store: https://github.com/fractal-bootcamp/malin.task-manager/pull/2
3. Render columns based on state: https://github.com/fractal-bootcamp/malin.task-manager/pull/3
4. Add byStatus prop to TaskList for task filtering and introduce new UI components and styling: https://github.com/fractal-bootcamp/malin.task-manager/pull/4
5. Significant Updated to Layout and Styling: https://github.com/fractal-bootcamp/malin.task-manager/pull/5
6. Add drag-and-drop functionality to task management using @hello-pangea/dnd: https://github.com/fractal-bootcamp/malin.task-manager/pull/6

Externship §

1. Change dynamic routing to use r/[…] instead of /[…] : https://github.com/kmankan/tutor-gpt/pull/14
2. Remove url input field: https://github.com/kmankan/tutor-gpt/pull/15
3. Update useEffect functionality: https://github.com/kmankan/tutor-gpt/pull/16
4. Create new conversation window on context-addition (without creating duplicate conversations): https://github.com/kmankan/tutor-gpt/pull/17

EOD Status Report §

Blockers:

• Took me a long time to figure out why duplicate conversations were being generated in my chat-with-website feature… the answer was that I was trying to do too much in a single UseEffect hook. When I took it apart and separated out different components… it worked exactly as it should. Note-To-Self: reduce complexity.
• I was stuck on the externship feature for a long time today and almost gave up. But eventually figured it out after I had to explain my own code to one of their engineers. But I was working on this for most of the day so didn’t really start on the bootcamp project until late in the afternoon.

Learning:

• If you keep breaking down the complexity in your code, you will eventually figure out where things are going wrong.
• Console log the fuck out of everything to pinpoint where shit’s breaking.
• Initial impressions of Zustand is that it’s very nice and opens up a lot of possibility for cleaner neater code

Wins:

• Finished the externship feature!!
• Managed to get a decent task management app built this evening that i’m looking forward to fleshing out
• Got drag-n-drop functionality working on the tasks using @hello-pangea/dnd which I thought would be way harder than it was.