Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tuanh00/podcast-landing-page

The landing page serves as a central hub for my podcast series, showcasing each episode with embedded audio players, detailed descriptions, and source links. Demo Link: https://tuanh-podcast.vercel.app/
https://github.com/tuanh00/podcast-landing-page

desktop-application eslint framer-motion fully-responsive nodejs react reacticons reactrouterdom typescript vercel-deployment vite

Last synced: 5 days ago
JSON representation

The landing page serves as a central hub for my podcast series, showcasing each episode with embedded audio players, detailed descriptions, and source links. Demo Link: https://tuanh-podcast.vercel.app/

Awesome Lists containing this project

README 

        
# My Podcast Landing Page



This repository contains a self-produced podcast landing page built using Vite, React, and styled with Emotion and Framer Motion. The website showcases my podcast content with an interactive and responsive design, deployed on Vercel.



## 📝 Description



My Podcast Landing Page is a dynamic and engaging website designed to present my self-produced podcast content. The landing page provides listeners with easy access to episodes, descriptions, and interactive elements that enhance user experience.



This project uses:

- **React** for building interactive UI components.

- **Vite** as a fast build tool for modern web development.

- **Emotion Styled Components** for writing CSS-in-JS, allowing for dynamic styling.

- **Framer Motion** for animations and transitions to create smooth interactions.

- **React-Icons** for incorporating icons to improve visual appeal.

- **React Router DOM** for client-side routing and navigation.



You can view the live demo of the project here:  

🔗 [Live Demo](https://tuanh-podcast.vercel.app/)



## 🚀 Deployment



Deployed on **Vercel** on **24th November 2024**.



## 💻 Installation



To get this project up and running:



1. **Clone the repository or download the zip file.**

2. **Open the folder in Visual Studio Code** or your preferred IDE. 

3. **Open a new terminal** in your IDE.

4. Run `'npm i' ` to install all dependencies. Wait for the installation to complete.

5. Run `'npm run dev'` to start the development server.

6. Open the local development server URL (e.g., `'http://localhost:5173/'`) in your browser to view the project.



Once you see the local port running, open it in your browser to view the project.



## 📋 Requirements



To run this project locally, ensure that Node.js is installed. My current project uses:



- **Node.js** version: `18.16.1`

- **Vite** version: `5.4.10`



You can check and install Node.js from [here](https://nodejs.org/en/download).



## 📦 Dependencies



- **@emotion/styled**: For writing CSS-in-JS styling within components.

- **Framer Motion**: For adding animations and smooth transitions.

- **React**: Core library for building the user interface.

- **React DOM**: For DOM-specific methods.

- **React Icons**: To display a wide range of icons.

- **React Router DOM**: For client-side routing and navigation.



## 🛠 Dev Dependencies



- **@eslint/js**: ESLint configuration for JavaScript.

- **@types/react & @types/react-dom**: TypeScript type definitions for React.

- **@vitejs/plugin-react**: Vite plugin for React support.

- **ESLint**: Linter for identifying and reporting on patterns in JavaScript.

- **TypeScript**: For static typing in JavaScript.

- **Vite**: Build tool and development server.



## 🎨 Features



- **Responsive Design**: Optimized for all screen sizes, from mobile devices to desktops.

- **Interactive Animations**: Utilizes Framer Motion for smooth animations and transitions.

- **Dynamic Styling**: Uses Emotion for styling components with CSS-in-JS.

- **Fast Load Times**: Thanks to Vite’s optimized build process.

- **Self-Produced Podcast Content**: Showcases personally created podcast episodes.