petrusmatiros / didyousee Goto Github PK

🦉 An intuitive and modern web app where you can discover, share and organize your favorite movies and TV series. Personal lists (likes, watch lists, have watched, dislikes) with shareable links

Home Page: https://didyousee-4b593.web.app/

HTML 1.56% Vue 46.18% TypeScript 28.66% CSS 23.60%

movies search-engine watchlists web webapp

didyousee's Introduction

didyousee

Website URL
Project description
APIs
Background
Progress (what we have done so far)
Planning (what we still plan to do)
Files
- File structure
- File descriptions
Installation
- API keys
- Dependencies
Developers

Website URL

https://didyousee-4b593.web.app/

Project description

An intuitive and modern web app where you can discover, share and organize your favourite movies and TV series. Personal lists (likes, watchlists, have watched, dislikes) with shareable links

APIs

Background

This was a group project for the course DH2642 Interaction Programming and the Dynamic Web at KTH Royal Institute of Technology. The project duration was about ~3 months.

Progress (what we have done so far)

Currently, we've implemented the following:

Basic layout (HTML & CSS): Home, Result, Profile, Login, Register
Basic routing (Vue router)
API call from TMDB
Firebase hosting and deployment
User authentication via Auth.js/Auth0/Firebase
Search functionality, with filters
Profile page with personal lists (liked, watchlist, have watched, dislikes)

Planning (what we still plan to do)

We plan to implement the following:

Improved UX/UI and usability
Improved accessibility
Shareable lists via URL and exportability of lists (CSV, JSON, etc.). Implemented partially in a PR.

Files

File structure

.
├── 404.html
├── README.md
├── firebase.json
├── index.html
├── package-lock.json
├── package.json
├── server
│   ├── controllers
│   │   └── models
│   │       └── routes
│   ├── firebase.ts
│   ├── index.ts
│   ├── middleware
│   └── server.ts
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── didyousee.svg
│   │   ├── icons8-google.svg
│   │   ├── no-backdrop.svg
│   │   ├── no-content.svg
│   │   ├── no-poster.svg
│   │   └── tmdb_alt_short_blue.svg
│   ├── components
│   │   ├── CarouselCast.vue
│   │   ├── CarouselMedia.vue
│   │   ├── CastCard.vue
│   │   ├── Filter.vue
│   │   ├── ListCard.vue
│   │   ├── MediaCard.vue
│   │   ├── ReviewCard.vue
│   │   ├── SearchBar.vue
│   │   └── WatchProviders.vue
│   ├── firebaseConfig.ts
│   ├── main.ts
│   ├── model
│   │   ├── apiConfig.ts
│   │   ├── apiEndpoints.ts
│   │   ├── model.ts
│   │   └── promiseHandler.ts
│   ├── presenters
│   │   ├── AboutPresenter.vue
│   │   ├── CastPresenter.vue
│   │   ├── ContentPresenter.vue
│   │   ├── HomePresenter.vue
│   │   ├── ListPresenter.vue
│   │   ├── LoginPresenter.vue
│   │   ├── PageNotFoundPresenter.vue
│   │   ├── ProfilePresenter.vue
│   │   ├── RegisterPresenter.vue
│   │   ├── ReviewsPresenter.vue
│   │   └── SearchResultsPresenter.vue
│   ├── router
│   │   └── routes.ts
│   ├── style.css
│   ├── types
│   │   └── types.ts
│   ├── utils
│   │   └── utils.ts
│   ├── views
│   │   ├── AboutView.vue
│   │   ├── CastView.vue
│   │   ├── ContentView.vue
│   │   ├── HomeView.vue
│   │   ├── ListView.vue
│   │   ├── LoginView.vue
│   │   ├── PageNotFoundView.vue
│   │   ├── ProfileView.vue
│   │   ├── RegisterView.vue
│   │   ├── ReviewsView.vue
│   │   └── SearchResultsView.vue
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

File descriptions

File/Folder	Description
404.html	Error page
README.md	Readme file
firebase.json	Firebase configuration file
index.html	Main HTML file
package-lock.json	Dependency file
package.json	Package configuration file
server/	Server folder
server/controllers/	Controllers folder
server/controllers/models/	Models folder
server/controllers/models/routes/	Routes folder
server/firebase.ts	Firebase setup file
server/index.ts	Server entry point
server/middleware/	Middleware folder
server/server.ts	Server configuration file
src/	Source folder
src/App.vue	Main Vue component
src/assets/	Assets folder
src/assets/didyousee.svg	Asset file
src/assets/icons8-google.svg	Asset file
src/assets/no-backdrop.svg	Asset file
src/assets/no-content.svg	Asset file
src/assets/no-poster.svg	Asset file
src/assets/tmdb_alt_short_blue.svg	Asset file
src/components/	Vue components folder
src/components/CarouselCast.vue	Vue component
src/components/CarouselMedia.vue	Vue component
src/components/CastCard.vue	Vue component
src/components/Filter.vue	Vue component
src/components/ListCard.vue	Vue component
src/components/MediaCard.vue	Vue component
src/components/ReviewCard.vue	Vue component
src/components/SearchBar.vue	Vue component
src/components/WatchProviders.vue	Vue component
src/firebaseConfig.ts	Firebase configuration file
src/main.ts	Main TypeScript file
src/model/	Model folder
src/model/apiConfig.ts	API configuration file
src/model/apiEndpoints.ts	API endpoints file
src/model/model.ts	Model file
src/model/promiseHandler.ts	Promise handler file
src/presenters/	Vue presenters folder
src/presenters/AboutPresenter.vue	Vue presenter
src/presenters/CastPresenter.vue	Vue presenter
src/presenters/ContentPresenter.vue	Vue presenter
src/presenters/HomePresenter.vue	Vue presenter
src/presenters/ListPresenter.vue	Vue presenter
src/presenters/LoginPresenter.vue	Vue presenter
src/presenters/PageNotFoundPresenter.vue	Vue presenter
src/presenters/ProfilePresenter.vue	Vue presenter
src/presenters/RegisterPresenter.vue	Vue presenter
src/presenters/ReviewsPresenter.vue	Vue presenter
src/presenters/SearchResultsPresenter.vue	Vue presenter
src/router/	Vue router folder
src/router/routes.ts	Router configuration file
src/style.css	Main CSS file
src/types/	TypeScript types folder
src/types/types.ts	TypeScript types file
src/utils/	Utility folder
src/utils/utils.ts	Utility file
src/views/	Vue views folder
src/views/AboutView.vue	Vue view
src/views/CastView.vue	Vue view
src/views/ContentView.vue	Vue view
src/views/HomeView.vue	Vue view
src/views/ListView.vue	Vue view
src/views/LoginView.vue	Vue view
src/views/PageNotFoundView.vue	Vue view
src/views/ProfileView.vue	Vue view
src/views/RegisterView.vue	Vue view
src/views/ReviewsView.vue	Vue view
src/views/SearchResultsView.vue	Vue view
vite-env.d.ts	Typescript definition file for Vite
tsconfig.json	Typescript configuration file for the project
tsconfig.node.json	Typescript configuration file for Node.js
vite.config.ts	Configuration file for Vite

Installation

To setup the site locally, install the packages and build the project.

npm i
npm run build

To get a development build, run npm run dev. This will run the server and the typescript checker in parallel.

API Keys

Not included in the repository are the private api keys. To run the code locally you will need to acquire a TMDB api key and set up your own firebase and provide its config. The TMDB api key is provided through the environment, e.g. through a .env file in the root of the directory. The key is named VITE_TMDB_API_KEY.

The template of the firebase config file is. It is expected to reside at src/firebaseConfig.ts:

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth'
import { getDatabase } from "firebase/database";

const firebaseConfig = {
// Insert your config here
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

//initialize firebase auth
const auth = getAuth()

const db = getDatabase(app)

export { app, auth, db }// Import the functions you need from the SDKs you need

Dependencies

{
  "name": "didyousee",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "concurrently \"vue-tsc --watch\" \"vite\"",
    "dev-no-tsc": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@types/numeral": "^2.0.2",
    "@vitejs/plugin-vue": "^4.1.0",
    "@vue/compiler-sfc": "^3.2.47",
    "autoprefixer": "^10.4.14",
    "concurrent": "^0.3.2",
    "pinia": "^2.0.33",
    "postcss": "^8.4.21",
    "prettier": "^2.8.7",
    "typescript": "^4.9.3",
    "vite": "^4.2.1",
    "vue": "^3.2.36",
    "vue-tsc": "^1.2.0"
  },
  "dependencies": {
    "@google-cloud/firestore": "^6.5.0",
    "@splidejs/vue-splide": "^0.6.12",
    "@types/express": "^4.17.17",
    "auth-js": "^0.0.16",
    "axios": "^1.3.5",
    "better-logging": "^5.0.0",
    "chart.js": "^4.2.1",
    "concurrently": "^8.0.1",
    "cors": "^2.8.5",
    "dompurify": "^3.0.2",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "firebase": "^9.20.0",
    "fuse.js": "^6.6.2",
    "fuzzy": "^0.1.3",
    "numeral": "^2.0.6",
    "vue-router": "^4.1.6"
  }
}

Developers

didyousee's People

Contributors

Stargazers

Watchers

didyousee's Issues

Modify back button from result page and add search bar in nav

Is your feature request related to a problem?

A back button within the result page creates an unappealing layout which would reduce the UX and quality of the UI

Describe the solution you'd like

Add a searchbar within the navbar which allows for quick search, no need to "going back" from the result. The back button should go back to the search results, not the home page

Describe alternatives you've considered

none

Additional context/notes

none

Add Cloudflare to handle DDoS mitigation, rate limiting etc

Is your feature request related to a problem?

nope

Describe the solution you'd like

Add Cloudflare to mitigate DDoS, add rate limiting etc

Describe alternatives you've considered

none

Additional context/notes

none

Create list pages (list page for each type of list)

Is your feature request related to a problem?

nope

Describe the solution you'd like

Add list pages for liked, watchlist, seen, disliked. This list pages would be identical in how they look, but serve different data. These list pages should have shareable links, which allow other users to reach this lists and/or export options such as CSV, JSON etc.

Describe alternatives you've considered

An alternative would to either not allow sharing of list links and only havce the export option, vice versa or have none of the options. Though, enabling these features are inline with improved UI/UX based on previous competition and user research made by the tema.

Additional context/notes

none

Revamp the search functionality + filtering to parse input such as movie, series, genre

Is your feature request related to a problem?

The API does not features alot of parameters for different types of results (not a lot of "filters")

Describe the solution you'd like

Allow users to directly search for a movie title, series title and genre. We parse this and fetch the result based on that. We can then on the search results page have a filter for language, year and sorting by title, year --> ASC and DSC

Describe alternatives you've considered

none

Additional context/notes

This would make it easier to implement filtering, without having to include it within the actual search bar (easier layout). This also streamlines the search interaction for both mobile and desktop

Add statistics

Is your feature request related to a problem?

nope

Describe the solution you'd like

A statistics system that would track users stats such as "how many times users has used your list", "what is the total watch duration of X list" etc. This would work very well together with issue #15

Describe alternatives you've considered

Additional context/notes

Create a login page

Is your feature request related to a problem?

nope

Describe the solution you'd like

A login page to allow users to have personal accounts, with their personal content (movie/series lists)

Describe alternatives you've considered

An alternative would be to use Google, Apple or any other OAuth provider to make it easier to login

Additional context/notes

none

Add user authentication and storage of user credentials (hashed+salt)

Is your feature request related to a problem?

nope

Describe the solution you'd like

Add user authentication that stores user credentials in a database, where the credentials are hashed and salted (the passwords).

Describe alternatives you've considered

none

Additional context/notes

none

Use Composition API and separate concerns into views and presenters

Is your feature request related to a problem?

Needed to follow MVP architecture

Describe the solution you'd like

Separate views into views and presenters, and use the Composition API

Describe alternatives you've considered

none

Additional context/notes

none

Create a result page (movie / series)

Is your feature request related to a problem?

nope

Describe the solution you'd like

Add a result page, which showcases either a movie or a series. The page should contain a poster, title, description/overview, genre, official language and other relevant information. The page should have a clear and visually pleasing layout, which makes it easy to understand the information and navigate through it. There should be easy to reach buttons, that allow users to add said content into one of their personal lists (liked, watchlist, seen, disliked). The buttons should showcase their state clearly.

Describe alternatives you've considered

none

Additional context/notes

none

Implement user stats with charts

Is your feature request related to a problem?

none

Describe the solution you'd like

We can use Chart.js, a npm module (https://www.chartjs.org/docs/master/) to generate our charts

Describe alternatives you've considered

none

Additional context/notes

none

Create a profile page (with lists)

Is your feature request related to a problem?

nope

Describe the solution you'd like

Add a profile page, which allows users to view their own personal page. This page would consist of a user profile picture, some user statistics and clickable cards that route the user to their respective lists

Describe alternatives you've considered

An alternative would be to have the list buttons in the navbar. But even then, the user data would have to be stored in the backend, so a user object of some sort would have to be created anyway. So creating a profile page makes it easier and more clear (usability wise) for users.

Additional context/notes

none

Implement filtering in search (filtering view)

Is your feature request related to a problem?

nope

Describe the solution you'd like

Add a filter view in the search bar, which routes to a new view. This view would allow users to select different filtering options using user input such as buttons, radio buttons, input fields etc. The view should clearly show the user what each filtering option does, what is toggled ON and OFF. The view should make it clear that the user can easily clear the enabled options, and then apply them to the search. After applying them, the user should be routed to the search result view. The filtering options should be remembered so that they are easily changed.

Describe alternatives you've considered

none

Additional context/notes

none

Users with set profile pictures

Is your feature request related to a problem?

Requirement to save profile pictures

Describe the solution you'd like

Let users pick from a set amount of avatar pictures (16).

Describe alternatives you've considered

none

Additional context/notes

none

Design improvements

Is your feature request related to a problem?

Need to make the UI/UX more professional

Describe the solution you'd like

Gradient at home page, backdrops on result pages. No bold text by nav and titles. More padding/margin by nav. Min font size to be 12 pt (in rem). Typography change?

Describe alternatives you've considered

none

Additional context/notes

none

Create a database to store user data

Is your feature request related to a problem?

nope

Describe the solution you'd like

Add a database solution, such as a JSON database to store user data. User data would consist of username, lists of movies/series and optionally some statistics. An example would be to use Firestore in Firebase.

Describe alternatives you've considered

none

Additional context/notes

none

Implement infinite scrolling over pages

Is your feature request related to a problem?

Using page buttons reduces efficiency of use since it requires additional input to view more content. To see content the user has viewed before, this requires them to go through pages.

Describe the solution you'd like

Add infinity scrolling, once the end of the list is in view of the user, increment currentPage and fetch the next page

Describe alternatives you've considered

none

Additional context/notes

none

Back Button on Result Page/View

Is your feature request related to a problem?

The user's previous input may be lost when they navigate away from the result page/view.

Describe the solution you'd like

Implement a back button on the result page/view that allows users to easily navigate back to the input page/view, ensuring that their previous input is saved. This can be a simple button or link that takes users back to the previous page (Home).

Add achievements

Is your feature request related to a problem?

nope

Describe the solution you'd like

A achievement system for things such as "shared your first link", "searched up to 1000 times", "added X many things to this list". This would fit together very well with a statistics system

Describe alternatives you've considered

none

Additional context/notes

none

Add watch providers

Is your feature request related to a problem?

nope

Describe the solution you'd like

Add watch providers to result page

Describe alternatives you've considered

none

Additional context/notes

By using watch providers we need to show "a reference or logo on each media item" (https://www.themoviedb.org/talk/60355e30a284eb003da676f2)

You are to link to the TMDB watch page, and attribute JustWatch. (https://www.themoviedb.org/talk/62eb3ba2273648005d9c8845)

Implement search and a search results page

Is your feature request related to a problem?

nope

Describe the solution you'd like

Add a search feature that is accessed from the home page. This search feature would allow users to search for a movie/series title, which then uses fuzzy search or query parameters to find a closer match to what the user is searching for. The search page should also feature a filter view.

Describe alternatives you've considered

none

Additional context/notes

none

Lists feature with customs lists

Is your feature request related to a problem?

nope

Describe the solution you'd like

To enhance the list system, one could implement so that there are 4 default lists, and then functionality to create custom lists (maybe cap it at 20). These lists can be renamed

Describe alternatives you've considered

An alternative would not to add this, and simplify it

Additional context/notes

Adding custom lists adds much more user freedom and creativity, but it also requires a proper way to view this lists in your user page and a proper way to add them, which would require some sort of drop down of sorts to look through all the lists to add X content to said list.

Error 404 for dummy.svg in web console

Expected behaviour

Should not show 404 in the web console

Actual behaviour

Shows a 404 error in the web console

Possible solution

Must double check how we fetch the dummy.svg

Steps to reproduce the problem

Go to homepage
Open web console
See error in console

Additional context/notes

none

Keep the previous search alive once you go back from a content page to all the search results

Is your feature request related to a problem?

State is not maintained between searching, clicking a result and going back

Describe the solution you'd like

Implement KeepAlive

Describe alternatives you've considered

none

Additional context/notes

none

Create a register page

Is your feature request related to a problem?

nope

Describe the solution you'd like

A register page, which allows users to register their account

Describe alternatives you've considered

Allow users to directly login via Google, Apple or any other OAuth provider to make it easier for users to register

Additional context/notes

none

Increase width of search bar

Is your feature request related to a problem?

Need of improvement to search bar and UI

Describe the solution you'd like

Increase width of searchbar for increased UI/UX

Describe alternatives you've considered

none

Additional context/notes

nonw

Make design repsonive (mobile)

Is your feature request related to a problem?

The design is not adapted for mobile

Describe the solution you'd like

Implement solutions such as clamp(), max and min width, media queries to adapt for mobile

Describe alternatives you've considered

none

Additional context/notes

none

Create a home page

Is your feature request related to a problem?

nope

Describe the solution you'd like

To create a functional and visually pleasant home page. The home page should enable routing between different views (such as the profile page), allow for search of movies/series, apply filters to the search, view recommended movies/series. The home page should also include trivia/fun facts below the home page title.

Describe alternatives you've considered

An alternative would be a more basic home page, with only the search feature (together with filters).

Additional context/notes

none

petrusmatiros / didyousee Goto Github PK

didyousee's Introduction

didyousee

Table of Contents

Website URL

Project description

APIs

Background

Progress (what we have done so far)

Planning (what we still plan to do)

Files

File structure

File descriptions

Installation

API Keys

Dependencies

Developers

didyousee's People

Contributors

Stargazers

Watchers

didyousee's Issues

Is your feature request related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context/notes

Is your feature request related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context/notes

Is your feature request related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context/notes

Is your feature request related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context/notes

Is your feature request related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context/notes

Is your feature request related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context/notes

Is your feature request related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context/notes

Is your feature request related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context/notes

Is your feature request related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context/notes

Is your feature request related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context/notes

Is your feature request related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context/notes

Is your feature request related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context/notes

Is your feature request related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context/notes

Is your feature request related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context/notes

Is your feature request related to a problem?

Describe the solution you'd like