git clone https://github.com/kientq111/FE-Challenge.git
cd my-app
cp .env.copy .env
npm install
npm start
This is domain for this project I've deployed: https://fe-challenge-pi.vercel.app/
The following required functionality is completed:
- User can view a list of movies currently playing in theaters. Poster images load asynchronously.
- Add a tab bar for Now Playing and Top Rated movies.
- Add a search bar.
- User can view movie details by tapping on a cell.
- User sees loading state while waiting for the API.
- User sees an error message when there is a network error.
- Simple responsive.
The following optional features are implemented:
- Implement segmented control to switch between list view and grid view.
- All images fade in.
- Implement lazy load image.
- Customize the highlight and selection effect of the cell.
- Improve UX loading by skeleton loading.
- Enhance responsive.
The following additional features are implemented:
- List anything else that you can get done to improve the app functionality!
- Please use ReactJS with typescript
- Please use SCSS
- Please do not use any CSS/SCSS framework or UI library
Here's a walkthrough of implemented user stories:
- Automatic content fetching when scrolling to bottom: https://jumpshare.com/v/GcC2E775MRE6sr3ADhDp
- Filter movies by "Now Playing" and "Top Rated" categories: https://jumpshare.com/v/bPMjUUCXTxHMnHPTST6s
- Movie search with debounced input: https://jumpshare.com/v/ic9yKDM4jkS2xDObVrgj
- Detailed movie information on click: https://jumpshare.com/v/VV0iCneCGhtpKsPg4VB9
The app is now live! Visit the deployment link to explore the features and functionality. Live URL: https://fe-challenge-pi.vercel.app/