image-upload-webpage

How To set up next time

1. Create a virtual environment (I used Linode)

2. Buy a domain name my-domain-example.com

3. Make the DNS point to the IP of the virtual environment

   1. This can be done via Linode or via the Domain Registrar
   2. (I used the domain registrar, i.e., loopia)

4. Pull this repository to the virtual environment

5. Create a .env file in the root directory of the project with the following content:

   DOMAIN=my-domain-example.com
   LE_EMAIL=[email protected]

6. Create a .env file in the ./server directory with the following content:

    JWT_SECRET='<your-secret-key>'
    JWT_EXPIRATION_TIME='3600'
    SHARED_PASSWORD_HASH='<the-hashed-password>'
    SHARED_PASSWORD='<the-real-password>'
    PORT='3000'

7. If you want to issue a TLS certificate, you can use Let's Encrypt with Certbot.

   1. Comment out the HTTPS server block in ./nginx/templates/site.conf.template.

   2. Run your Nginx proxy and your webapp as:

      docker compose up -d nginx webapp

   3. Execute the provisioning command:

      make init-cert

   4. Uncomment the HTTPS server block in ./nginx/templates/site.conf.template.

   5. Follow the remaining instructions (since you've now issued a TLS certificate for your webapp).

8. Build the docker image using docker compose:

   make build up

9. Access the webpage via https://my-domain-example.com

ToDo - General

1. Input sanitization
2. Authentication and Authorization
3. Rate limiting
4. Background processing of thumbnails -- Solved by compiling with a higher optimization level and "awaiting all"
5. Don't retrieve all thumbnails on upload (filter)
6. Introduce TLS
7. Make the gallery-scroll on phone swipeable, not just clickable.
8. Double check the JWT expiration time
9. Caching
10. Prevent gallery images from being movable.
11. Lazily load high-quality images in gallery
12. Make sure that upload button works.
13. Improve tab name (currently "Vite + Vue + TS")
14. Make larger images/videos uploadable.
15. Remove the annoying "download" message on iPhone
16. Indicator that images are being processed
17. Close hamburger menu after clicking outside.
18. Video support
19. Support additional mime types