Next.Js Example

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

March 15th, 2023

Fullstack blog made with Next.js, tRPC, Prisma, Next Auth, tailwind-css, Zod & more.'s picture

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

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)

Technologies Used:

README.md:

Share this:

Nedx ยฉ 2023