Next.js project that demonstrates improved OTT app with SSR
- browse page with server-side rendered carousels
- detail page
- video page
- search page allowing search including virtual scroll functionality on content scroll
Deploy the example using Vercel:
- for local development pass following in .env
- Uses movie database (TMDb) as back-end
MOVIEDB_API_URL="database endpoint"
MOVIEDB_API_KEY_PARAM="key?='insert your key'"
- Project uses
yarn
- to run locally
yarn
yarn dev
- project uses Vercel for deployment
# preview deployment
now
# production deployment
now --prod
Front-End | State management | Components | Styling | Monitoring | Deployment | testing |
---|---|---|---|---|---|---|
Typescript | @reduxjs/toolkit | shaka-player | Emotion.js | Sentry | now -> Vercel | jest * |
React | redux-observable | swiper.js | styled-system | jest-marbles * | ||
Next.js | react-window | react-testing-library * |
- needs to be introduced
- refactor state management away from duck structure
- make cover image more responsive (on detail page)
- test epics, some components
- hydrate Redux from SSR to Client
- sanitize search expression before calling API here
- introduce API erroring in Redux
- page transitions
- fetch detail on video page (for title)
- introduce search query as query param in router on Search Page
- Generate types based on Swagger file (need to find)