Giter VIP home page Giter VIP logo

scuffedmdb's Introduction

ScuffedMDB

Version

Issues contributors Github Stars Checks Passing License

Table of Contents

Click to expand

Introduction

Welcome to ScuffedMDB's™ code repository. This website is designed to be used by friend groups to rate movies watched together :).

To follow any updates there is a Changelog

This repo is licensed under an MIT license, and can therefore be modified and distributed as stated. However, if you do host this yourself, please include some creditation to my github somwhere on the page as a link to this repo / or my homepage. Not only will this help me out, but it allows others to host their own versions if they wish!

Thank you to @olig89 for all of the ideas and user testing!

Environment variables

Required

Name Description Example
NEXT_PUBLIC_APP_URI The URI of the app https://smdb.mikeroph.one
OWNER_ID Owner's discord ID 234908230323
CLIENT_ID Discord Application CLIENT_ID on console 2398040239849
CLIENT_SECRET Discord Application CLIENT_SECRET on console \_adsiojweiurnAWeAFDS23
JWT_H512 Used to sign token -> jose newkey -s 256 -t oct -a HS512 {"kty":"oct","kid":"-token-","alg":"HS512","k":"-token-"}
JWT_CODE Random string used to encode token dsajoi234opiasdijofp
MONGODB_URI Connection string to mongoDB mongodb://localhost:27017/scuffedmdb
MOVIE_API_KEY TMDB v3 Api Key q9uqq9emdasDejwo4

Not required

Name Description Example
ALLOWED_USERS A comma separated list of discord ids representing users that can log into the website. If left blank, all users can login. 234908230323,234908230324
WEBHOOK_URL Endpoint for the discord_bot webhook https://bot.mikeroph.one
WEBHOOK_TOKEN Random string used to authenticate movie websites request, required if using the webhook dsajoi234opiasdijofp
COLOR_THEME Color theme for the website, options: chakra docs purple
SECONDARY_COLOR_THEME Secondary accent color of the website, same options as COLOR_THEME cyan
NEXT_PUBLIC_SITE_NAME Name of the website, default is ScuffedMDB ScuffedMDB
NEXT_PUBLIC_SHORT_SITE_NAME Short name of the website, default is SMDB SMDB

How to host this yourself:

Setting up the local environment

Click to expand It is beneficial to set up a local environment to make quick changes without having to wait for the website to rebuild on vercel.
  1. Fork this repository at the top right of this page.

  2. Clone to your computer

git clone https://github.com/<YOUR GITHUB USERNAME>/scuffedmdb

cd scuffedmdb

  1. Rename .env.example, to .env.local and enter the local address: http://localhost:3000 n.b Do not include a / at the end of your domain

.env.local NEXT_PUBLIC_APP_URI=http://localhost:3000

  1. Create an account on discord.com and go to the developer console.
  2. Create a new application and copy and past Client ID and client secret into the respective fields in .env.local
CLIENT_SECRET=_H8z9NKhasaido_diddada4SgqjQj
CLIENT_ID=24534589043255834

(these aren't mine before you try -_-)

  1. Go to the oauth tab of your new discord application and add your production and development callback urls to the redirect tab. For example mine are: http://localhost:3000/api/auth/callback/discord and https://smdb.mikeroph.one/api/auth/callback/discord - /api/auth/callback/discord
  2. Return to your .env.local file and enter a random string into JWT_CODE which is kept secret (just to encrypt the user data in the cookie).

JWT_CODE=SlOQwlMMnwVY3ypfNLFOtlEauH5Ra2DE

and again

  1. I recommend using cloud atlas to host your mongo database, but just create an account and a m.0 db, (Vercel does not allow you to set location on the free plan, and its normally in NA, I recommend setting the mongo server to NA as well, it is slightly snappier). Also ensure the the ip address in network access is set to 0.0.0.0, as this will allow any server to connect (also why you need to create a user with a strong password), this is because we dont know the IP of the vercel instance that our server will be booted up on. Next copy the connection uri and paste into the .env.local file and append the database name.

MONGODB_URI=<connection string>/local-movie-database

  1. Go to https://tmdb.org and create an account, then go to the api settings under your profile and copy the v3 key and paste it into your .env.local file under MOVIE_API_KEY

MOVIE_API_KEY=<TMDB API KEY>

  1. Run npm run dev in your terminal in the project directory.

  2. Stonks! ... if you are having trouble feel free to submit an issue

Setting up the production environment

Click to expand

Make sure you have a fork of the repository by clicking the fork button top right

  1. Login to https://vercel.com/ with your github.

  2. Go to the homepage and create new project, select 'ScuffedMDB' and click import.

  3. All the default settings are as should be, just click deploy. (Be warned it wont work just yet, we still need to provide our environment variables!)

  4. Once deployed, click the big 'Go to dashboard' button, follow the tabs at the top to 'settings', then click environment variables on the left hand menu. Here you can add all of the environment variables from your .env.local file, one at a time using the box at the top.

  5. CLIENT_ID, CLIENT_SECRET, OWNER_ID, NEXTAUTH_URL, and MOVIE_API_KEY will be the same as your local environment.

  6. MONGO_URI should use a production database that is not the same as your local environment so set the database to a different name.

MONGODB_URI=<connection string>/production-movie-database

  1. NEXT_PUBLIC_APP_URI needs to be the domain of your project on vercel. You can set a custom domain as shown in vercels' docs, but you need to click on your project to see the default domain, normally something like https://scuffedmdb.vercel.com (refer to 6 of setting up local environment to add domain to discord callback if you havent already)

NEXT_PUBLIC_APP_URI=https://smdb.mikeroph.one

  1. Create a HS512 compliant code using the following command:

npm install -g node-jose-tools

jose newkey -s 256 -t oct -a HS512

Copy the whole output and paste into the .env.local file under 'JWT_HS512'.

  1. Finally generate a random string for the JWT_CODE env variable for production and enter into the Vercel settings panel.

  2. Go back to the overview tab and click redeploy.

  3. Thats it! your very own live movie rating website. The world is yours ... and everytime you push a change to your repo, it automatically redeploys (<3 vercel).

Using the discord bot with the website:

Visit the repo - ScuffedMDB-Bot containing the bots code and use the readme to integrate with the website. (Make sure the website is setup and working before trying this out).

N.B The bot does not run on vercel, you have to find your own host, self-hosting is a good option if you have a computer running 24/7, if not I would recommend a cheap VPS.

TODO:

  • Fix bunch of errors to do with incorrect hook usage & react-table. ;(
  • Add pagination to the API & FrontEnd cards
  • Add tests if you wanna learn how to do em.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Michael Hall

💻 🖋 📖 🎨 🚧 👀

Oli Gill

🐛 🤔 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

scuffedmdb's People

Contributors

allcontributors[bot] avatar mah51 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

scuffedmdb's Issues

Review page anchoring on mobile

When you click view on a film, have it anchor to the top-of-page on load.

Currently it will change page but still be scrolled down to where you were on grid page (e.g. could be linked to the comment section immediately)

Review modal auto-popup via url

Be able to direct link a film page and have the review modal automatically pop up on load.

Potentially use url parameters to keep life easy. Something like "?review=true"

Disable/hide "Add Review" for Viewers (those without review rights)

For users without the review priviledge, you can still see (and click) the "+ Add Review" buttons - even though they dont trigger an action.

Potential solution: Either "isDisabled" the button (so it's greyed out) or replace with "No Review" text or hide button where possible.

Rich(er) text input

Investigate rich text input/storage in mongo/output in comments.

  • Ability to capture and show new paragraphs

  • Can include the basic Bold/Italic/Strikethrough

  • No need for hints/UI as long as standard entry style works (same as slack/discord/github e.g. *word* and _word_ )

Preserve ingress link when user needs to auth

If a user clicks a direct link (e.g. to a film page), but they need to log-in to view, they get put on the front page after auth is complete.

I think this is router-history functionality but not sure.

Make ScuffedMDB a proper PWA

Description

Allows for:

  1. Users to install on devices
  2. Users to access offline (will also therefore help with the perception of load times)
  3. Ability to get notifications (e.g. new film)

In relation to...

Other

Justification

Is cool tech, and easy to implement at the most basic level given you've already done most of the hard work with Lighthouse.

Proposed Solution

No response

Additional Information

No response

Ability to compare reviews with other users

Description

Not sure how this would work but could be interesting to compare how I feel about films versus one/more other reviewers.

This would also lend itself to any future comparison features

Button on someones profile to "compare with"

In relation to...

Other

Justification

fun

Proposed Solution

No response

Additional Information

No response

Site-wide next-seo checkup

Seems to no longer work in a few places again - prob best to take it out and plan it out properly with defaults + hierarchies for each "page"/"screen" type.

Set a new film via API

Description

There may already be a way to do this but it would be great if there was a way to add a new film with an API call

In relation to...

API route (/pages/api/*)

Justification

Would allow automation to take over the only admin task of running it :D

Proposed Solution

  1. Could be by supplying the TMDB ID
  2. Could also be by supplying the Name+Year

I guess #1 is least hassle to implement, basically shortcutting your searching pipeline

Additional Information

No response

Settings page for website config

Description

e.g. ALLOWED_USERS, COLOR_THEME, SITE_NAME & SHORT_SITE_NAME.

In relation to...

Other

Justification

changing env variables on vercel requires a re-deploy which may become a drag when regularly adding users to the website or changing theme etc.

Proposed Solution

Mongoose collection with one document containing settings. Have a web page /settings accessible by admins to change the settings.

Additional Information

No response

"Edit review"

Have the "Add Review" buttons be displayed as "Edit Review" if a previous review by user is in db

Investigate cog button usage on film page

Potentially change cog button to be:
Separate buttons:

  • Back button
  • Share
  • Add Review

Then either have admin buttons or return the cog of justice to condense admin options

Swap ordering of users in userlist page

Show newest users at the top by default, or allow option to sort newest-first (as they are the most likely to need attention)

Also a good place to test pagination

Public Page

Description

Ability to view the films+scores without signing in.

Could anonymise all names & hide comments to keep things kosher with the private group.

In relation to...

Other

Justification

Would be easier to sell the idea if non-users could see what actually goes on behind locked doors

Proposed Solution

No response

Additional Information

No response

Genre pages

When clicking on any of the film genre's, it takes you to a page of all the film's filtered by that genre (not just as primary genre but any that contain it in the array).

Genre page design could be very close/identical to the current main film grid/table, with the "We have reviewed XX films" title replaced with the genre name.

Mongo DB error next auth

Description

When I tried to deploy mu own version of this, I get this error:

[next-auth][error][adapter_connection_error] 
https://next-auth.js.org/errors#adapter_connection_error MongoError: bad auth : authentication failed
    at MessageStream.messageHandler (/workspace/dashboard/node_modules/mongodb/lib/cmap/connection.js:299:20)
    at MessageStream.emit (node:events:513:28)
    at MessageStream.emit (node:domain:489:12)
    at processIncomingData (/workspace/dashboard/node_modules/mongodb/lib/cmap/message_stream.js:144:12)
    at MessageStream._write (/workspace/dashboard/node_modules/mongodb/lib/cmap/message_stream.js:42:5)
    at writeOrBuffer (node:internal/streams/writable:391:12)
    at _write (node:internal/streams/writable:332:10)
    at MessageStream.Writable.write (node:internal/streams/writable:336:10)
    at TLSSocket.ondata (node:internal/streams/readable:754:22)
    at TLSSocket.emit (node:events:513:28)
    at TLSSocket.emit (node:domain:489:12)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at TLSSocket.Readable.push (node:internal/streams/readable:228:10)
    at TLSWrap.onStreamRead (node:internal/stream_base_commons:190:23) {
  ok: 0,
  code: 8000,
  codeName: 'AtlasError'
}

Link to Reproduction

No response

Steps to reproduce

No response

Browser

No response

Operating System

  • macOS
  • Windows
  • Linux
  • IOS / Android

Additional Information

No response

Add option for brand logo

Can keep it optional like with .env SiteName so it defaults back to that, and if not then SMDB default.

Highlight the "current"/most recent film

Description

Make the current/most recent film more visually captivating when on the main page.

Good options:

  1. Making it a hero at the top (is how i used to do it) - e.g. "with image background" on here: https://pro.chakra-ui.com/components/marketing/heroes. Would position this above the "Watched X films" title text
  2. literally just different card styling, make the most recent one light purple with white text

In relation to...

Other

Justification

visually grab the attention and make a more satisfying call to action for reviewers

Proposed Solution

No response

Additional Information

No response

Anonymous Reviewers

Description

Ability for users to have a toggle in their profile page (by that i mean just the userpage but show some options if the user=currentuser).

Reviews would just display with "Anonymous" and default image (i'd be temted to keep the real discriminator though)

Bonus points if profile picture has different colours, based on discriminator maybe?

In relation to...

Other

Justification

Anonymity provides a shield for people to say what they really mean

Proposed Solution

No response

Additional Information

No response

imdb import

Description

adding 4500 seen movies is a bit dificult, a import would be great :)

In relation to...

A component

Justification

got to many seen movies in my life

Proposed Solution

No response

Additional Information

No response

Suggest Films for review

Description

Ability for reviewers to suggest films for future reviews.

Search imdb/tmdb (like the "add a film" functionality there already for the admin)

Have it go to a separate table/page in admin ui - could do some action buttons

Nice to have option for bot to notify a separate channel on submission

In relation to...

Other

Justification

fun

Proposed Solution

No response

Additional Information

No response

Back button on film page

Suggest a back button to the left of the cog button to (more obviously) signpost a way back to the main grid/list page

Minor tweaks to "Edit Review"

  1. The logic for changing the title works great with one exception; if you open the modal from a movie it defaults to Add, even if a previous review exists (and pre-populates) - potentially a different nesting of the if statements would be a quick fix.

  2. The "Add Review" button on the film page (in cog menu) remains as "add" even if you are editing a review, which is inconsistent. Having it switch to "Edit Review" with something like AiOutlineEdit as the alternative icon would complete the whole flow.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.