Fullstack blog made with Next.js, tRPC, Prisma, Next Auth, tailwind-css, Zod & more.
March 15th, 2023

About:
T3 Blog
Deployed to Vercel on https://t3-blog-pi.vercel.app/
This is a fullstack blog application made with the T3 Stack.
Aditionally, I used AWS S3 Buckets for file uploads, with presigned urls for securely accessing the stored files, ensuring they are safe and private.
Features
- Login with Google, Github or discord, or with a Magic link to your e-mail.
- Create & edit posts.
- Tag your posts.
- Upload files to your posts as attachments: You can upload videos, images, audio or documents (.pdf, .msword, etc.)
- Every file uploaded can be interacted - You can listen to the audios using a custom-built audio-player, watch the videos, download any of the files, etc.)
- Like or dislike posts.
- Comment on posts.
- Use Markdown to write your posts & comments.
- Reply to comments on posts (Infinitely nested comment replies like reddit)
- Favorite posts and browse through all your favorited posts.
- Follow users and be followed by other users, see their and your followers/following.
- See a personalized "Following" timeline with posts from your following.
- Search posts & tags with full-text search.
- Access yours or other users' profiles and see their posts.
- Search for posts using different filters and by their tags.
- Search engine optimizations through meta-tags, server-side-rendering and semantic HTML.
The stack
- Next.js
- Prisma for type-safe communication with the database.
- tRPC for a type-safe API & data-fetching.
- Next Auth for authorization. - Also using the Prisma Adapter to store session info in my DB.
- Tailwind CSS for styling & Headless UI for unstyled primitives to use with Tailwind.
- AWS S3 for storing file uploads: This is done with presigned urls, which guarantees the files uploaded are safe and private.
- Zod for validations.
- React Hook Form for forms.
- Keen Slider for a carousel component.
- React Markdown for reading markdown text & react-markdown-editor-lite for a very quick and performant MD editor.
- Next Themes for easy dark mode support.
- auto-animate - automatic animations, React Icons - icons, React Toastify - toasts, React popper for a custom popover component, React dropzone for a dropzone component.
Improving the user experience
- I used TanStack Query (formerly React Query) to implement optimistic updates, allowing the UI to update without having to wait for a backend response, making for a blazing fast experience. - You can like/dislike posts and see the feedback immediately, or edit a post and see the changes applied instantaneously.
- Implemented infinite scrolling on multiple screens with TanStack Query's useInfiniteQuery, tRPC and the Intersection Observer API.
- I used Lodash debounce to debounce search results and improve the search input performance while keeping a good UX. (Typing and automatically receiving results)