Skip to content

A movies app which displays movie information from this movie API. It is written in Sveltekit using Typescript and Tailwind CSS. Intended to be used as a boilerplate for my future Svelte apps ๐Ÿš€

License

Notifications You must be signed in to change notification settings

Apfirebolt/svelte-kit-movies

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

9 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Svelte Kite Movies

SvelteKit TailwindCSS TypeScript

Cover

About the Project

Svelte Kit Movies is a web application built with SvelteKit, TailwindCSS, and TypeScript. It allows users to search for movies and view detailed information about them. The project leverages modern web technologies to provide a fast, responsive, and user-friendly experience.

For movies data it uses the following API which is also created by me https://softgenie.org/api/movies

Screenshots

Please find some of the screenshots of the application below.

Screenshot 1 Screenshot 2

SSR - When to render on client and when on server?

server-side rendering (SSR), consider the following:

  • Render on the server when the data is dynamic, sensitive, or needs to be indexed by search engines. For example, fetching movie details from an API that requires authentication or ensuring SEO for movie pages.
  • Render on the client when the data is user-specific, frequently updated, or doesn't need to be indexed. For example, displaying a user's watchlist or handling client-side interactions like filtering and sorting movies.

Here, on the movie details page, the whole content is being loaded on server and meta tags are being populated through the dynamic data.

By balancing SSR and client-side rendering, you can optimize performance and user experience.

Features

  • Search for movies by title.
  • View detailed information about movies, including release date, rating, and synopsis.
  • Responsive design for seamless use on desktop and mobile devices.

Technologies Used

  • SvelteKit: A modern framework for building fast and scalable web applications.
  • TailwindCSS: A utility-first CSS framework for styling.
  • TypeScript: A strongly typed programming language for better code quality and maintainability.

Getting Started

To run the project locally, follow these steps:

  1. Clone the repository:
    git clone https://github.com/apfirebolt/svelte-kit-movies.git
  2. Navigate to the project directory:
    cd svelte-kit-movies
  3. Install dependencies:
    npm install
  4. Start the development server:
    npm run dev
  5. Open your browser and navigate to http://localhost:8080.

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

About

A movies app which displays movie information from this movie API. It is written in Sveltekit using Typescript and Tailwind CSS. Intended to be used as a boilerplate for my future Svelte apps ๐Ÿš€

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published