Skip to content

Commit

Permalink
replaced bundler with vite, migrated axios api calls to RTK query
Browse files Browse the repository at this point in the history
  • Loading branch information
endo_aki committed Nov 3, 2022
1 parent 61d68f4 commit abfb94e
Showing 57 changed files with 2,313 additions and 10,034 deletions.
3 changes: 3 additions & 0 deletions .env
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@

VITE_APP_API_ENDPOINT_URL=https://api.themoviedb.org/3
VITE_APP_TMDB_V3_API_KEY=95629eb7ba23a5a0b835569f1abd79f3
4 changes: 2 additions & 2 deletions .env.example
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
REACT_APP_API_ENDPOINT_URL=https://api.themoviedb.org/3
REACT_APP_TMDB_V3_API_KEY=
VITE_APP_API_ENDPOINT_URL=https://api.themoviedb.org/3
VITE_APP_TMDB_V3_API_KEY=
4 changes: 2 additions & 2 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -5,8 +5,8 @@ COPY ./yarn.lock .
RUN yarn install
COPY . .
ARG TMDB_V3_API_KEY
ENV REACT_APP_TMDB_V3_API_KEY=${TMDB_V3_API_KEY}
ENV REACT_APP_API_ENDPOINT_URL="https://api.themoviedb.org/3"
ENV VITE_APP_TMDB_V3_API_KEY=${TMDB_V3_API_KEY}
ENV VITE_APP_API_ENDPOINT_URL="https://api.themoviedb.org/3"
RUN yarn build

FROM nginx:latest
13 changes: 7 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -50,7 +50,7 @@
- Create an account if you don't have on [TMDB](https://www.themoviedb.org/).
Because I use its free API to consume movie/tv data.
- And then follow the [documentation](https://developers.themoviedb.org/3/getting-started/introduction) to create API Key
- Finally, if you use v3 of TMDB API, create a file named `.env.local`, and copy and paste the content of `.env.example`.
- Finally, if you use v3 of TMDB API, create a file named `.env`, and copy and paste the content of `.env.example`.
And then paste the API Key you just created.

## Which features this project deal with
@@ -63,18 +63,18 @@
- How to create and use [HOC](https://reactjs.org/docs/higher-order-components.html)
- How to customize default theme of [MUI](https://mui.com/)
- How to use [RTK](https://redux-toolkit.js.org/introduction/getting-started)
- How to use [RTK Query](https://redux-toolkit.js.org/rtk-query/overview)
- How to customize default classname of [MUI](https://mui.com/material-ui/experimental-api/classname-generator).
- Infinite Scrolling(using [react-infinite-scroller](https://www.npmjs.com/package/react-infinite-scroller))
- Infinite Scrolling(using [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API))
- How to make awesome carousel using [slick-carousel](https://react-slick.neostack.com)

## Third Party libraries used except for React and RTK

- [MUI(Material UI)](https://mui.com/)
- [framer-motion](https://www.framer.com/docs/)
- [react-player](https://github.com/CookPete/react-player)
- [react-infinite-scroller](https://github.com/danbovey/react-infinite-scroller)
- [react-use](https://github.com/streamich/react-use)
- [react-slick](https://react-slick.neostack.com/)
- [use-immer](https://github.com/immerjs/use-immer)

## Install with Docker

@@ -90,9 +90,10 @@ docker run --name netflix-clone-website --rm -d -p 80:80 netflix-clone
- [Linkedin](https://www.linkedin.com/in/endo-aki-63b8791a6/)

> **Note**
> There might be several things to improve.
> Because this project aims to show how to use the features mentioned above.
> There might be several things to improve for performance.
> Because this project only aims to show how to use the features mentioned above.
> So I welcome anyone who wants to contribute.
> If there are anyone who wants to contribute, there are some points(animation using `react-use`, not `framer-motion`, and fix position of the portal in Grid page)
## A Similar and More Complex project

23 changes: 23 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<title>Netflix</title>
</head>
<body style="margin: 0">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
55 changes: 15 additions & 40 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,61 +1,36 @@
{
"name": "netflix-clone-using-react-typescript-mui",
"version": "0.1.0",
"version": "0.1.1",
"type": "module",
"private": true,
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.10.0",
"@reduxjs/toolkit": "^1.8.3",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"@types/jest": "^27.0.1",
"@types/node": "^16.7.13",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"axios": "^0.27.2",
"framer-motion": "^7.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-infinite-scroller": "^1.2.6",
"react-player": "^2.10.1",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-slick": "^0.29.0",
"react-use": "^17.4.0",
"slick-carousel": "^1.8.1",
"typescript": "^4.4.2",
"use-immer": "^0.7.0",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
"vite-tsconfig-paths": "^3.5.2"
},
"devDependencies": {
"@types/react-infinite-scroller": "^1.2.3",
"@types/react-slick": "^0.23.10"
"@types/react": "^18.0.24",
"@types/react-dom": "^18.0.8",
"@types/react-slick": "^0.23.10",
"@vitejs/plugin-react": "^2.2.0",
"typescript": "^4.6.4",
"vite": "^3.2.1"
}
}
9 changes: 0 additions & 9 deletions src/App.test.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Box from "@mui/material/Box";
import MainRoutes from "routes";
import MainRoutes from "src/routes";

function App() {
return (
Loading

0 comments on commit abfb94e

Please sign in to comment.