dev: Used to generate GraphQL types and run the Next server at the same time.
build: Used to build the Next server.
start: Used to start the Next server. (Optionally we can change this to use next export to save the server as HTML)
lint: Used to lint the project.
codegen: Used to generate codegen files.
codegen:watch: Used to automatically generate codegen files when files change.
All packages added should have their reason added here. This project should have minimal dependencies.
It's easiest to presume @types/* sub-packages are for TypeScript type definitions.
TypeScript is a typed variant of JavaScript that nudges developers closer to developing more terse code with its static type checking.
- react-dom (For converting React components to HTML)
- @types/react
- @types/react-dom
React is used as a common base to build the UI of the project. It was chosen as it has a strong ecosystem and community-support network.
- @types/node
- server-only (for telling you off when you try import the wrong thing)
NextJS is used in this project to allow easy routing with React, API routes, and integration with TypeScript. This is the main glue that allows us to develop the frontend and backend on the same repository.
- @emotion/react (for styling) [Do we really need this?]
- @emotion/styled (for styling)
- @mui/icons-material (for icons) [Do we really need this?]
Material UI is chosen as a base template to help build out the styles and functionality of components in an opinionated way across the site. When you build components for this site you should ALWAYS use Material UI components before even thinking about creating your own component. This is to prevent 1-million different implementations of a modal.
- @prisma/client (for interaction with prisma from the frontend)
Prisma is our interface with the database that handles the schema, migrations, queries, and connection. This will be the only way you interact with the database in this project (aside from viewing the sqlite database in a viewer while testing).
The query language used to interact with our Apollo server. Heavily simplifies querying and types for a better developer experience.
- @as-integrations/next (for integration with NextJS)
Our GraphQL server that heavily simplifies querying and types.
A hook-based approach to interacting with the graphql API. Anywhere you need to interact with the api should use this in the form of either useQuery (get something) or useMutation (change something).
A wrapper for the yt-dlp binary that saves us a whole bunch of pain when operating on a number of operating systems.
For reading & parsing mime types without having to write our own parser & types.
@todo - We should replace this with some FFMPEG wrap. For reading metadata from audio files without having to write our own parser.
For reading image dimensions without having to write our own parser.
For reading the magic number of files to get mime types and extensions.
For getting files as streams compatible with file-type.
A nice UI for playing audio. We can probably remove this once we focus more on developing our own UI.
- eslint-config-next (for NextJS specific linting rules)
- eslint-plugin-unused-imports (for automatically removing unused imports)
- eslint-plugin-validate-jsx-nesting (for validating JSX nesting such as
<p>in<div>)
To force you to develop correctly by introducing linting rules and more static tests.
A large collection of hooks you would eventually make anyway but it gets maintained for free by someone else 🤑💰💲💸.
Before introducing a new hook, check it doesn't already exist in this library.
Easily do deep merges of objects and arrays. Quick and easy implementation without having to upkeep it or worry about performance.
- @graphql-codegen/client-preset (support for client-side code generation consumed in @apollo/client)
- @graphql-codegen/typescript (for generating types)
- @graphql-codegen/typescript-resolvers (for generating resolver types)
- @parcel/watcher (for watching files for changes and re-generating codegen files)
Used to generate types for the GraphQL API interface. This is so we don't have to re-write the graphql types in TypeScript.
Used to run multiple scripts at once. For example, we want to run codegen and our Next server at the same time during development.
For injecting scripts before you commit to make sure you aren't committing garbage.
To inject scripts onto specifically the staged files in git.
To format your code on commit so we don't have to worry about people conforming to a specific style. You will conform!
- @types/jest
- ts-jest (transformer to allow jest to work with TypeScript)
- jest-mock-extended (for mocking Prisma for tests. Implementation follows this)
To test our application works as expected and easily detect bugs.