diff --git a/.env b/.env new file mode 100644 index 00000000..fb7d8c4a --- /dev/null +++ b/.env @@ -0,0 +1 @@ +VITE_DBAPI_KEY = 5f524441926a384bdad27fc1fd156e93 \ No newline at end of file diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 4dcb4390..4451523c 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -2,19 +2,20 @@ module.exports = { root: true, env: { browser: true, es2020: true }, extends: [ - 'eslint:recommended', - 'plugin:react/recommended', - 'plugin:react/jsx-runtime', - 'plugin:react-hooks/recommended', + "eslint:recommended", + "plugin:react/recommended", + "plugin:react/jsx-runtime", + "plugin:react-hooks/recommended", ], - ignorePatterns: ['dist', '.eslintrc.cjs'], - parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, - settings: { react: { version: '18.2' } }, - plugins: ['react-refresh'], + ignorePatterns: ["dist", ".eslintrc.cjs"], + parserOptions: { ecmaVersion: "latest", sourceType: "module" }, + settings: { react: { version: "18.2" } }, + plugins: ["react-refresh"], rules: { - 'react-refresh/only-export-components': [ - 'warn', + "react/prop-types": "off", + "react-refresh/only-export-components": [ + "warn", { allowConstantExport: true }, ], }, -} +}; diff --git a/README.md b/README.md index 83e5e37a..f2d1aae2 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,7 @@ # Movie Site Project -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +Movie single page application (SPA) project,by using the API from https://www.themoviedb.org/. Learned how to use BrowserRouter, Routes, Route and useParams(). ## Getting Started with the Project @@ -24,11 +22,18 @@ npm i && code . && npm run dev ### The Problem -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +We started to layout what components we need and want to create. We also looked into the API what data we'd like to use. At first we code together and tried doing pair-programming for the BrowserRouter, Routes, etc. After a while we split up the work and code in different branches. + +We mostly gathered our information from the bootcamp material or the lovely internet. If we had more creativity and time, we would have done de styling different and might have fetched other data from TMDB. + +#### Additional + +- Add disclamer: "This [website, program, service, application, product] uses TMDB and the TMDB APIs but is not endorsed, certified, or otherwise approved by TMDB." ### View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +[![Netlify Status](https://api.netlify.com/api/v1/badges/832d0052-da1e-49ae-9040-74ff2906a5c8/deploy-status)](https://app.netlify.com/sites/nathalies-sofias-project-movies/deploys) +https://nathalies-sofias-project-movies.netlify.app/ ## Instructions diff --git a/index.html b/index.html index 1615ccc7..a237c819 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,13 @@ - - - - - Movie Site Project - - -
- - + + + + + Nathalie's & Sofia's Movie Site Project + + +
+ + diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 00000000..82916ac5 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,5 @@ + +[[redirects]] + from = "/*" + to = "/index.html" + status = 200 \ No newline at end of file diff --git a/package.json b/package.json index a3bd4ec3..0024140b 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.22.3" }, "devDependencies": { "@types/react": "^18.2.15", diff --git a/public/pexels-tima-miroshnichenko-7991428-large.jpg b/public/pexels-tima-miroshnichenko-7991428-large.jpg new file mode 100644 index 00000000..4b6ed993 Binary files /dev/null and b/public/pexels-tima-miroshnichenko-7991428-large.jpg differ diff --git a/public/popcorn.png b/public/popcorn.png new file mode 100644 index 00000000..b96aa2ad Binary files /dev/null and b/public/popcorn.png differ diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb1..00000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 1091d431..af5afe39 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,31 @@ +import { BrowserRouter, Routes, Route } from "react-router-dom" +import { Footer } from "./components/footer/Footer" +import { Header } from "./components/header/Header" +import { Details } from "./components/details/Details" +import { Listing } from "./components/listing/Listing" +import { NotFound } from "./components/404/NotFound" +import { Genres } from "./components/genres/Genres" + export const App = () => { - return
Find me in src/app.jsx!
; -}; + return ( + <> + +
+
+ + {/* Conditional that makes the "page content" switch between components, depending on the URL*/} + } errorElement={} /> + } + errorElement={} + /> + } /> + } /> + +
+