The Mooovie DB - coded by filecc
Live Site available at here
To run the project locally simply, git clone and
npm i
npm run dev -- --host
As part of Boolean Academy journey, I was asked to manipulate and use The Movie DB's API, to create some sort of "Netflix/Movie Database".
- Live Site URL: Live Site
- Mobile-first workflow
- SASS
- Bootstrap - CSS Framework
- Vue3 - JS Framework
- Vue Router - Powerfull Routing
- Pinia - Amazing
storetool
I managed, finally, to completely work with Vue Router, to get users go through many pages on the same site, with no other HTML page then the index.html.
const routes = [
{ path: '/', component: () => import('../views/Home.vue')},
{ path: '/404', component: () => import('../views/NotFound.vue') },
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: () => import('../views/NotFound.vue') },
{ path: '/search',component: () => import('../views/Search.vue')},
{ path: '/movie/:name', component: () => import('../views/SingleItemDisplayDetail.vue') },
{ path: '/series/:name', component: () => import('../views/SingleItemDisplayDetail.vue') },
{ path: '/tv/:name', component: () => import('../views/SingleItemDisplayDetail.vue') },
{ path: '/actors/:name', component: () => import('../views/SingleActor.vue') },
];
const router = createRouter({
history: createWebHistory(),
routes
})Thanks so much to ColorThief, for this wonderful piece of code that just change a color, but makes the APP just... amazing.
const r = colorThief.getColor(img)[0];
const g = colorThief.getColor(img)[1];
const b = colorThief.getColor(img)[2];And thanks to Mohamed Ashraf, for his amazing work and sharing. 
If you have something to say just head up at Instagram or Twitter.