Doot Notes
Doot Notes was created as I wanted to try SvelteKit as a framework for building a full-stack, server-rendered application. It's nothing special, just a simple note-taking app that allows users to create, read, update, and delete notes. Due to the simple nature of the application, a simple note app, I wanted to add a robust feature set to really test the framework. It's a work in progress with a low priority on my things to finish, but I'm happy with how it's tracking and incredibly impressed with SvelteKit as a full-stack framework.
The app is built using SvelteKit, Typescript and plain old CSS. The features I've currently implemented are user authentication, user search, CRUD operations on notes, and a user profile page. The user profile page gives users the ability to change their username and password, with email verification for all sensitive account operations. They have the ability to view all sessions currently open as well as log out of all sessions bar the current one. Lastly the user can download all data associated with their account as well as delete the account entirely.
Tech Stack
- ○SvelteKit
- ○Typescript
- ○Prisma
- ○Web Standards Authentication
- ○Resend
- ○Melt UI
- ○Vitest & Testing Library
- ○MSW
- ○zod
- ○sveltekit-superforms
- ○SQLite
- ○LiteFS
- ○Cloudflare S2
- ○fly.io
Purpose and Goals
The purpose of this project was really just to have fun playing around with a new full-stack framework. I've spent my career honing my skills in React (having tried out Remix which I love) and thought I'd try out something new and different. Given the rave reviews people have for SvelteKit I decided this was the one.
There are still so many more things I want to try and implement in a solo project like this, but having recently brought a baby girl into this world, time is rather short. Some things up next are Role-Based Access Control, caching, end-to-end testing, error monitoring. Most of all I'm just looking forward to jazzing everything up with animations and transitions to make a fun experience for the user.
The last goal for this website was to have it be fully operational without JavaSript. The idea of progressive enhancement is something that jives with me, being able to have my web app work for the widest array of users possible, and doing it using with the standard web technologies.
These blocks give a fun sense of play to the splash screen and are interactive. Check them out here, or check out the code here
This is the main area of the application where users can view notes by a user. If they are the owner of the notes, they are given CRUD capabilites Check it out here, or check out the code here
The profile page, where users can change their username, email or password. Enable 2FA, view sessions across browsers and more. Check it out here (you won't be able to view this one unless you've created an account and are logged in), or check out the code here
Challenges & Lessons Learned/Learning
One of the goals I mentioned was to keep the site fully accessible to users without JS. Doing this with SvelteKit wasn't hard at all, as it's very intuitive to SSR pages (it works much like Remix which I'm familiar with, using loaders and actions). The challenge came with making sure everything was accounted for, with Forms being properly handled with validation and error messages. Making sure I wasn't sending anything sensitive back to the client.
The other challenge was around SvelteKit's less mature ecosystem (compared to React) and finding third party tools to help me out. It wasn't crazy difficult, but there were quirks and bits and bobs I needed to get the hang of. I used a Form validation library Superforms, which is fantastic, but when it came to handling images, the only solution for validation was to perform a client side fetch call to send the data instead of a native web form submission.
Road Map
- Upload Videos to Note
- Loading UI for form submissions
- Write Tests
- Animations
- Are presigned URLs best for video viewing?
- Bug: rate limiter error
- Implement Memory Management in
- Fix focus for file input in <ImageEditor />
- Create Proper Logo
- Create a Typography Component
- Fix flickering on `Searchbar`
- Create Staging Environment
- Create Icon Button (Melt UI?)
- Double Check Rate Limiting
- Create Auth Form component for styling and Permeate
- Finish Settings ~ Connections
- Bring in Timings
- Learn about caching and timing
- Fix Epic Notes login terms and agreements checkbox on sign-up
- Go through all flows to add comments for learning/revision
- Have a crack at the popover API, potentially with the
- a11y pass
- Check for authentication (2fa) on login and other sensitive actions
- Avatar Menu
- Get ESLint Rules Working
- Add Caching Server
- SSO
