AstroTube

A simple Server Side Rendered YouTube clone for showcasing Astro 3 View Transitions. Built with Astro, Svelte, Tailwind.

View Transitions update the page content without the browser's normal, full-page navigation refresh and provide seamless animations between pages. It is powered by the new View Transitions browser API. For best experience make sure you're using a supported browser, although Astro provides smart fallbacks for unsupported browsers.

Supported browsers(as of 18-09-2023)

Live Demo

Live Demo of the project is available here.

Preview

Trending feed(dark mode):

Channel Page(light mode):

Run locally

1. Clone this repository

git clone https://github.com/sandeepdotcode/youtube-view-transition.git

2. Go to the project directory

cd youtube-view-transitions

3. Install dependencies

If you have pnpm

pnpm install && pnpm dev

for npm,

rm pnpm-lock.yaml
npm install && npm run dev

What I learned

By doing this project, I learned:

• Astro Islands architecture
• Using external libraries like React and Svelte within Astro
• Astro Server Side Rendering(SSR) and Static Site Generation(SSG)
• Integrating a REST API to an Astro SSR site
• Using View Transitions API using Astro for page transitions in Multi Page Sites
• Controlling script behaviour in Astro
• Using advanced tailwind features like group and peer selectors
• Undoing changes after last git commit, making new changes and replacing old commit already pushed to GitHub