Vidport is mini project from Dibimbing and movie database website. This project create by using ReactJS, Bootstrap, and TMDBAPI.
- Login Page
- Home Page
- TV Show Page
- Movie Page
- Movie and TV Show Card View
- Detail of Movie and TV Show
- Search Movie and TV Show
In this project, there are several libraries used which consist of:
- Type
npm install axioson your terminal to installing axios. - Once the package installed, you can import the library using:
import axios from 'axios';- Type
npm install formik yupon your terminal. - Once the package installed, you can import the library using:
import { useFormik } from 'formik';
import * as Yup from 'yup';- Type
npm install react-bootstrapon your terminal. - Once the package installed, you can import the library using:
import { Modal, ... } from 'react-bootstrap';- Import library using CDN in the
index.htmlfile in the repository:
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous"
/>
</head>
<body>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous">
</script>
</body>- Type
npm install react-router-domon your terminal. - Once the package installed, you can import library in the
index.jsfile:
import ReactDOM from "react-dom/client";- Type
npm install dotenvon your terminal. - Once the package installed, you can create
webpack.config.jsfile. Then you can open the file an type:
const Dotenv = require('dotenv-webpack');
module.exports = {
plugins: [
new Dotenv()
]
}- In the directiory, type
npm installon your terminal to adding node module. - You can type
npm installto run the app. - The app will be running on http://localhost:3000.