NextJs App
tRPC, NextAuth, WebSocket, Redux Store, Push Notification
NextJs Theme Provider toggle between light and dark mode. More themes can be added for custom color themes
Verifying Authentication...
Error Management...
Intentional Error Component
Custom Authentication Form
This authentication method uses a client side for so custom validation can be done. It then uses the NextAuth API to authenticate the user. This method does not refresh the page.
This method could also be made static (see here for static form example) but extra precaution is required like CSRF token and a honeypot trap.
Validating Authentication...
Redux Store Demo
State management application wide using redux.
Redux Store Values
No notes.
tRPC Example Client Side
Protected Query Section
Please sign in to view this data.
Public Query Section
Value: Loading...
Mutation Section
Value: No Value
tRPC Client Examples (Post Router)
This tRPC route reads and writes from database
Public Query: `post.hash`
Hash: Loading...
* Query is run only when input stops for 500ms.
* Current Input: World | Debounced Value: World
Protected Data: Creation & Latest Post
Sign in to create and view latest posts.
🤫 Protected Query: `post.getSecretMessage`
Sign in to reveal the secret message.
Push Notifications
Web Socket Demo
This websocket example uses a secure wss over https connection to a cloudflare worker to establish websocket functionality.
Establishing WebSocket connection...