This code demonstrates image gallery build without any framework, but solely on HTML5 Web components and vanilla javascript
$ git clone https://github.com/ranwahle/image-gallery-webcomponents.git
$ npm install
$ npm start
browse http://localhost:3000 (3000 is the default port, it may change with env variables)
Express
- Pure HTML, javascript & CSS
- Fontawesome icons
Because server side was not the main issue for this demo, the images are actually stored in the server memory. It gives us persistence between refreshes, however, all data are lost when the server is restarted.
On the client side we've divided to components
- Image gallery component
- Add image compoennt: Contains a form to add the image
- Small image component: Present image in grid layout (image & title)
- Detailed imege component: Present real size image with title, description and date properties. Also provides mechanism to change the title and delete the image