MacIdeas
- 15 Devlogs
- 48 Total hours
MacIdeas is a simple and easy to use productivity tool with a ton of features to manage your tasks, create notes, and keep track of your work!
Rich text editing for notes!
- Added a complete, feature-rich, and easy to use rich text editor for creating and editing your notes! This means you can now actually take notes with features like text formatting, links, headings, lists, inline components, and a lot of other features you would expect from tools like Google Docs
- There is a top tool bar with a ton of options, buttons, and dropdowns organized into different functional sections (I definitely did not just copy GDocs
) to format/edit/modify your current content selection easily - Most of the features support keyboard shortcuts (because of Tiptap), which you can see by hovering over the option and reading its tooltip
- I tried making my own web based rich text editor from scratch before, and it turned out to be a nightmare of dom manipulation and other headaches, so this time I decided to just use the library Tiptap, which itself is based on the library ProseMirror, to handle this pain in the butt
- Since Tiptap is completely headless, I still spent a lot of time going through its docs, installing useful extensions, learning their commands, and building, testing, and tweaking all the features to make everything work smoothly
- I don’t know why I’ve been neglecting actually adding notes for so long (before each note was just a blank page saying “Untitled note” that you couldn’t even edit
), but this actually turned out to be super fun to implement and the result was very rewarding - Note saving doesn’t actually work yet (despite the fake “Note saved” autosave message
) since there are still some things about the editor to fix, but hopefully that’ll be implemented soon and MacIdeas will be almost ready to ship! - The text editor also works with light mode, and I also updated some styling to improve the UI
Light mode toggle
- The mode option in the nav user menu now toggles the site’s entire appearance between dark and light mode to improve its customizability and accessibility
- Because every component has a default color transition, switching between the 2 modes has a smooth UI transition instead of flashing to the other color instantly
- I had to set up the theme provider and manually add the light mode Tailwind classes and the dark mode prefix for all the colors in every page and component, as well as accounting for
allmost of the display color edge cases, so this took quite a long time but the result was worth it, both modes look pretty consistent and visually appealing
- I am finally back to developing MacIdeas after taking a one month break, so I spent some time familiarizing myself with the codebase again. Hopefully this time I’ll be able to finish and ship it soon!
- Updated styling and layout
- Added and updated some dependencies
Project page and contents
- Added a dedicated page for each project that is its own file browser where you can open/interact with the contents, view their information and metadata, and search, filter, and sort through them so you can better manage and view your projects
- Added an option on the project page that opens a modal displaying all your folders, task lists, tasks, and notes grouped into 4 different tabs. Each item is a checkbox so you can select exactly which items to add to or remove from the project
- You can also search through each tab’s results and see their names and icons to make finding the right item quick and easy
- This seemed like a simple feature to implement but getting
to cooperate was a nightmare since each item has its own data type, so organizing the data structure for both the frontend and backend required a lot of annoying unions and conditionals - There is now a top bar in the project browser with the name, type, modified, and created labels which you can click on to sort the contents accordingly
- Each item also shows its type and modified & created times, as well as an icon where you can change the item’s emoji directly, making browsing and managing your stuff more convenient
- You can also edit the project’s name and description directly by clicking on the page title and text
- Updated styling and layout
- I procrastinated on this devlog for 2 days and got no work done, so I think this might be a sign for me to take a break from Stardance for a few days since I also need to work on hosting 8-Bit Jam (awesome game jam, if you live near nova plz go register
) and other stuff, so there won’t be new devlogs in a while
Project browser
- Added a project browser/file explorer to the project dashboard where you can search, view, and open projects and folders to browse their content !
- I decided to build this file explorer instead of just a simple dashboard because I got bored and wanted to make something different, and it would make more sense to do this for projects since they are essentially just folders
- This file explorer is pretty similar to Google Drive and other cloud storage services, you can double click a project or folder to change directory and view its content (tasks, task lists, notes, other folders), and go back/navigate to other levels with navigation breadcrumbs
- I thought this would be difficult to implement and would need some kind of breadcrumb library and it turned out to be pretty simple
- Only projects are styled and can be opened right now, but folders and other stuff will be added in the next update!
- Added a menu option for adding task/note folders to projects. It opens a modal where you can view and select all the projects you’re adding the folder to, and it’ll show up in the project explorer
- Updated styling and content
Note and project management
- Added more note management features for editing, deleting, starring, and moving notes, as well as a dashboard for the notes page (similar to the one for tasks)
- You can now move notes in/out of different folders by selecting the move option and choosing the folder in the modal popup menu. You can also edit which notes are in a folder by clicking on its edit option, where you can check all the notes you want in a folder
- Added a top tool bar to each note page (similar to the tool bar for task lists) with the note’s emoji (clicking it opens the emoji menu where you can choose or clear the icon), name (clicking on it renamed the note), description (clicking on it also makes it editable), and current folder information displayed
- The tool bar also has options to upload a custom background image with an upload modal (similar to task lists), choose a custom theme (not implemented yet), star/unstar, or delete after confirming
- Added a sidebar for the projects page where you can create, manage, view, add icon, rename, star/unstar, and delete your projects (basically the same as the notes and tasks sidebar)
- Since many of the features are basically identical or very similar to tasks/task lists, I just used the existing components and copied and modified some stuff, so all these features were pretty easy and quick to implement
- Added recent, starred, and organized by tag sections to the notes dashboard so you can view and manage your notes more easily. You can also customize the dashboard by selecting the sections in the settings panel
- Updated schema and types
- Updated styling and layout
- Fixed background shadow overlay and a few other display/styling issues
Notes and custom backgrounds
- I coded for 5 hours yesterday and made a lot of progress but completely forgot to devlog , so this devlog will be a bit longer (as if my usual devlogs aren’t already long enough) to hopefully keep my storytelling good 🥺
- Added the notes tab, which is the second major part of MacIdeas (the other being tasks and projects) that shares a basically identical layout with tasks, so I only had to copy a few components, modify some variables, imports, and database operations, and add new schema models and server actions to make note management work properly, though it still took quite a bit of time
- Currently only the sidebar is implemented for notes (instead of the actual note taking/editing part), but you can create new notes, rename them, choose their custom emojis, delete them, create and manage folders, and create notes inside folders from there
- You can also navigate to each note by clicking on it, but the page is blank for now. Notes share folders with tasks, so folders you make in notes also show up in tasks, and vice versa, although the specific tasks/notes in the folder aren’t displayed on the notes/tasks tab to keep organization simple (hopefully I didn’t phrase this too confusingly , maybe I’ll add an option to show both in settings)
- Also added projects (the third major part of MacIdeas), which are basically labels/folders that you can put tasks, task lists, folders, and notes in to conveniently keep everything related to a big project in one place
- Right now you can only create projects through the create project button on the sidebar and can’t do anything else with them, since I’ll only start working on projects after I finish notes
- Added buttons where you can upload a custom background image or select a color theme (not implemented yet) for each individual task list to make customization even better and personalized!
- When you click on the custom background option, an upload modal appears where you can upload a png/jpg/webp <4MB to be the background!
- I originally tried using uploadthing since it was the only object storage service I worked with, but I just couldn’t get the event hooks to load or work at all despite copying stuff from my old project and wasting an hour researching , so I decided to settle with Vercel Blobs (because it’s already hosted on Vercel) and it’s actually so much faster and easier to set up/integrate
- Some of the components are opaque, so they look kind of weird with a custom background, so I’ll be fixing that soon, but for the most part custom backgrounds actually look decent somehow
- Task lists without a custom background have a black overlay shadow that’s out of place, so that has to fixed too
- Also added a bunch of random small quality of life features and adjustments that I don’t remember without looking at my commits
- Updated schema and types
- Updated styling
Dashboard customization and My Day
- Added settings for customizing your personal tasks page dashboard, where you can select which tasks to show and which task filter sections to display on your main tasks page to make it completely customized
- You can access the settings modal by clicking on the gear icon on the top right of the tasks page, where you can select the checkboxes that you want to show on the page. You can reset the settings defaults as well by clicking on the reset option and confirming
- Dashboard tasks now also show their priority and tags
- All your homepage settings and customization are automatically saved to the account backend so the settings are synced across all your devices
- Added the “My Day” page that shows all your tasks that either start or due today (in your local timezone, refreshes daily automatically), or you can add custom tasks for the day here without putting it in any task list to help plan out your day better
- My Day is essentially a special task list and you can do all the stuff you can do with normal tasks and task lists (browsing, sorting, managing, etc.), and it shows up as its own tab on the left sidebar. I thought this would be hard to implement architecturally, but I just had to add a few fields and conditionals to make it work properly
- Added the tags dashboard section where you can view all the tasks with a certain tag
- Updated the data fetching logic for the dashboard to be more efficient, optimized, and customized according to the settings
- Updated schema and constants
- Updated styling
- Updated README
- Fixed a few visual bugs
Dashboard and Subtasks
- Added a few interactive widgets to the task dashboard showing tasks grouped in different categories so you can browse all your tasks quickly and easily
- The different task widgets, each with a different icon, are starred, priority, upcoming, starting soon, recent, and tag tasks. The widgets basically act like filters for all your tasks across all task lists so you don’t need to manually dig through them to find what you’re looking for
- You can now add subtasks to your tasks! Subtasks are basically just very simple tasks without any of the fancy features (since that would be annoying to implement and it’s just pretty impractical) that are just smaller steps broken down from the main task
- You can add, view, and manage (completing, renaming, or deleting) each task’s subtasks sorted by completion status in the task details panel, and you can see each task’s subtasks directly displayed below the main task
- You can also mark subtasks as completed by clicking on the circle on the task item, and the text will be striked through and grayed out
- Added a home/task dashboard link to the left sidebar
- Updated schema and types
- Updated styling and layout
- Updated README with more detailed info and specific features
Priority and folders!
- You can now assign an importance priority flag for each task to better keep track of your most important todos and manage/view them more easily with this feature !
- You can change the priority of a task by clicking on one of the 4 options in the priority dropdown that appears when you hover over the task. Each priority has a different color (none-transparent, low-green, medium-yellow, high-red) to help distinct them visually. If a task has a priority, the status is permanently stickied on the task so it’s always visible
- You can sort and filter tasks by priority as well to automatically group and view your most important tasks
- You can customize the new task’s priority by changing the new task input field’s priority dropdown menu. You can also edit a task’s priority in the task details panel
- You can now create custom folders to group and organize your task lists by clicking on the create folder option on the task sidebar
! - Clicking on the folder toggles the visibility of its task list content, and hovering over it shows an options icon that opens a menu where you can edit, rename, change the folder icon color, or delete the folder
- The edit option opens a modal where you can search and select the task lists to add or remove from the folder
- The rename option turns the folder name into an input that saves on blur, the color option shows a color picker for the icon color, and the delete option deletes the folder and its task lists after confirmation
- You can also directly create new task lists inside a folder by clicking on the add option on the folder. You can move task lists in/out of folders as well by clicking on the move option, which opens a similar modal where you can search and select which folder to move the task to
- Drag and drop for moving task lists in/out of folders isn’t implemented yet, because it’s actually quite a challenging thing to do (for me) , but hopefully I’ll have time to try to implement it
- Updated schema and types
- Updated UI components and styling
- Fixed display overflow height styling issues
Due dates and more random features
- You can now add due dates and start dates to tasks to better keep track of them and remind yourself when to stop procrastinating and actually get to work !
- When you click on the calendar icon on a task, a modal shows up with 2 fields where you can pick the precise date and time for when the task starts/dues. I used the kind of outdated library Flatpickr for this since I was too lazy to build my own calendar time picker thing
- You can also clear/remove the selected time by clicking on the x icon next to the date field. Save the changes by clicking on the save button
- You can edit/select the times by clicking on the date fields in the task details panel as well. Start and due dates show up as a small text below the main task on the page so you can easily see when each task is due
- Added options to sort tasks by due and start dates so you can see which tasks are coming up soon! Also added a separate section in the filter dropdown for filtering by your own tags to better organize and view your different tasks
- The pen edit/rename option on the task list is now finally implemented! Clicking on it turns the task text into an input field that you can edit, and the new name is saved when you click away from it
- The tag, calendar, and star icons on the task input field now do something for the new task! Similar to task items, the tag and calendar options both open a modal for you to select the options for the new task, and the star icon marks it as starred. This makes it a lot easier to customize the task before actually adding it to the list
- Updated schema and types
- Updated styling and UI components
- Fixed a legacy dependency (Emoji Mart is unmaintained ) compatibility issue that caused a few previous commits to fail in production build
- Not gonna lie I’m pretty proud of the UI and layout all the different options and components actually sort of make MacIdeas look like a legit app
- There seems to be an issue with Firefox screenshots that fails to capture the modal’s background blur for the screenshot so it’s kinda weird
Tags and emojis
- Added task tags that you can customize and assign to different task items to better categorize and organize them! You’ll be able to group/sort by tags in the future as well, making browsing and managing tasks even more convenient
- When you click on the tag icon while hovering over a task item, the tag modal appears listing all the tags you created, a search bar for the tasks, as well as options to create new tags and save your selection
- Each tag on the modal is a checkbox, meaning you can simply check/uncheck the tags to assign them to the task
- Clicking on the create option displays an input where you can add a new tag that gets added to the revalidated menu
- Each tag also has an icon that opens a menu of options to rename, select an emoji, pick a color, and delete the tag. The rename option turns the tag into an input that you can edit, the emoji option opens the emoji picker (you can clear an existing emoji as well) so you can choose a custom icon for the tag, the color option opens a color picker where you can edit the tag’s background, and the delete option deletes the tag after confirmation
- There’s an option on the modal to clear all the currently assigned tags from the task item as well
- Up to 3 tags are displayed for each task on the task list page, and you can view all the tags a task has in the details panel (where you can open the tag modal and edit the tags too)
- You can now also choose an emoji for each task list by either clicking on the sidebar icon or the top bar icon! It opens an emoji picker with an option to clear the existing emoji as well
- Updated schema and types
- Updated styling and layout
- Fixed display height issue
- Fixed legacy dependency deployment issue
Browse & complete tasks
- You can now browse and filter through tasks to view and manage them more easily with the new sorting and filtering options! You can also finally mark tasks as completed once you finish them
- On the task list page tool bar, there’s a search bar that searched through tasks by their name and description, dropdown menus for sorting (by name, created, updated, due date, etc., some aren’t implemented yet), filtering (by starred, completion status, etc.), and ascending/descending display order to help you find and browse tasks more easily !
- There’s also a checkbox that toggles the visibility of completed tasks, since they are hidden by default to avoid cluttering the page
- You can mark a task as completed by either clicking/checking the circle icon on each task item or selecting the completed checkbox on the task details page
- Incomplete and completed tasks are each grouped together regardless of sorting order to avoid confusion
- Completed tasks are striked through and grayed out to help with distinction. You can remark them as incomplete again any time by clicking on the icon again
- Fixed an annoying container height overflow display layout issue (implementing responsive design on this will be a pain in the butt )
- Updated styling and layout
- I accidentally closed the window while recording the video so I had to rewrite this entire devlog again from memory , Stardance team please make a save devlog button like with Flavortown 🥺
Task creation & management
- You can now actually add, view, and manage your tasks in MacIdeas! You can add tasks, view details, edit, star, and delete them by clicking on the task item icons
- When you add a task, a task item gets added to the task list page, which when hovered shows icons/buttons to edit, manage tags, change due date, star, or delete the task. There’s also a circle on the left where you can mark the task as completed (none of these buttons work yet other than star and delete )
- Clicking on the task item itself opens an animated panel on the side (similar to a lot of todo apps and the Slack profile panel) with input and textarea fields for editing the task and its description, as well as checkboxes to mark/unmark the task as completed or starred
- The task item details panel also shows the task’s precise created and updated timestamps, as well as its ID in the backend database (for debugging purposes)
- You can save the changes in the details panel by clicking on the save button, which updates and revalidates the task automatically. You can also delete the task item by clicking on the delete button and confirming the warning modal
- You can close the details panel by clicking on the same task item again or by clicking on the close button
- If a task item is starred, the star icon shows even when you’re not hovering over the task item. You’ll be able to filter and group task items by stars in the future as well
- Updated the task list page layout to give more space to the main section and make sure everything’s aligned and positioned nicely without any display/styling issues
- Added new UI components
- Updated styling
- Fixed a few styling and UX issues
- Updated database schema
Task list management
-
Added more task list management features so you can organize and view
your tasks more efficiently! -
Added a top tool bar on task list pages where you can rename the task
list by clicking on the name, add a description, mark/unmark it as
starred, and delete it -
When you click on delete, a confirmation warning modal shows up asking you to confirm
-
You can also star/unstar a task list by clicking on the star icon on the left sidebar or in the options menu
-
Starred task lists show up in a different section at the top of the sidebar to make accessing them easier and quicker
-
Added a dropdown button that shows an additional menu for creating
folders and projects (not implemented yet) next to the create task list
button -
Added a pick emoji button for each task list on the sidebar that, of
course, still doesn’t work yet -
Added the new task input field on the task page with a few placeholder
buttons and a submit button. This where you’ll be able to add tasks,
but nothing works so far -
Added a message screen that shows up when all the tasks are completed/there are no tasks
-
Added dynamically generated SEO metadata for task list pages to make the site more accessible and responsive
-
Updated schema and types
-
Updated styling and layout
MacIdeas: productivity & work management tool
- I’m starting a new project in the MacWeb collection of online apps and platforms called MacIdeas, which is basically Notion (task, note, and project management) but significantly more inferior
- Hopefully this project will turn out to be pretty complex so I can
milkinvest more hours on making and polishing this app - In this pretty big initial update, I set up the Next.js project, installed its required dependencies, added a few basic pages and layouts, added a lot of UI components, and added task list management
- Spent quite some time configuring auth and the account system backend again since MacIdeas is hosted on a subdomain of the main macweb.app root domain which handles auth and accounts, so it was annoying setting up CORS, subdomain cookies, and user schemas (I’m not even sure if it works in production yet )
- Added a nav bar and footer that were just copied from other MacWeb apps so they look consistent and updated a few links
- Added placeholder homepage layout and sections with images and text that don’t mean anything yet
- Added the main tasks page layout with a left sidebar listing all your task lists (folders and other organization stuff coming soon) and the main page displaying your actual tasks and information
- You can create new task lists by clicking on the create task list button on the sidebar, which creates and redirects you to the new task list that’s automatically titled “Untitled List”
- When you hover over a task list on the sidebar, an options icon appears that shows a menu of list management options, including rename, star (not implemented), and delete
- When you click on rename, the task list becomes an input where you can input the new name, and clicking out of it saves and revalidates the data
- When you click on delete, a confirmation warning modal appears, and the app will be redirected and revalidated after you confirm and delete the task list
- Once you’re signed in, your profile icon will be displayed on the nav bar and clicking on it lets you view your profile on the main domain, toggle light/dark modes (coming soon), and sign out (does this even work ?)
- Added static SEO for a few pages to improve accessibility and the site’s metadata
- Added the MacIdeas logo as the favicon and site icon
- Added Prisma schema and types
- Configured DNS and deployment stuff
- Fixed deployment issue
