diff --git a/README.md b/README.md
index 4c8fd7876..eda5fda04 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,14 @@
# Project Movies
-Replace this readme with your own information about your project.
+How to build multi-page application using React Router. Pass information such as product ids, blog post titles in the URL and pick this up in React router (dynamic content). Practice using APIs in React combining useState and useEffect.
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+This project was ment for pair-programming but I did this solo due to time schedule conflicts.
## 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?
+My main problem with this project was actually understanding API and how to change it to be able to interract and use the URL with React. I spent hours just trying to figure out the details of that,combining it with all the steps required for React Router and multi-pages that is asked for the app.
+I needed a lot of help which former students was able to provide. I redid my code and saved a lot of tryouts in external platforms, but my knowledge is not due just yet in this level of React. I find it stimulating to work with but I need more given time to actually unerstand earlier works with props, map and useEffect. Adding API fetch and many componenets with Routes was way to difficult I felt doing solo.
+I worked a lot with turtorials from Technigo, tried the Example project steps but found it very time consuming not sure if it's the best way. Then I booked session with technigo-coach and external help through friends, and former students work to be able to focus on understanding the steps and learning about React Routers wonders.
## 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.
+https://lighthearted-dolphin-81e027.netlify.app/
diff --git a/code/package-lock.json b/code/package-lock.json
index bb51e893e..3fa72176e 100644
--- a/code/package-lock.json
+++ b/code/package-lock.json
@@ -16,7 +16,8 @@
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"react": "^18.2.0",
- "react-dom": "^18.2.0"
+ "react-dom": "^18.2.0",
+ "react-router-dom": "^6.9.0"
},
"devDependencies": {
"react-scripts": "5.0.1"
@@ -3124,6 +3125,14 @@
}
}
},
+ "node_modules/@remix-run/router": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz",
+ "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==",
+ "engines": {
+ "node": ">=14"
+ }
+ },
"node_modules/@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -14384,6 +14393,36 @@
"node": ">=0.10.0"
}
},
+ "node_modules/react-router": {
+ "version": "6.9.0",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz",
+ "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==",
+ "dependencies": {
+ "@remix-run/router": "1.4.0"
+ },
+ "engines": {
+ "node": ">=14"
+ },
+ "peerDependencies": {
+ "react": ">=16.8"
+ }
+ },
+ "node_modules/react-router-dom": {
+ "version": "6.9.0",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz",
+ "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==",
+ "dependencies": {
+ "@remix-run/router": "1.4.0",
+ "react-router": "6.9.0"
+ },
+ "engines": {
+ "node": ">=14"
+ },
+ "peerDependencies": {
+ "react": ">=16.8",
+ "react-dom": ">=16.8"
+ }
+ },
"node_modules/react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -19509,6 +19548,11 @@
"source-map": "^0.7.3"
}
},
+ "@remix-run/router": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz",
+ "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q=="
+ },
"@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -27684,6 +27728,23 @@
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==",
"dev": true
},
+ "react-router": {
+ "version": "6.9.0",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz",
+ "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==",
+ "requires": {
+ "@remix-run/router": "1.4.0"
+ }
+ },
+ "react-router-dom": {
+ "version": "6.9.0",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz",
+ "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==",
+ "requires": {
+ "@remix-run/router": "1.4.0",
+ "react-router": "6.9.0"
+ }
+ },
"react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/code/package.json b/code/package.json
index 7aad26ebc..9736b71ad 100644
--- a/code/package.json
+++ b/code/package.json
@@ -11,7 +11,8 @@
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"react": "^18.2.0",
- "react-dom": "^18.2.0"
+ "react-dom": "^18.2.0",
+ "react-router-dom": "^6.9.0"
},
"scripts": {
"start": "react-scripts start",
diff --git a/code/src/App.js b/code/src/App.js
index f2007d229..d723b835a 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -1,9 +1,26 @@
import React from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import { NotFound } from 'components/NotFound'
+import { MovieList } from 'components/MovieList'
+import { Header } from 'components/Header'
+import { Details } from 'components/Details'
+import { TVSeriesList } from 'components/TVseriesList'
+import { TVseriesDetails } from 'components/TVseriesDetails'
export const App = () => {
return (
-