filecc / vite-boolflix

A remake of a movie/series's database

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

Table of contents

• Overview
  • The Project
  • Links
• My process
  • Built with
  • What I learned
• Request and Hint
• Author

The Project

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".

Links

• Live Site URL: Live Site

My process

Built with

• Mobile-first workflow
• SASS
• Bootstrap - CSS Framework
• Vue3 - JS Framework
• Vue Router - Powerfull Routing
• Pinia - Amazing store tool

What I learned

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.

Request and Hint

If you have something to say just head up at Instagram or Twitter. ☺️

Author

• Website - filecc
• Instagram - Instagram
• Frontend Mentor - @filecc
• Twitter - @_filecc