Flixster starter

README.md

@@ -6,3 +6,79 @@ Currently, two official plugins are available:
 
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+📝 `NOTE` Use this template to initialize the contents of a README.md file for your application. As you work on your assignment over the course of the week, update the required or stretch features lists to indicate which features you have completed by changing `[ ]` to `[x]`. (🚫 Remove this paragraph before submitting your assignment.)
+
+## Unit Assignment: Flixster
+
+Submitted by: Oluwatosin Oyekeye
+
+Estimated time spent: 25 hours spent in total
+
+Deployed Application (optional): [Flixster Deployed Site] https://flixster-starter-1cb8.onrender.com/
+
+### Application Features
+
+#### CORE FEATURES
+
+
+- [X ] **Display Movies**
+  - [ X] Users can view a list of current movies from The Movie Database API.
+  - [X ] For each movie displayed, users can see its title, poster image, and votes.
+  - [ X] Users can load more current movies by clicking a button at the bottom of the list (page should not be reloaded).
+- [X ] **Search Functionality**
+  - [X ] Users can search for movies and view the results in a grid.
+  - [X ] Users can clear results and view previous current movies displayed.
+- [X ] **Accessibility Features**
+  - [ X] Website implements accessibility features (semantic HTML, color contrast, font sizing, alt text for images).
+- [ x] **Responsive Design**
+  - [x ] Website implements responsive web design.
+- [x ] **Movie Details**
+  - [ x] Users can view more details about a movie in a popup, such as runtime in minutes, backdrop poster, release date, genres, and/or an overview.
+- [ x] **Sorting Options**
+  - [ x] Users can click on a filter by drop down to sort product by type (alphabetic, release date, rating).
+- [ x] **Layout**
+  - [x] Website displays header, banner, search, movie grid, about, contact, and footer section.
+
+#### STRETCH FEATURES
+
+- [ x] **Deployment**
+  - [x ] Website is deployed via Render.
+- [x ] **Embedded Movie Trailers**
+  - [ x] Within the popup displaying a movie's details, users can play the movie trailer.
+- [x ] **Watched Checkbox**
+  - [ x] For each movie displayed, users can mark the movie as watched.
+- [ x] **Favorite Button**
+  - [ x] For each movie displayed, users can favorite the movie.
+- [x ] **Sidebar**
+  - [ x] Users can open a sidebar
+  - [ x] The sidebar displays the user's favorited and watched movies
+
+### Walkthrough Video
+
+`TODO://`
+`ADD_EMBEDDED_CODE_HERE` https://www.loom.com/share/7917f1c647d0416797f0ac1e811f3728?sid=9b4a8429-b055-4c8a-a64b-974190caff0a
+<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/7917f1c647d0416797f0ac1e811f3728?sid=f5e33990-1749-4fe9-b6c2-c375ce172984" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
+
+### Reflection
+
+* Did the topics discussed in your labs prepare you to complete the assignment? Be specific, which features in your weekly assignment did you feel unprepared to complete?
+
+They prepared me for only a little part the project. Lectures on useState and API calls did help
+
+* If you had more time, what would you have done differently? Would you have added additional features? Changed the way your project responded to a particular event, etc.
+
+With more time, I would have done some more unique designs for User experience
+
+* Reflect on your project demo, what went well? Were there things that maybe didn't go as planned? Did you notice something that your peer did that you would like to try next time?
+
+Using APIs for the first time stood out to me. I always thought it was a really hard and long process
+
+### Open-source libraries used
+
+- Add any links to open-source libraries used in your project.
+
+### Shout out
+
+Give a shout out to somebody from your cohort that especially helped you during your project. This can be a fellow peer, instructor, TA, mentor, etc.
+I would like to shout out to my manager for taking her time to break down concepts for my understanding. Also special appreciation to Paige, Sammy, and Erika for the quick fixes and debugging help. And to my peers like Izu, Dara, Ian, shoutout for brainstorming solutions with me.

index.html

@@ -9,5 +9,16 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
+    <script src="https://kit.fontawesome.com/61795c539b.js" crossorigin="anonymous"></script>
   </body>
+  <footer>
+    <div class='footerEnd'>
+      <p id="footerText">&#169; copyright Oluwatosin.</p>
+      <div class='socialMediaIcons'>
+        <a href="#" class="fa fa-facebook"></a>
+        <a href="#" class="fa fa-twitter"></a>
+        <a href="#" class="fa fa-instagram"></a>
+      </div>
+    </div>
+  </footer>
 </html>