Capstone Project: TvMaze

.eslintrc.json

@@ -22,6 +22,7 @@
     "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
     "react/react-in-jsx-scope": "off",
     "import/no-unresolved": "off",
+    "import/extensions": "off",
     "no-shadow": "off",
     "import/no-extraneous-dependencies": "off",
     "max-len": "off"

README.md

@@ -41,24 +41,27 @@
 
 # 📖 TvMaze App <a name="about-project"></a>
 
-**TvMaze App** is a single page app that fetches a list of shows from the [TvMaze API](https://api.tvmaze.com/). Users that search for a TV show and see its details.
+**TvMaze App** is a single page app that fetches a list of shows from the [TvMaze API](https://api.tvmaze.com/). Users can search for a TV show and see its details.
+
+![tvmaze-laptop](https://user-images.githubusercontent.com/87370519/229634027-54766cda-062b-4f74-8fab-7a349f96af54.png)
 
 ## 🛠 Built With <a name="built-with"></a>
 
 ### Tech Stack <a name="tech-stack"></a>
 
 <details>
   <summary>Client</summary>
-  <ul>
-<li><a href="https://www.w3.org/html/" target="_blank"><img align="center" src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/html-icon.svg" alt="html5" width="55" height="55"/></a></li>
-<li><a href="https://www.w3schools.com/css/" target="_blank"><img align="center" src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/css-icon.svg" alt="css3" width="55" height="55"/></a></li>
-<li><a href="https://reactjs.org/" target="_blank"><img align="center" src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/react-js-icon.svg" alt="react js" width="55" height="55"/></a></li>
-<li><a href="https://redux.js.org/" target="_blank"><img align="center" src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/redux-icon.svg" alt="redux" width="55" height="55"/></a></li>
-<li><a href="https://vitejs.dev/" target="_blank"><img align="center" src="https://img.shields.io/badge/Vite-646CFF.svg?style=for-the-badge&logo=Vite&logoColor=white" alt="Vite" width="55" height="55"/></a></li>
-<li><a href="https://vitest.dev/" target="_blank"><img align="center" src="https://img.shields.io/badge/Vitest-6E9F18.svg?style=for-the-badge&logo=Vitest&logoColor=white" alt="Vitest" width="55" height="55"/></a></li>
-<li><a href="https://react-bootstrap.netlify.app/" target="_blank"><img align="center" src="https://user-images.githubusercontent.com/87370519/228852532-a9d3d23d-a396-431a-86b1-55b07ca5bbc9.png" alt="react-bootstrap" width="55" height="55"/></a></li>
-<!--     <li><a href="" target="_blank"><img align="center" src="" alt="" width="55" height="55"/></a></li> -->
-  </ul>
+<br />  
+<div>
+<span><a href="https://www.w3.org/html/" target="_blank"><img align="center" src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/html-icon.svg" alt="html5" width="55" height="55"/></a></span>
+<span><a href="https://www.w3schools.com/css/" target="_blank"><img align="center" src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/css-icon.svg" alt="css3" width="55" height="55"/></a></span>
+<span><a href="https://reactjs.org/" target="_blank"><img align="center" src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/react-js-icon.svg" alt="react js" width="55" height="55"/></a></span>
+<span><a href="https://redux.js.org/" target="_blank"><img align="center" src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/redux-icon.svg" alt="redux" width="55" height="55"/></a></span>
+<span><a href="https://vitejs.dev/" target="_blank"><img align="center" src="https://img.shields.io/badge/Vite-646CFF.svg?style=for-the-badge&logo=Vite&logoColor=white" alt="Vite" width="55" height="55"/></a></span>
+<span><a href="https://vitest.dev/" target="_blank"><img align="center" src="https://img.shields.io/badge/Vitest-6E9F18.svg?style=for-the-badge&logo=Vitest&logoColor=white" alt="Vitest" width="55" height="55"/></a></span>
+<span><a href="https://react-bootstrap.netlify.app/" target="_blank"><img align="center" src="https://user-images.githubusercontent.com/87370519/228852532-a9d3d23d-a396-431a-86b1-55b07ca5bbc9.png" alt="react-bootstrap" width="55" height="55"/></a></span>
+<!--     <span><a href="" target="_blank"><img align="center" src="" alt="" width="55" height="55"/></a></span> -->
+  </div>
 
 
 </details>
@@ -90,23 +93,19 @@
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-<!-- LIVE DEMO 
+<!-- LIVE DEMO -->
 
 ## 🚀 Live Demo <a name="live-demo"></a>
--->
 
 <!--
 - [GitHub Pages](https://miltonhenschel.github.io/air-polution-metrics-app/)
 -->
 
-<!--
-- [Live demo: Soon](https://miltonhenschel.github.io/air-polution-metrics-app/)
-
-- [Video presentation: Soon]()
+- [GitHub Pages](https://miltonhenschel.github.io/tvmaze-show/)
 
+- [Video presentation](https://www.loom.com/share/77247b23cd784d4ebdcc1a4d5c8ab1ae)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
--->
 
 <!-- GETTING STARTED -->
 
@@ -129,11 +128,11 @@ In order to run this project you need:
 - [ ] Clone this repository to your desired folder:
 
 ```
-git clone https://github.com/miltonHenschel/air-polution-metrics-app.git
+git clone https://github.com/miltonHenschel/tvmaze-show.git
 ```
 
 ```
-cd air-polution-metrics-app
+cd tvmaze-show
 ```
 
 - [ ] Open the file in your code editor
@@ -193,7 +192,7 @@ npm run build
 ## 🔭 Future Features <a name="future-features"></a>
 
 - [ ] **Improve design, include transitions and/or animations, etc.**
-- [ ] **Implement additional pages in the website: about me, references, etc.
+- [ ] **Implement additional pages in the website: about me, references, etc.**
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
@@ -219,7 +218,10 @@ If you like this project then don't forget to give a star ⭐ on this repository
 
 ## 🙏 Acknowledgments <a name="acknowledgements"></a>
 
-I would like to thank **![](https://img.shields.io/badge/Microverse-blueviolet).**
+I would like to thank:
+
+- **![](https://img.shields.io/badge/Microverse-blueviolet)**
+- [Nelson Sakwa on Behance](https://www.behance.net/gallery/31579789/Ballhead-App-(Free-PSDs)) for the design guidelines of this app.
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

dist/index.html

@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="data:image/png;base64,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" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-    <script type="module" crossorigin src="/assets/index-7c267ae4.js"></script>
-    <link rel="stylesheet" href="/assets/index-9b9c40fe.css">
+    <title>TvMaze</title>
+    <script type="module" crossorigin src="/tvmaze-show/assets/index-25a55395.js"></script>
+    <link rel="stylesheet" href="/tvmaze-show/assets/index-aaec84c0.css">
   </head>
   <body>
     <div id="root"></div>

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="./src/assets/tvmaze.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>TvMaze</title>
   </head>
   <body>
     <div id="root"></div>