lmcjt37 / curated-tv-and-film Goto Github PK

Header section takes up quite a lot of space when showing the title, search and filters.

Adding a dropdown for the filters would free up some space and you can show only when needed.

Previous PR's have added assets for use in the project.

These need implementing in the readme, header and favicon.

When you click on the header title, the scroll to top just jumps there which is clunky.

An easing should be applied to smooth this out.

An additional feature of the app could be to list suggestive titles.

How this would work needs defining, as we filter the list as you type. But this feature could require you to commit a search to allow it to work.

Otherwise another solution would be to add suggestions in the content for each title.

Example: https://tastedive.com/

We currently have filters for tv and films.

Even more would be better.

Add a section for displaying any contributors to this project

A simple logo which can be added to the header, repo and favicon.

If you reach a message 'No search result' this affects the content stored in state so that it's not searchable.

At this point, if you delete characters from your search. This isn't reflected in the search results.

The Github icons for the footer links cause the alignment to be out.

The links could do with being made a little more obvious too.

When you carry out a search, the results reflect the search as it you type.

When you delete characters the same should be true.

We need some linting to force everyone to use the same code styling.

https://github.com/prettier/prettier

Fix the image reference for "How I met you mother" as seen below.

Add the ability to filter the library by various criteria.

Some example criteria: tv/film, year, animated, action.

May require tag types to be added to the content.js.

The videos should represent scenes from the film or tv show references.

They shouldn't be credits (unless easter eggs), movie trailers, tv show intros, fan videos.

The header clearance isn't perfect for desktop or mobile.

Too much whitespace on desktop between header and first image.

Header overlaps first image on mobile.

Would be my preference to remove the eslint + prettier plugin and implementation and swap for the pre-commit - https://prettier.io/docs/en/precommit.html#option-1-lint-staged-https-githubcom-okonet-lint-staged.

When implementing this, the pipeline step should be removed also, and the readme updated to reflect this change.

The web app is currently very simple and could do with a facelift to make it more friendly.

Some suggestive tasks:

• Add improved styling to the page
• Better Font
• Filter list (years, tv/film, animated, etc)

Similar to #138 where we are trying to improve the layout of the header for mobile.

If we can show/hide the search by initially only showing a magnifying icon, then upon selection animating the input into visibility.

This is a simple example - https://codepen.io/CBeghin/pen/HeuiF

If you feel that the design could be improved as a whole then I would suggest one of the following instead - https://tympanus.net/Development/SearchUIEffects/index9.html (This was my favourite)

Breakdown the project into components for easier visibility.

Starting areas:

• Header
• Footer
• Item cards

Preview:

I'd recommend remove the fixed height (height: 200px) on .item-thumbnail img {} selector and set:

.item-thumbnail img {
  max-width: 100%;
  height: auto;
}

Most of the current images show black letter boxing.

These should be replaced with better images for the respective show or film.

The information comes from IMDB and Youtube typically, so we should have an 'Acknowledgements' section in the readme.

We could also add a link in the page footer to this section.

Adding a footer to the bottom of the page to show some meta.

• Link back to this github repository
• Build version (This will mean that new PR's will require updates to the versions/ a build number increment will be needed in the future)
• link to contributors list

Create a separate sort button which functions the same way as the filter.

Use an icon such as https://fontawesome.com/icons/sort-alpha-down?style=solid

The implementation could be a duplication of the filter bar, or a DRY-er approach would be to re-use the filter bar component somehow.

Whilst implementing the pre-commit hooks using husky and lint-staged, I came across the link for imagemin-lint-staged https://github.com/okonet/lint-staged#minify-the-images-and-add-files-to-commit

This will help minimise the images hopefully, and could be added to the pre-commit maybe.

Improve the look of the page with some sort of theming?

Create a simple web page to view and filter the suggested titles

The Readme is missing a 'getting started' section to help new users get up and running with the development of this project.

The search should be restricted to only the title.

Adding the description seemed like a good idea at the time but the search becomes too ambiguous. Also, would you know what is written in the descriptions you are looking for anyway as the content is uniquely added?

Year could be added to the search as a sub-task.

Change all image URLs to static assets so that we gain uniformity.

This will enable us to have more recognisable images from each of the entries to make it easier to find what you want.

Add config for running Circle CI.

Steps required:

• Run tests
• Build for production
• Deploy to Github pages

The curated TV and film web page on mobile device browser isn't properly handled

Add viewport to prevent scaling and zooming when viewing app on mobile.

From memory this is all that's needed and can simply be added to the index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Improve workflow times by re-using the workspace through the various steps. Exampe config can be found in the following links:

persist_to_workspace - https://circleci.com/docs/2.0/configuration-reference/#persist_to_workspace

attach_workspace - https://circleci.com/docs/2.0/configuration-reference/#attach_workspace

Following improvements from #20, it would make sense to add a section on how you can run tests if you want to also improve these during development.

With the change made to make the images static assets, the references are incorrect when deployed and therefore not resolving to appear on the production page.

The images are slow to load on both mobile and desktop.

The images need resizing and compressing so that it will improve load times.

When you remove tv shows in the filters, a year input is revealed.

This doesn't work.

Create PRs for any suggested TV show or series scenes which are considered, in your opinion, a should watch

Create PRs for any suggested Movie or TV scenes which are considered, in your opinion, a should watch.

Please refer to https://github.com/lmcjt37/curated-tv-and-film/blob/master/CONTRIBUTING.md for more information.

ERROR: The key you are authenticating with has been marked as read only.
fatal: Could not read from remote repository.

It isn't obvious that you click the image to view the scene.

Maybe a separate link should be added to the cards, or a link on the title, or both.

The tests use Jest.

Currently only the simplest App.js test exists from boilerplate CRA.

Would be good to improve tests throughout.

There appears to be a lot of white space around the TV and Film sections.

Could do with either changing the placement of how information is shown or adding more information.

On mobile the header overlaps the top content.

The filter selection should be swapped from a checkbox to radio buttons.

This will allow you to select one option at a time, and prevent there from being no content on the screen.

When movies filter is selected it should still show the year selection.

Latest updates to the inputs in the header has broken the year choice from showing.

A new sort filter has been added, but the content should probably start off alphabetised correctly anyway.

Maybe a script could be created to be added to a process. The script would use the same implementation as what is defined for the sorting method.