https://github.com/apfirebolt/vue3-episodite-show
An application to see details of all your favourite shows in Vue 3 using Tailwind CSS and API from Episode.com
https://github.com/apfirebolt/vue3-episodite-show
api-integration episodate-api tailwindcss vue vue-tailwind-template vue-tailwindcss vue3
Last synced: 2 months ago
JSON representation
An application to see details of all your favourite shows in Vue 3 using Tailwind CSS and API from Episode.com
- Host: GitHub
- URL: https://github.com/apfirebolt/vue3-episodite-show
- Owner: Apfirebolt
- Created: 2023-10-06T13:44:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-24T23:53:32.000Z (3 months ago)
- Last Synced: 2025-02-25T00:29:54.245Z (3 months ago)
- Topics: api-integration, episodate-api, tailwindcss, vue, vue-tailwind-template, vue-tailwindcss, vue3
- Language: Vue
- Homepage:
- Size: 1.93 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Episodite
This is a simple web application in Vue 3 which makes use of API from Episodate.com to display TV shows related data. This app can be used to search for TV shows and see the details of the show.
[Episodate API](https://www.episodate.com/api)
I was searching for open APIs which provide limited number of requests for free with useful data. I stumbled across this and thought of turning this into a Vue 3 mini-project. This project also uses dynamic components from Headless UI and is completely responsive ie mobile friendly.
Pinia store is added with some dummy test store variables.
## Technologies Used
- Vue 3
- Tailwind CSS
- Vite
- Headless UI (For dynamic components)
## Features
- Users can search for a TV show.
- Users can view details and episodes of a TV show.
- Users can see list of most popular TV shows updated from the Episodate.com API.
- Uses custom colors in Tailwind CSS with the following configuration.
```
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
primary: '#1D3557',
danger: '#E63946',
secondary: {
100: '#F1FAEE',
200: '#A8DADC',
300: '#457B9D',
},
}
},
},
plugins: [],
}
```
## Screenshots
This shows the homepage, you can search shows and view the most popular shows on the homepage.
The second screenshot shows the detail page of a show. This displays the number of seasons, episodes and more related to a given TV show.
## Recommended IDE Setup
I used VS Code with recommended plugins for Vue 3 app development.
## Issues/Improvements
Code organisation, adding toast messages and better error handling for Http requests on the client side.