Video Player

Objective

The objective of this project was to showcase my expertise in web development, particularly in React.js, TypeScript, and UI/UX design principles. I successfully built a functional web application—a simplified Video Player. This application empowers users to browse through a curated collection of video thumbnails, providing an interactive experience. By clicking on a thumbnail, users can seamlessly play the corresponding video and access essential information, including the title and description. This project not only demonstrates my technical proficiency in key web development technologies but also highlights my commitment to creating a user-friendly interface with a focus on a seamless and enjoyable user experience.

Video Presentation

"https://drive.google.com/file/d/18v0MI57HsEskkjBYyCzy5lAnAeVnq0fR/view?usp=sharing"

Deployed Link

"https://hypergo-anurag0x.vercel.app/"

Features

I designed and developed a robust web application, integrating a plethora of features to enhance user engagement and usability:

Predefined Video Thumbnails: Users can browse through a curated collection of video thumbnails, offering a preview of available content.

Interactive Thumbnail Click: Upon clicking a thumbnail, users seamlessly initiate video playback, ensuring an immersive viewing experience.

Video Information Display: Each video thumbnail is accompanied by essential details such as title and description, allowing users to gain insights into the content before viewing.

Pagination for API Integration: Leveraging pagination, the application efficiently fetches videos from an external API, ensuring smooth and streamlined content delivery.

State Management: The application implements robust state management techniques to handle the video list and maintain the currently selected or playing video, guaranteeing a seamless user experience.

Engagement Features: Users can interact with videos by expressing their preferences through likes, dislikes, and comments, fostering community engagement and feedback.

Responsive Design: The application boasts a responsive design that adapts seamlessly to various screen sizes and devices, ensuring optimal user experience across desktops, tablets, and mobile phones.

Skeleton Loading: Employing responsive skeleton loading techniques, the application offers users a visually appealing and informative loading experience, maintaining user engagement during data retrieval processes.

By incorporating these features, the application not only showcases my proficiency in web development technologies like React.js, TypeScript, and state management but also underscores my commitment to delivering a user-centric and engaging user interface.

Technologies Used

• React JS
• Typescript
• Tailwind CSS
• Redux (for state management)
• HTML5 Video Player for video playback
• Modular / Atomic components for code organization

Dependencies

• @reduxjs/toolkit - ^2.2.1
• react - ^18.2.0
• react-dom - ^18.2.0
• react-icons - ^5.0.1
• react-redux - ^9.1.0
• react-router-dom - ^6.22.2
• react-toastify - ^10.0.4
• redux - ^5.0.1
• redux-thunk - ^3.1.0

Dev Dependencies

• @types/react - ^18.2.56
• @types/react-dom - ^18.2.19
• @typescript-eslint/eslint-plugin - ^7.0.2
• @typescript-eslint/parser - ^7.0.2
• @vitejs/plugin-react - ^4.2.1
• autoprefixer - ^10.4.18
• eslint - ^8.56.0
• eslint-plugin-react-hooks - ^4.6.0
• eslint-plugin-react-refresh - ^0.4.5
• postcss - ^8.4.35
• tailwindcss - ^3.4.1
• typescript - ^5.2.2
• vite - ^5.1.4

Setup Instructions

1. Clone the repository.
2. Install dependencies using npm install.
3. Start the development server using npm run dev.
4. Open the application in your web browser.