* Users should be able to interact with the interface to explore the photo collection.
* Users should be able to navigate back and forth within the entire collection using the < / > buttons.
* Users should also be able to enter text in the search box to find a photo by photographer name or tag. Clicking on any of the thumbnails in the results dropdown should bring the photo into the main viewer.
* No backend is required, please store all data used in the app in a simple JSON file. We’ve supplied nearly 100 tagged up images, with the filename format of number first_name last_name date tags and included a filenames.txt file for you to base your JSON on.
* Please have a think how transitions or animations might help refine the visual experience of things like rollovers etc.
* Please use either plain JS, JQuery or React. It really doesn't matter which. If React gives you a leg-up then great but we're not looking for depth of framework experience. We’re more looking for a nicely structured approach to the project, and some thought put into how to best deliver the features outlined.
* You can either use a build tool or not. If using React we'd suggest you use Create React App. If you’re not using React and you want to use a build tool, we’d suggest Gulp.
* Either SCSS or plain CSS is totally fine.
* Finally, can you think of a way we could improve the app’s functionality outside of what we’ve included in the brief? You can simply think about this, or action it depending on how much time you have available.
From the specs communicated, I have decided to comply with some user stories that would cover the requirements of the app, as follows:
As a user,
so that I can discover new pictures,
I want to be able to see an interface of photos
As a user,
so that I can navigate the photo collection,
I want to be able to use 2 different buttons
As a user,
so that I can find a specific photo,
I want to be able to use a search bar
As a user,
so that I can find a specific photo
I want to be able to enter a tag
As a user,
so that I can see that picture,
I want to be able to click on it
I have decided to use REACT to build this application.
Please follow the steps below!
- Clone and setup repository:
You will need to setup the repo on your local machine; please enter the following commands from your command line:
$ git clone https://github.com/wearecrew/evadinckel-tech-test.git
Move into this directory.
- You will then need to install the dependencies by running the following:
$ npm install
- Next: Please run the following command to have the app running:
$ npm start
-
I didn't manage to take this app as far I would have liked to, but it has been a great exercise for me, tech tests are always a great opportunity to practice.
-
I have implemented slides components that use the pictures shared by crew studio as background. This could have been refactored by using only one slide component that interpolates the path of each picture.
-
As mentioned in part 3 of the brief, my thoughts on how we could improve the product's functionality:
- It would be great to be able to log in as a user and save pictures in a 'favourites' category, so that you can create mood boards of which pictures inspire you. This would improve the experience of each user by making it more bespoke.
- Another good thing would be to submit your own pictures to be added to the app.
The end! :)