Skip to content

Media storage and management tool. Save and serve media, focused for self-hosting.

Notifications You must be signed in to change notification settings

BerkeKaragoz/intergallery

Repository files navigation

Intergallery, Media Storage and Management Tool

  • Save and serve media, focused for self-hosting

image

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

Watch the video

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

Intergallery browsing screen

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:

Initial Intergallery Figma design Intergallery edit media Intergallery delete media Intergallery adding media with drag and drop Intergallery end to end testing

Back to top

Server

image

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

image

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.

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
Intergallery Prototype browsing screen Intergallery Prototype mobile view

Back to top