Home page
The Shoppies is my submission for the Shopify UX Developer & Web Developer Intern challenge for Summer 2021. Check it out at shopify.tommydeng.com.
The main objectives were to complete the following.
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 list
Technical requirements
- Search results should come from OMDB's API (free API key: http://www.omdbapi.com/apikey.aspx).
- Each search result should list at least its title, year of release and a button to nominate that film.
- Updates to the search terms should update the result list
- Movies in search results can be added and removed from the nomination list.
- If a search result has already been nominated, disable its nominate button.
- Display a banner when the user has 5 nominations.
In addition to these requirements, saving nomination lists to a database was implemented so users can keep their data if they leave the page.
The project is hosted on Firebase Hosting at shopify.tommydeng.com. There is continuous deployment from the repo to Firebase using GitHub Actions.
Please visit shopify.tommydeng.com or see the docs/images/ folder for screenshots.
Sign up page
Full page screenshot of nominate page
- Chakra UI
- Firebase Authentication
- Firebase Cloud Firestore
- Firebase Hosting
- GitHub Actions
- Next.js
- Node.js
- TypeScript
Clone this repo and run npm install while in the repo root directory to install project dependencies.
There are eight commands available:
# start a development server:
npm run dev
# create a production build:
npm run build
# start a production server:
npm start
# export to static HTML
npm run export
# typecheck TypeScript
npm run typecheck
# format with Prettier
npm run format
# check for issues with ESLint
npm run lint
# fix linting issues with ESLint
npm run lint-fix
- Hero graphic from unDraw
- Sign up and log in background asset and inspiration from Shopify Accounts
- General colors from Shopify
