TV Shows dashboard with listings by genres and ratings. Find the TV Show you want to know more about.
Download Node.js at https://nodejs.org/en/download/ (latest version - contains npm)
Here you can see the tech stack used to develop this project
- HTML5
- Sass
- ECMAScript 6 (ES6)
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
TV shows API: http://www.tvmaze.com/api
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
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
npm run serve
npm run build
npm run test:unit
npm run lint
Component naming convention: Vue official 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
This project was developed by Dawntraoz.