- Demo Spacestagram here :D
- Source Code here :)
To run Spacestagram on your local machine:
- clone repo onto local machine
- run
npm install
to install dependencies - run
npm run start
- navigate to
http://localhost:4200/
- view images in a Masonry theme using the Angular module, ngx-masonry
- see description of its Rover name, Camera name and date
- click on image to view enlarged and zoom in if needed
- loads 20 images at a time
- liked images are saved into a
localstorage
to retain data on refresh - can view liked images in the liked images page by clicking on the profile icon on the right hand side of the navbar
- can dislike images on any page
- disliking an image on the liked images page will automatically remove the image there
- search bar in navbar filters displayed images on main page based on input
- option to choose a specific camera through dropdown
- instead of seeing a blank black page, a loading progress bar is displayed while images are being fetched from the api
- can be viewed on mobile, desktop and display
- allow users to search and filter different cameras on the liked images page
- load a variety of photos and expand the filtering search bar to a system
- could incorporate a save image button and section
- filtered by API
- profile icon would represent both saved and liked images
- add a backend and database so each user can have their own liked and saved images
- express and SQL?
- ideas were planned out in Figma: https://www.figma.com/file/WPlX3CQbbcOgvg3Dzz2xzw/Spacestagram?node-id=0%3A1
- Angular CLI (https://github.com/angular/angular-cli) version 11.0.6.
- Angular Material for the icons and menu in mobile view https://material.angular.io/