knightburton / series-rush

TV Series tracker (a garage project to learn new techniques and have fun)

Series-Rush

Track all your series in one place on multiple platform.

Run the project locally

Prerequisites

• This project was bootstrapped with Create React App. In order to be able to run on your local machine install node.js. We encourage you to use nvm to get the proper node version.
• Also, the project runs with the power of firebase. To run the project, you have to acquire the proper firebase configs and provide them as environment variables. We suggest that to create your own firebase project, configure it for your needs and use that to run the project.

Commands

# Get the code
$ git clone https://github.com/knightburton/series-rush.git

# Enter the project root folder
$ cd series-rush

# Install packages
$ npm i

# Optional: Clean install
$ rm -rf node_modules
$ npm clean cache --force
$ npm i

# Start the project
$ npm start

Contributing

First off all, thanks for taking the time to contribute! 💪

Before any action, please visit the Code of Conduct and Contributing guideline for more information.

License

Series Rush is Open Source software under the Apache 2.0 license. Complete license and copyright information can be found within the license.

series-rush's Issues

Broken search in case of page refresh

If there was already a valid search and teh browser tab is refreshed, the thunk run into an error and the search result will not be visible, just an error taht indicates something went wront.

Search feature fixes and improvements

• The search crash if the multi type selected (the result parser did not finished)
• There is no search in progress indicator
• In case of searching and empty result at the same type the ui displays invalid state
• In case of large result set and pagination the page does not scroll back to top

Custom email address verification

The project currently redirects the user to the default confirmation site, therefore the project page cannot be updated (button availability, email verified state) based on the user actions only after a refresh.

• Create a page that can be used to redirect the user
• Invoke the verification endpoint if the credentials are correct
• Redirect the user to the profile page (with the updated states)

Typescript

The whole project should be refactored to typescript and also would be nice to use firebase without any third party lib.

• init app with typescript
• Init linter and prettier
• Init mui v5
• Init react-redux with redux-toolkit
• Init react-i18next
• Init react-router v6
• Init firebase

Create Account Settings page

Refactor based on hooks and performance

Create a details page for the search results

In case of the users want to know more about the searched items a modal dialog or a new page would be great where we can fetch all the desired details about the item (like imdb link, description, number of seasons, etc...).

Add unit tests to auth store

The auth store should be tested. 100% coverage would be great.
The firebase part of the store should be included as well.

Create privacy setting srction inside account security page

Create TS import aliases

Handle authenticated state on the App Bar

Add unit tests to app store

The app store should be tested. 100% coverage would be great.

Prevent the full UI to load up until auth cgeck is complete

Create email verification secion on security page

Define base colors and design elements

Create a proper logger for the cloud functions

Upgrade the alert based translations for store

Create Account management page (delete account eg.)

Add image upload and delete firebase part

Rename the defaultt translation file to core for more usable typings

Refactor the withRouter based components

Use the new React Router Dom Hooks instead of withRouter HOC all over the project.

Get rid of clsx package

The clsx package is unnecessary because most of the boolean absed classname changes can be determined inside the material ui styles.

Add unit tests to search store

Add unit tests to search store with 100% coverage.

Restrict the registration flow

At the moment the whole registration is open for everyone. I need a mechanism to restrict the registration for those who has access keys or has been invited, something like that. With this the first few release and test phase could me more managable.

Create GitHub Actions for PR testing

The new aaction should run the followings:

• npm install
• eslint
• tests
• build

Implement the TV show season/episode selection

• List all seasons of a Tv show and the episodes inside of them
• Allow the user to select/deselect the watched episodes
• Allow the user to select/deselect the watched seasons
• Allow the user to select/deselect the watched show

Create Password change page

Create search field in the App Bar

Handle the auth loading state on sign in page

Convert the account tabs into nav links

Create a logo and color schema

• Create a new logo (favicon, multiple size logo)
• Create a new color schema which corresponding to the logo

Improve the search with query strings

• Put the search parameters into query strings
• Fill up the search bar and type selector in case of query change or mount
• Perform a new search in case of search page mount and navigation between search page "copy"

Routing issue

The project at the current state do not navigates between the pages very well. The react-router package has ben updated and the core concept of the navigation should be reviewed and fixed asap.

Implement the show/movie search with tmdb api

• Use the tmdb API as main source
• Allow the user to select the search type (TV show or movie)
• Allow the navigation between pages in case of large search result
• Create new views for search results

Create alert component and store part

Investigate and create a CRON job like cloud function for cache db

In order to keep all of the cached items updated we need to fetch perodicly the source db looking for changes. Once a change is related to our cache db then we should update that so each user will get up-to-date info about their items.

Create auth error handler for specific cases

Create protected routes handler

Add unit tests to collection store

Add unit tests to collection store with 100% coverage.

Add theme selector to the app bar

Implement the base collection feature

These points are only for the results page, the actual collection page is not included here:

• Allow the user to add a TV show or a movie to their collection
• Allow the user to remove a TV show or a movie from their collection

Create a standalone Profile page

Add typescript types for i18next

Create account menu for app bar

Replace the moment with date-fns

The moment library is huge. Based on the project requirements it does not necessary to import such a big lib into it. The date-fns is way more smaller and that should also provide the functionality that we need here. https://date-fns.org/

Create the collections page

Allow the user to walk through their collections and manage them.

• Create a new page content where the collected shows and movies are available
• Create group based views
• Create type based views
• Allow the user to manage their own groups
• Allow the user to perform actions on each item

Create a cloud function for the collection item add

When a new item is added to the user's collection we need to fetch all data about the item into a cache db so we can use that to display the details about all collection items.

Create common chip based selection component

• Use an array of labels to render chips
• Allow to click the chips with custom function
• Allow to define the default selected chip by key
• Handle the multiple media size