zsrobinson/remix-todo

Demo Remix App using Prisma ORM

Remix Todo Demo

A demo of using Remix loaders and actions in a simple todo app to learn more about Prisma ORM.

Run this project locally

Since I don't want to host a public database and deal with authentication and all of that for a simple demo project, you'll have to run it locally to see it in action. Thankfully, it's not that many steps:

git clone https://github.com/zsrobinson/remix-todo.git
cd remix-todo
npm install
npx prisma db push
npm run dev

remix-todo's Issues

Create Different Lists

Allow for the user to create multiple lists to differentiate their todo items. Lists should be displayed in the sidebar with a New List button at the bottom, as shown below.

Multiple Submissions on New List Form

While the user is waiting for a new list to be created, they might end up clicking the submit button a few times since there is no loading UI as of now. This shouldn't be a problem if the button was properly disabled after submission, but it's not. Multiple submissions are already prevented when adding a new todo item, so it shouldn't be too hard to reimplement that logic.

Light Mode Support

Some people prefer to have their eyes blinded by their computer screens, and that's okay. Light/dark mode preferences could be stored in session storage (or something to that effect), or it could just follow the prefers-color-scheme thing from the user's OS. For simplicity, I'm leaning toward the latter.

It would also be cool if the favicon changed based on the user's preferred color scheme, something I haven't attempted before. An example of this can be shown below from GitHub.

Sidebar Breaks When Lists Overflow

Not sure how well the screenshot shows this (and ignore the test list names¹), but in the case that there are more lists than vertical real estate, the sidebar doesn't look quite right. This should hopefully just need an overflow property or something along those lines so that the list of lists will just scroll when there are too many.

Footnotes

1. you can see how there are multiple of the same list name because of #7 ↩

Create Favicon and Title

Currently, the favicon and title are just the default from create-remix. Instead, it would be best for the favicon to include the square rounded check icon from Tabler Icons (or its filled variant) and for the title to say the name of the app and the current list (ex. Remix Todo · Shopping List).

No Default List

After initializing the database, there are no default lists. So when /list tries to redirect to the first list in the database, it just throws an error. Instead, a default list should be created if there are no lists in the database.

Edit Existing Todo Item

Currently, the only way to edit a todo item is to delete it and create a new one, which isn't a great experience. Instead, it would be nice to show an edit and delete button when hovering over an item. The UI for editing an item could be similar to creating a new one, with a text input in place of where the title of an item would normally be.