Welcome to the Flickr Gallery application. This app is simple, you write a tag at the top and you get images from flickr with that tag.
To get this app running locally all you need to do is:
- Fork this repo into your personal github account.
- Clone the forked repo into your computer
git clone git@github.com:[YOUR_USERNAME]/flickr-gallery.git
- In the created folder install the node modules
npm install
- Run the app
npm start
- Your local app should be available at
http://localhost:8000
This project includes several tasks for different skill levels. You may try completing them all but if you are new to Web Development, complete the tasks that are a bit above your level. You can and should learn new skills during the process, you may consult with Google and friends but you will need to explain why you implemented what you implemented, so be responsible for your code.
Each image has three buttons that appear on mouse hover. You need to make them work.
- Delete: clicking the delete button should remove the image from the display. (easy)
- Rotate: each click should rotate the image by 90 degrees. (intermediate)
- Expand: clicking an image should display this image in a larger view. (hard)
- Responsive: the gallery adjusts the size of each image so that all the images will fit into the screen without margin. However, when the window is resized, the images are not fitted so well. Make sure the images are always adjusted to the window width. (easy)
- Infinite Scroll: currently the gallery displays only 100 images. Create a mechanism that loads more images from flickr when the user is scrolling past the last image. (intermediate)
- Drag & Drop: let your users choose the order of the images by adding an option to drag & drop images to their new position. (hard)
- All the code you should change / add will be in the
/src/components
folder. - You don't need to complete all tasks. If you are new to web development, finish only the easy tasks. If you have the required skills, try to complete the intermediate and hard tasks too.
- If possible, write tests for every new feature you write (tests are written in spec.js files)
- You can see a working demo video of the completed app here
- Think about the product you create, try inovating the user interface, you don't have to create the exact solution as it is in the video, or even the exacts tasks. be creative, creative is good.
Remember: this test is designed to see how you complete tasks that require self learning, not to test your existing knowledge.
After you've completed your tasks, and you are ready to submit it, do the following:
- Make sure your code is on the
master
branch and that it is pushed into your repo. - Run the deploy script
npm run deploy
- You project should be live on
https://[YOUR_USERNAME].github.io/flickr-gallery/
- Create a Pull Request of your changes (Pull Requests > New Pull Request > Create Pull Request)
- Send us an email with your repo link and the deployed app link
- Profit