abdelhakimmhioulabdelhakimmhioul
9

Cinefun

screenshot of Cinefun
svelte
tailwind
daisyui

Feeling excited to try the new SvelteKit JS framework with TailwindCSS v3.

GithubDemo

Overview:

CinefunVideo Presentation is a video presentation theme that focuses on creating an engaging and visually appealing interface for showcasing movies, actors, and TV shows. The theme offers a range of features including a customizable navbar, a dark mode switch, dynamic pages for movies and TV shows, infinite scrolling, and more.

Features:

  • Design Navbar: The theme offers a sleek navbar with options for adding a logo, search functionality, and social media links.
  • Design Sidebar with Dark Mode Switch: Users can easily toggle between light and dark mode using the sidebar.
  • Design Movies/Actors/TVShows Pages: The theme provides separate pages for showcasing movies, actors, and TV shows with an aesthetically pleasing design.
  • Design Movie/Actor/TVShow Detail Pages: Each individual movie, actor, and TV show has its own dedicated detail page with relevant information and visuals.
  • Design MovieCard: The theme includes a MovieCard component that displays the movie's poster, title, rating, and genres in an attractive layout.
  • Design ActorCard: An ActorCard component showcases an actor's name and their associated movies, providing a visually appealing way to browse through actors.
  • Design Genre Specific Pages: The theme offers genre-specific pages, allowing users to explore movies and TV shows based on their preferred genres.
  • Dynamize The TVShows Page & Details of It: The TVShows page and its respective detail pages are dynamic, providing a seamless browsing experience.
  • When There is no Image, Render Default Image: In cases where there is no associated image available, a default image is rendered to maintain visual consistency.
  • Infinite Scrolling in Actors & TVShows: The Actors and TVShows pages have implemented infinite scrolling functionality, enabling users to effortlessly browse through a large number of actors and TV shows.
  • Add Custom 404: A custom 404 page is included, providing a user-friendly way to handle errors and guide users back to relevant pages.
  • Dynamize Acting Section in Actor Page: The Acting section in the Actor page is dynamically updated to display the actor's associated movies.
  • Refactor & Isolate Typescript from SvelteKit: The theme has undergone a refactoring process to isolate TypeScript from SvelteKit, ensuring a clean and maintainable codebase.
  • Search Functionality: Users can search for movies, actors, and TV shows using the search bar, enhancing the usability of the theme.
  • Design Dropdown: A dropdown component is designed to provide a user-friendly interface for additional options or navigation.
  • Dynamize It: The theme includes dynamic elements and features that enhance user interaction and provide real-time updates.
  • Fix the Dark/Light Switch Bug: Any previously existing bugs related to the dark/light mode switch have been fixed, ensuring a smooth user experience.
  • Show Trailer: Movie detail pages include a trailer component that allows users to watch the trailer of the selected movie.
  • Implement Movie Credits Section in Movie Page: The Movie page includes a credits section that displays the cast and crew members associated with the movie.
  • Implement Responsiveness: The theme is designed to be responsive, adapting to different screen sizes and devices.
  • Add Genres Page: A dedicated page for genres is included, allowing users to explore movies and TV shows based on specific genres.

Summary:

CinefunVideo Presentation is a feature-rich video presentation theme that offers a visually appealing and engaging interface for showcasing movies, actors, and TV shows. With its customizable navbar, dark mode switch, dynamic pages, infinite scrolling, and other impressive features, the theme provides an immersive user experience. The installation process is simple, making it easy to set up and start exploring the theme's functionalities.

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

daisyui
daisyUI

daisyUI adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.