Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mankybansal/not-netflix-inc
This project is a sample mobile web app for Not Netflix Inc!
https://github.com/mankybansal/not-netflix-inc
framer-motion netflix omdb-api react typescript
Last synced: 8 days ago
JSON representation
This project is a sample mobile web app for Not Netflix Inc!
- Host: GitHub
- URL: https://github.com/mankybansal/not-netflix-inc
- Owner: mankybansal
- Created: 2021-03-03T08:30:39.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-03-04T11:07:31.000Z (almost 4 years ago)
- Last Synced: 2024-11-28T17:35:03.880Z (2 months ago)
- Topics: framer-motion, netflix, omdb-api, react, typescript
- Language: TypeScript
- Homepage: https://not-netflix-inc.vercel.app/
- Size: 5.25 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# not-netflix-inc
This project is a sample mobile web app for **Not Netflix Inc**!
View a running demo here: https://not-netflix-inc.vercel.app/
## Setup
### Start Dev Server
```
npm install
npm start
```
### Running Jest Tests
```
npm test
```
## Notes
### 1. What were the most difficult tasks?
- Typing the response from the OMDb API to allow for one hook that could make any api request and ensures type safety for the returned data object in multiple shapes.
### 2. Did you learn anything new while completing this assignment?
- Learned about image fallbacks
### 3. What did you not have time to add? What work took the up majority of your time?
- Optimize for desktop
- Add more unit tests
- Add E2E tests
- Virtualize the list
- Orchestrate the animations
- Add autocomplete for search
- Break down bigger components into smaller sub-components (invoice, order confirmation, etc.)
- Comprehensive error handling (network, retries, UX feedback)
### 4. How could the application be improved?
#### Technical:
- Would probably store all the selected movie state in the app, but the search query would need to be modified to include more information.
- Add global style overrides and set cleanup styles.
- Move all colors, grid units into a theme.
- Would add more props to the generic components
- Use routes instead of maintaining the `currentPage` in the `AppContext`.
#### Design:
- The `MediaDetails` page goes back and resets the search. Ideally you want to preserve the search, and for that maybe add search params to the URL.
- Add more filtering / search options
- Virtualizing the list for better performance
- Add autocomplete for search & search on keyup. The OMDb API had a limit / account, so I decided to leave it at `hit enter to search`.
- More loading / interim fallback states