Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dawntraoz/tv-shows-spa
TV Shows dashboard with listings by genres and ratings. Find the TV Show you want to know more about.
https://github.com/dawntraoz/tv-shows-spa
axios jest pwa sass vue vuetify vuex
Last synced: 3 months ago
JSON representation
TV Shows dashboard with listings by genres and ratings. Find the TV Show you want to know more about.
- Host: GitHub
- URL: https://github.com/dawntraoz/tv-shows-spa
- Owner: Dawntraoz
- License: mit
- Created: 2020-05-22T17:46:49.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-13T22:40:18.000Z (about 2 years ago)
- Last Synced: 2024-05-01T16:25:53.998Z (10 months ago)
- Topics: axios, jest, pwa, sass, vue, vuetify, vuex
- Language: JavaScript
- Homepage: https://tv-shows-spa.herokuapp.com/
- Size: 1.99 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TV Shows SPA
TV Shows dashboard with listings by genres and ratings. Find the TV Show you want to know more about.
[Demo TV Shows SPA](https://tv-shows-spa.herokuapp.com/)
- [Prerequisites](#prerequisites)
- [Technologies](#technologies)
- [Setup](#setup)
- [Guidelines](#guidelines)
- [Author](#author)
- [License](#license)
## Prerequisites
Download Node.js at https://nodejs.org/en/download/ (latest version - contains npm)
## Technologies
Here you can see the tech stack used to develop this project
### Main stack
- HTML5
- Sass
- ECMAScript 6 (ES6)
### Vue
After working with other frameworks such as Backbone.js and Angular 6, I've chosen VueJS because it's a framework that leads you to improve the structure of your code, it has a community that makes it better every day and because of the flexibility it has when changing the theme of the project.
Below I show you the packages I developed the application with:
- Vue cli (v4.3.1)
- HTTP client: Axios
- Unit testing: Jest
- Routes management: VueRouter
- Store management: Vuex (v3.4.0)
- Components design: Vuetify
- Preprocessor: Sass (dart-sass)
- Code formatters: ES-Linter + Prettier
- Added PWA
### Api
TV shows API: http://www.tvmaze.com/api
#### Endpoints
Shows listing: http://api.tvmaze.com/shows
Show detail: http://api.tvmaze.com/shows/:id and http://api.tvmaze.com/shows/:id/images
Search shows: http://api.tvmaze.com/search/shows?q=:query
## Setup
First clone the repository:
```
git clone https://github.com/Dawntraoz/tv-shows-spa.git
```
To install dependencies and start working on the project run:
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Run unit tests
```
npm run test:unit
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
## Guidelines
Component naming convention: [Vue official style guide](https://vuejs.org/v2/style-guide)
- Multi-word component names
- PascalCase filenames
- Base Global components as BaseLoader
- Single instance component name as TheHeader and TheSearch
- Child components have as a prefix the parent component name (i.e. Shows)
- Prop names in camelCase
## Author
This project was developed by [Dawntraoz](https://github.com/Dawntraoz).
## License
[The MIT License (MIT)](https://github.com/Dawntraoz/tv-shows-spa/blob/master/LICENSE)