dmytro1991ua / next-js-movie-app

Movie Room is a passion project dedicated to movie enthusiasts and cinephiles. It's a virtual space where movie lovers can come together to explore, discuss, and share their favorite films and TV shows.

Hi 👋, I'm Dmytro

A passionate Front-End Developer who's on an exciting and thorny journey in the IT industry.

Connect with me:

Languages and Tools:

Stats:

 

Streak Stats:

next-js-movie-app's Issues

Create a reusable Start Rating component

Add and configure Next Auth Github provider, cover components ans files with basic tests, update tsconfig and jest config files

Add and configure Next Auth Google provider

Implement Search functionality

• Create a Search component, adjust Input component to work with icons, cover new codebase with tests
• Implement Movie and TV Serial search functionality

Configure ESLint, prettier, husky, etc

Implement Add to and Remove from favorites functionality with MongoDB

• Add favorites API endpoint with the ability to add to and remove from favorites as well as get available favorites movies of serials from DB
• Add the ability to fetch and display mock favorites data from DB
• Adjust see more page for favorites list
• Implement mutation to add to and remove from favorite list, refactor Details page with custom hook
• Add Favorite icon and connect adding/removing favorite movie or serial with DB via React Query mutation
• Adjust existing and cover new codebase related to Favorites flow

Have a look at adding some sort of a spinner to a Button component to handle loading state

• Add Loader spinner to a Button component, add logic to show spinner on page redirection, sending requests, etc.
• Cover new flow related to Button loader with tests

Have a look at possibility implement theaming functionality

Implement form validation with Yup, create a custom Formik Field, move Form inputs render to config file, cover Input component with tests

Have a look at introducing a react-query to the project

Have a look at possibility to add See More functionality for each slider, by clicking to this button there will be a page with all movies/serials and pagination or infinite scroll

• Add See More button to all sliders within Home, Movies and Serials Page
• Connect See More page of each slider within Home Page with API (retrieve corresponding See More Page data)
• Refactor getSerSideProps function for each page
• Connect See More page of Movies Page with API and cover new codebase with tests
• Connect See More page of Serials Page with API and cover new codebase with tests
• Create reusable Card component
• Implement infinite scroll for See More Page cards, refactor codebase

Create custom Button component

Increase test coverage within all components, modules, utils, etc.

Configure React Testing library + Jest

Think about how to connect Star Icon rating (when a user rate specific movie/serial) with DB or something like that

• Add custom rating API endpoint with the ability to add new or update existing movie or serial ratings from DB
• Implement rating update on client side, adjust tests, api endpoints methods, add utils and refactor components with hooks
• Display custom user movie or serial rating, refactor codebase with custom hooks
• Cover rating flow functionality with tests, adjust services and increase test coverage, add more tests cases for different components, etc

Configure ESLint, prettier, husky and lint-staged

Add icons to Auth action buttons

Add and configure nextAuth, create basic auth pages

Create reusable Movie/Serials Details page

Implement shoving movie/serial trailer on click

Add Image component to Sign-In/Sign-up form

Adjust Header and navigation, make it sticky, maybe change colors on scroll

Add and Configure Next Auth Credentials Provider in order to signIn/signUp via email/password

Configure Tailwind CSS

Add and configure toast notifications

Create a reusable Movie Banner with randomly rendered movie

Create a reusable Slider

Have a look at possibility to add a Global Loader (react-loading-skeleton) and catch possible delay when user is not defined and avoid UI flashes

Create custom input component

Clean up root utils, interfaces, constants, etc (dived based on modules/components and move to separate files or leave as global)

• Clean up and divide global constants and enums
• Clean up and divide global interfaces and requests configs
• Clean up and divide global utils

implement Read More functionality for a long movie description

Add and Configure Formik and yup

Refactor services (most likely some services could be combined and moved to a global, reusable service)

Introduce src folder to the project

Implement client/server routes protection

Style Sign-n/Sign-up form

Make adjustments to application's responsiveness

Create Auth Layout

Adjust Main Layout Skeleton and Skeleton for each module/component/page

Implement Profile Page

• Add endpoint to update user info
• Rework saving user data to MongoDB in order to store image in the independent documents to avoid issues with Next-Auth session size limit
• Implement basic image upload with react dropzone and connect it with the server
• Implement basic update of user data, add basic inputs with validation, rework avatar endpoint and overall user data updates
• Implement layout for Profile page, adjust profile data updates logic
• Cover Profile page functionality with tests and adjust existing tests