UX Developer Intern & Web Developer Intern Challenge - Fall 2021
Table of Contents
Topic:
Shopify has branched out into movie award shows and we need your help. Please build us an app to help manage our movie nominations for the upcoming Shoppies.
The Challenge:
We need a webpage that can search OMDB for movies, and allow the user to save their favourite films they feel should be up for nomination. When they've selected 5 nominees they should be notified they're finished.
We'd like a simple to use interface that makes it easy to:
* Search OMDB and display the results (movies only)
* Add a movie from the search results to our nomination list
* View the list of films already nominated
* Remove a nominee from the nomination listTechnical Requirements:
1. Search results should come from OMDB's API (free API key: http://www.omdbapi.com/apikey.aspx).
2. Each search result should list at least its title, year of release and a button to nominate that film.
3. Updates to the search terms should update the result list
4. Movies in search results can be added and removed from the nomination list.
5. If a search result has already been nominated, disable its nominate button.
6. Display a banner when the user has 5 nominations.Extras:
There is a lot to be improved on here, you can polish the required features by crafting a nicer design, or improve the app by adding new features! Choose something that you feel best showcases your passion and skills.
If you need inspiration, here are examples of what you can work on. If you work on these ideas, we recommend choosing only one or two.
Save nomination lists if the user leaves the page
Animations for loading, adding/deleting movies, notifications
Create shareable links
Clone the repository
git clone https://github.com/saidmg/the-shoppies.gitInstall NPM packages
npm installAfter installtion completed, use the following commander to start react app:
npm startWhen the application starts, use the search input to select the 5 movies for nomination. When you select a movie , it will be shown in the nomination list , with 2 options : -Remove the move nomination. -Check the details for the selected movie. Once 5 movies are selected, a modal will be prompt informing the user that the selections are completed. once a movie is selected , it cannot be selected again. And once 5 movies are selected, no more movies can be selected unless previous movies were removed. If the user leaves the page and wish to come back, the previously selected movies will be stored in the local storage and shown for the user.
- Project Link: https://github.com/saidmg/the-shoppies
- Deployed Link: https://your-nominations.herokuapp.com/
Distributed under the MIT License.
Copyright <2021> <Said Mghabghab>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.- Said Mghabghab - Linkedin - saidmghabghab@gmail.com