www.suyashsingh.in

Posted by Suyash Singh

on July 13, 2024

Next.jsNextraReactHLS

Highlights

1. This website has been built with Next.js utilizing my React expertise. I wanted to create a space where I could maintain my blog, share videos of my music recordings, post photos from my travels, and showcase my projects.

2. I use MDX to write my blog posts which are server-side rendered (SSR) and cached by Cloudflare, ensuring the website loads quickly and efficiently for users. The videos are delivered using HLS (HTTP Live Streaming), providing smooth streaming experiences.

3. For a few subdomains, I use OAuth along with Traefik to keep access secure. This setup ensures that sensitive areas of the site are protected.

4. To make the video and photo grids efficient, I use TanStack Virtual. This tool optimizes the rendering of large lists by only rendering the visible items, improving performance by virtualization.

5. I have a robust Continuous Delivery pipeline set up using Docker images and a self-hosted Docker Registry. This pipeline automates the deployment process, ensuring that updates are smoothly and consistently rolled out.

6. Routing and TLS certificates are managed with Traefik. Traefik, in combination with Cloudflare, automatically handles TLS certificates for all subdomains.

7. For animations on this website, I use framer-motion, which provides smooth and interactive animations, enhancing the user experience.

8. To avoid redeployment to fix typos or for new posts, I use a few python scripts for my custom CMS solution.

9. To generate lower-quality videos for HLS to ensure better playback experiences, I use custom Python scripts to automate the entire workflow. Additionally, these scripts also handle the processing of photos.

10. All the images used for the blog posts are from Unsplash, and the diagrams are built using mermaid and excalidraw.

Tech Stack

• React
• Next.js
• Traefik
• Cloudflare
• HLS
• React Query
• Python
• Virtualization
• OAuth2.0
• Docker
• framer-motion