This is a fullstack app which features a private image repository inspired by Unsplash.
It is built with Express on the server side and Vue 3 on the frontend, using Typescript on both ends. Uploaded files are stored on server's filesystem with info about them saved to LevelDB.
Building this app helped me to better understand how file uploading works as well as get a glimpse of what fullstack development process looks like.
- Add your images by uploading them or providing URL
- Delete unwanted images
- Search uploaded images by label
Please be aware that app is currently hosted for demonstration purposes only. This means that there are certain limitations:
- images upload size is limited by 15 MB
- session lifespan is limited by 2 days after which user data will be restored to the initial state, i.e., all uploaded images will be deleted.
If you wish to hos the app yourself these settings can be customized by setting appropriate environment variables.
To clone and run this application on your local machine, you'll need
Git and Node.js
(which comes with npm) installed on your computer.
Keep in mind that environment variables have to be provided in
.env.development.local (see .env.example) for both client and server.
From your command line:
# Create main directory for project and enter it
$ mkdir unslash && cd unslash
# Clone client & server repositories
# $ git clone
# https://gitlab.com/islambeg-frontend-projects/fullstack/unslash/client &&
# git clone
# https://gitlab.com/islambeg-frontend-projects/fullstack/unslash/server
# Install client & server dependencies
$ npm --prefix ./client install && npm --prefix ./server install
# Start server in dev mode
$ npm --prefix ./server run dev
# Start client in dev mode
$ npm --prefix ./client run dev- TypeScript Express tutorial by Marcin Wanago
- How To Make A Drag-and-Drop File Uploader With Vue.js 3 by Joseph Zimmerman
- How to Favicon in 2022 by Andrey Sitnik
- Using JavaScript to trap focus in an element by Hidde de Vries
- Load all focusable elements with JavaScript by Andy Bell
- Infinite CSS Loading Spinner by Taha Aijjou
- Email monkeyseesone@gmail.com