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)