README.md

Intergallery, Media Storage and Management Tool

• Save and serve media, focused for self-hosting

Host the media with the server included and/or upload the media to the content server, and access them through the web UI.

Designed to be extensible, so that it can be used for any purpose.

Watch the video: youtu.be/F5Cwo4eiJpk

Repository Structure

intergallery-	Description	Technologies
The monorepo	Follows Conventional Commits	Turborepo, pnpm, ESLint
web-ui	The interface of the project	Vite, TypeScript, React, MUI, Redux (+RTK Query), Formik, Playwright (e2e testing), Figma (initial design)
server	Direct communication with UI and DB	NestJS (w/ Express.js platform), TypeScript, TypeORM, Passport.js, Swagger, FFMPEG, Docker
content-server	Micro service to serve content from different places	Express.js, TypeScript, sharp, Docker
proto-web-ui-angular	The prototype frontend with Angular	TypeScript, Angular, SASS, Angular Material, RxJS

Browse the source code here: github.dev/BerkeKaragoz/intergallery

Web UI

The frontend structure

  src/
    components/ - shared components
    hooks/ 
    lib/
    modules/ - Auth, Browse, Media, Source, User (includes views)
    redux/ - Has slices including the RTK Query API slice
    App.tsx - Creates the theme, provides the error boundary, mounts routes according to the app state
    index.tsx
    RoutesAuth.tsx - Routes to mount when the user is authenticated
    RoutesNonAuth.tsx - Routes to mount when there is no authentication
    theme.ts
  test/
    e2e/
    fixtures/
    global-setup.ts - Storage state is generated here
    test-consts.ts - Mostly for string constants

• Vite: Handles the bundling the application, along with a proxy
• TypeScript
• React
• MUI: Theming, components, styling. All used according to the material design system.
• Redux (+RTK Query): Redux-Toolkit handles the user transactions. RTK Query handles fetching the media to show with a good structure. It can handle caching with invalidation and data states.
• Formik: Formik is an important part of this application along with Yup. Most inputs leverage Formik's system with proper validation.
• Playwright: End to end testing in various browsers.
• Figma: Made the initial design with it

Screenshots

Starting with the initial Figma design:

Back to top

Server

The backend structure

src/
  auth/ - Authentication module that includes guards and strategies
  core/ - Shared decorators and DTOs
  file/ - File module that handles generating thumbnails, symlinks and files
  media/ - Media CRUD
  model/ - Database entities for TypeORM: media, session, source and user
  user/ - User module
  app.{controller,module,service}.ts - The main module. Connects configuration, TypeORM and other modules
  main.ts - Initializes the app, creates the cookies and sessions, instantiates Swagger API documentations
ormconfig.ts - TypeORM configurations: one for sessions and one for the application data

• NestJS (w/ Express.js platform): The framework, provides a great structure and a CLI that can help creating modules
• TypeScript
• TypeORM: The ORM for TypeScript, can translate to most databases. Made with PostgreSQL in mind, currently using sqlite3 for development purposes.
• Passport.js: A great authentication middleware
• Swagger: API documentation
• FFMPEG: Processing video files
• Docker

Back to top

Content Server

A small service to serve your content. Provides a simple API: /file/*path* for file serving, /thumb/*path* for thumbnails.

• Express.js: Standard and minimalistic backend framework
• TypeScript
• sharp: For image processing
• Docker: Deploy anywhere

Back to top

Prototype Angular Web UI

I made this UI to test out Angular. After trying out NestJS and knowing that its structure was inspired by Angular, I had to try it.

src/app/
    components/ - shared components, by according to atomic design
    core/
      api/ - shared DTOs
      auth/ - guards, resolver and services
      consts/
      form/ - Validators
      media/ - Media service
      user/
    pages/ - View modules
    styles/ - SASS styles
  base.scss

Back to top