- Clone the repo
- Run
npm install - Run
json-server --watch db.json --port 3001 - Run
npm run dev
Client-side routing with React Router
- At least 4 routes: / (home), /folders, /tags, /settings
- 2 routes with URL parameters: /folders/[id], /tags/[id]
- Nested routes: Using Next.js app router with (routes) directory
- Active links with unique styling: Navigation component shows active state
AJAX requests for each type
- GET: Fetching linkPreview, bookmarks, tags, folders
- POST: Creating new bookmarks, tags, folders
- PATCH: Updating bookmarks, tags, folders
- DELETE: Deleting bookmarks, tags, folders
API Resources and Relationships
- 7 API Resources (/api/bookmarks, /api/tags, /api/folders, /api/collections, /api/wipe-db, /api/folders/[id], /api/tags/[id], /api/collections/[id], /api/bookmarks/[id])
- 3 Relationships (bookmarks -> tags, bookmarks -> folders, bookmarks -> collections)
Form Elements
- Input: Link/Tag/Folder creation field
- Textarea: Summary field in LinkItem component
- Select menu: Folder selection in BookmarkForm
- Radio buttons: Settings page for wiping data
- Checkbox: Tag selection in BookmarkForm
Custom Form Validation
- Component state validation: LinkField component
- Error messages: Shown below invalid fields
- Form submission prevention: Invalid forms can't be submitted
- Unique error messages: Different messages for different validation failures
Reusable Component
- ListItem component used in multiple places: (Tags list, Folders list)
- LinkItem component used in multiple places: (Bookmark list, tags/[id], folders/[id])
- Configurable props: icon, color, title, subtitle, etc.
Document Title
- Unique titles for different pages
Display Notifications
- Display notifications using Sonner (similar to React Toastify, just prettier and easier to implement)
Since it's a bookmarking app, "Build a bookmarks / favorites system from scratch for some resource in your application. A user should be able to add and remove a particular resource from their bookmarks / favorites section. When you display the resource in the bookmarks / favorites section, display information about the resource and the date/time of when the item was bookmarked / favorited." is completed
11 tests, all passing.
- Things not covered in class:
- nextjs & app router (and NextRequest, the new params, etc)
- testing with typescript (had to get jest scripts from stackoverflow)
- sonner notifications (had to get sonner from npm, made the choice to use it instead of react toastify)
- typescript & type interfaces & etc