NerdFlix 1

Link: GitHub - karlhadwen/netflix: Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Netflix Using React API: Getting Started

Features

1. Should have at least five pages (/signin, /signup, /series, /film, /)
2. For /signin and signup at least should be present(e.g. Sign in form, Sign up form as shown in original project) even though the actual functionality are not present
3. Movies or series should be searchable
4. Don’t miss out the feature from the original project.
5. Series and Films page can only be seen when user successfully sign in otherwise redirect to corresponding sign in or login page.
6. When user click the play button, user can play the trailer of corresponding series or film.

NextJs, React and Typescripts features required in this project:

React.js requirements

1. Use React’s Suspense whenever possible to mitigate blocking ui and streaming HTML.

Next.js requirements

1. Use fetch function for all data fetching.
2. Use server component as much as possible whenever we need to fetch data. Ensure that SEO works.
3. Can use Routing group , Parallel Route accordingly to build an application.
4. Migrate react 16 to Next.js 13

Typescript requirement

1. migrate project to have typescript with config file
2. all types should be checked
3. use some of Utility types (typescript)
4. no any type
5. unit test functionality with Jest
6. optimize for performance
7. create custom decorators
8. using the following types:

• Generics
• Mapped Types
• Conditional Types
• Indexed Access Types
• Utility Type

Nice to have(Bonus)

1. Implement sign in and sign out functionality by using third party provider( e.g. Github or Google)

NerdFlix 2

-add NX and Cypress to Nerdflix 1

NX

• separate each page as micro-frontend
• shared assets, shared components and shared etc should be in shared lib
• could run services individually
• take advantages of Nx-Cloud to see how fast it is when deploying a micro service app
• have Nx commands for all services : run-build-test-lint and see how they work in local and staging

Cypress

• add typescript
• Each page should have e2e itself
• E2E testing (Can sample only login flow)
• Component testing (Focus on this)
• Code Coverage 81%