lchen8 / rnflicks

Flickster movie app in React Native. For CodePath bootcamp.

Project 1 - RNFlicks

RNFlicks is a movies app using the The Movie Database API.

Time spent: 25 hours spent in total

User Stories

The following required functionality is completed:

• User can view a list of movies currently playing in theaters. Poster images load asynchronously.
• User can view movie details by tapping on a cell.
• User can use hardware back button on Android to navigate.
• User can change the orientation of the phone to switch from landscape and portrait customized views.
• User sees loading state while waiting for the API.
• User sees an error message when there is a network error.
• User can pull to refresh the movie list.
• Add a cross-platform tab bar for Now Playing and Top Rated movies.

The following optional features are implemented:

• Customize the highlight and selection effect of the cell.
• Customize the status bar to match app color scheme.
• Add a search bar.
• Customize the navigation bar.
• Add icons to improve the app UI.
• User sees a play icon overlay on backdrop image if movie trailer is available.
• User can tap on a button to play the movie trailer.
• Tapping on a movie poster image shows the movie poster as full screen and zoomable.
• All images fade in and progressively load low resolution to high resolution.
• Search bar animates with scroll.

The following additional features are implemented:

• Rating bar in movie description view

Video Walkthrough

Here's a walkthrough of implemented user stories:

Portrait:

Landscape:

Network Error:

GIF created with Recordit.

Notes

Debugging was something to get used to, but no major challenges.

License

Copyright [2016] [Lily Chen]

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

rnflicks's Issues

Project Feedback!

Excellent work Lily and great use of the LinearGradient component. Only a few small critiques for your code:

• The TabApp and NavMovies components could have been decoupled more, thus cleaning up the logic within NavMovies by not using route_key to select between different URLs in NavMovies and instead just passing the url to NavMovies.
• When you have disjoint binary states sometimes it is better to combine the binary states into an Enum type to make your code easier to read, so for example !this.state.refreshing && this.state.isLoading in your app could have been this.state.loadingState === ‘loading’ and in your app the loadingState can only be one of ‘loading’, ‘refreshing’, ‘loaded’ to cover all the cases you have now. And it would also remove the special handling difference for updateRows between refreshing and loading logic.
• The copy/pasted code in MovieDetails could have been shared a bit more.
• (StarRating.js) A key with the same value as the index in an array is unnecessary, you can always get the index while you are iterating through the array, e.g., arr.map((a, key) => …)