ytsruh / homethings Goto Github PK

Add the ability to send feedback from the web or mobile apps that can be stored in database

Let users add favourites & show favourites on homepage. Add additional model that links to each user

Fetching all data is repeated through the app so should be abstracted out to a custom hook

Currently having to use a flag in next.config.js to ignore TS build errors.

Types/Interfaces need declaring in the API files

Upgrade to next major version of NextJs mainly to make use of nested layouts

https://nextjs.org/blog/next-13

Possible option:
https://www.youtube.com/watch?v=ZeNyjnneq_w&list=WL&index=59&t=959s

https://www.prisma.io/

Need to test if Prisma works nicely with CosmosDB

https://www.themoviedb.org/?language=en-GB

When viewing all episodes a user needs to filter by season as the list is unsorted and not easy to use

Currently the app uses a client side fetch and loading state. This can be replaced with getServerSideProps()

Using mongoose to access database but Prisma is a more robust and long term solution. Can also add Schema validation by using Zod library

Using Prisma with serverless runtime is slowing everything down. Drizzle is expected to be faster

https://orm.drizzle.team/kit-docs/conf

Add a todo list as a mini app

Add Favicon, robots.txt & SEO updates

Let User upload profile picture & reset password

Need to analyse if this is worth it and how much effort is involved in using React Server Components

Have currently built all logic for the API's but currently these are accessed with client side rendering. Would be better to break out the logic into function exported from the API file so it can be used in getServerSideProps

Good example of this would be fetching movies & shows data

Use https://www.gatsbyjs.com/starters/hasura/gatsby-gitbook-starter with blank/orphaned branch

Full warning message:
"warn(prisma-client) There are already 10 instances of Prisma Client actively running."

Explanation & solution can be found here:
https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices

All GET requests should make use of a cache where possible as the homeflix data is not prone to change.

https://regbrain.com/article/cache-headers-express-js

Cannot remove a favourite due to currently making a delete request with a body. See this article:
https://stackoverflow.com/questions/69761580/keep-getting-a-delete-400-bad-request-with-my-rest-api

Need to refactor to either use a PUT / PATCH or just send the favourite 'id' as a url param

To do list

• Adding support for books
• Updated Next 13
• Removed TRPC
• Added Prisma JSON feature flag
• Add cache layer to API
• Sort out dual auth for NextAuth & Custom JWT
• Zod & ENV variables
• Add Types to API from Prisma models

See if this can be added to the app - https://next-auth.js.org/

Using the existing credentials with credentials provider could be a viable option

Add GraphQL endpoint to fetch movies & shows

Currently set to false and should be moved to true to ensure type safety at build time

Let user add a profile picture

Mobile app makes use of Github Octicons, update the web app to the same.

Should replace Default Props

https://www.npmjs.com/package/prop-types

Allow users to configure settings to enable/disable certain parts of the app they do or do not want.

Possible solution:

• Add to user object and store in local storage when logging in.
• Can update local storage & API on update/changes
• Settings deleted on logout
• Settings overwritten on login

Currently user has to view all movies which is less than ideal experience

Add a helper function by using Zod to import and validate env variables

Not all TV shows are in database at the moment

Update app to allow a user to switch to dark mode .

https://stackoverflow.com/questions/68667437/create-new-color-scheme-for-dark-light-mode-in-bootstrap-sass/68670276#68670276

Use the Zod library based on the database models to give type safety to the API routes

The create users route and function does not hash passwords & therefore a user cannot login

Currently the table is just one list. Should be able to filter based on title and/or description

Introduce TanStack tabke to the project
https://tanstack.com/table/v8

Currently there is no feedback to the user when their login fails, the page just reloads.

Show banner/notification to say it failed

Env variable for Digital Ocean is correct but the path was set in the code.

After changing the auth to work for both web & mobile the desktop app now has a small bug. When a user is not logged in and tries to visit the homepage, the app now throws an error instead of redirecting the user to the login page.

There is a getServerSideProps request on the homepage which is creating the error. Best solution is to use the standard auth items from Next-Auth on these serverside functions since they can only be accessed using NextJS & serverside - eg the mobile app will not be able to not be able access them do they dont need auth for that.

Also need to add CI/CD for deployment

• Add 'Accounts' model with 'Users'. Current approach doesn't allow items to be shared across multiple users
• Add 'Documents' model. Important files that can be shared across accounts.
• Remove movies & shows data & models
• Remove references to 'any' in TypeScript

App is curently using a seperate CosmosDB / MongoDB instance with no real need. Switch to MySQL to make use of existing database server with own user.

Use Data Factory for data migration

Current login functionality just uses standard state to manage the auth process and stores in local storage. Better to use Context API and extrapolate all logic into a single file/component.

Create endpoint to resgister when user has clicked on video play button

https://trpc.io/