Space and Time - Suely & Yoyo

.gitignore

@@ -11,6 +11,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

README.md

@@ -20,7 +20,7 @@ This project has two main components: a Rails API and a React front-end. You wil
 
 ## Problem Statement
 
-Our rental store employees want to be able to manage their rental inventory. They want to be able to search through all movies and pick and choose which movies they want to add to their rental library. They want to be able to manage their rental library. We will be using an external API to build in searching for *all movies*. We will use our existing Rails API to manage the *rental library*.
+Our rental store employees want to be able to manage their rental inventory. They want to be able to search through all movies and pick and choose which movies they want to add to their rental library. They want to be able to manage their rental library. We will be using an external API to build in searching for _all movies_. We will use our existing Rails API to manage the _rental library_.
 
 ## Project Information
 
@@ -47,9 +47,9 @@ Each pair/group will give a short presentation on their project and their learni
 
 ### 2. External API Configuration
 
-- Follow the instructions on the API's [Getting Started](https://developers.themoviedb.org/3/getting-started) page to set up your account and request an API Key.   You can use Ada's address in the registration process.
+- Follow the instructions on the API's [Getting Started](https://developers.themoviedb.org/3/getting-started) page to set up your account and request an API Key. You can use Ada's address in the registration process.
 - Read through the documentation and use POSTman to investigate the API. A few endpoints you may want to explore include:
-  - [Search Movies](https://developers.themoviedb.org/3/search/search-movies)
+  - [Search Library](https://developers.themoviedb.org/3/search/search-movies)
   - [Get Movie Details](https://developers.themoviedb.org/3/movies/get-movie-details)
   - [Configuration](https://developers.themoviedb.org/3/configuration/get-api-configuration)
 
@@ -82,6 +82,7 @@ If I am a rental store employee...
 ### The React Router
 
 Your front-end should use the [React Router](https://reacttraining.com/react-router/). You will need to research this as a pair!
+
 - What problem does it solve?
 - How do you install it?
 - How do you use it?
@@ -106,6 +107,7 @@ You can have more if you want (for example `/customers/:id`), but ultimately the
 ## Back-End Requirements
 
 The Rails back-end already has a lot of functionality implemented. You can:
+
 - Get the list of movies in the library
 - Search for movies in the external API
 - Get details on an individual movie
@@ -122,6 +124,7 @@ For the core requirements, you will need to add the ability to add a movie from
 - What happens if you try to add the same movie twice?
 
 ## Optional Enhancements
+
 Some of these optional requirements require work in the front-end only, back-end only or both.
 
 - Deploy your front-end to GitHub Pages, and your back-end to AWS
@@ -142,6 +145,7 @@ At the conclusion of this project, each group will give a presentation of their
 This presentation should be a concise demo of your project and also talking through the following reflection prompts.
 
 Please include the following things in your demo:
+
 - **ONE** of the following user flows to demo:
   - Search for a movie and select a movie
   - I can look at the customers and see a customer
@@ -156,4 +160,5 @@ Please include the following things in your demo:
 There is no expectation for a slideshow.
 
 ## What we're looking for
+
 You can see what your instructors are looking for [here](./feedback.md)

package.json

@@ -3,14 +3,30 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.2",
+    "bootstrap": "^4.5.0",
     "react": "^16.13.1",
+    "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

public/index.html

@@ -19,6 +19,17 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+
+    <!-- Including the bootstrap css via CDN -->
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
+      crossorigin="anonymous"
+    />
+
+    <link href="https://fonts.googleapis.com/css2?family=Lato&family=Open+Sans&display=swap" rel="stylesheet">
+
     <title>React App</title>
   </head>
   <body>
@@ -36,5 +47,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+
   </body>
 </html>

src/App.css

@@ -1,28 +1,95 @@
+/* app */
+
 .App {
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+body {
+  margin-bottom: 5em;
+}
+
+.container {
+  text-align: center;
+}
+
+h1 {
+  margin-bottom: 1em;
+}
+
+input {
+  margin-bottom: 2em;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-bottom: 1em;
+}
+
+/* nav */
+
+.nav-item {
   color: white;
+  padding-left: 1em;
 }
 
-.App-title {
-  font-size: 1.5em;
+/* movies */
+
+.movielist {
+
+} 
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.movie-card {
+  margin-bottom: 4em;
+  width: 200px;
+  padding-bottom: 2.5em;
+  text-align: center;
+  position: relative;
+}
+
+.movie-card button {
+  position: absolute;
+  bottom:   0;
+  right: 40px;
 }
 
-.App-intro {
-  font-size: large;
+.movie-image {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin: 5px;
+  width: 150px;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.release-year {
+  text-align: center
+}
+
+/* Footer */
+
+footer {
+  margin-top: 20rem;
+  padding-top: 2rem;
+  padding-bottom: 1rem;
+  width: 100%;
+  background-color: #353a40;
+  color: #fff;
+  /* TODO: get footer to stick to bottom of window */
+  position: absolute;
+  bottom:   0;
+}
+
+.copyright p {
+  text-align: center;
 }