🔍 A MERN stack application, 21io is an application that allows it's users to login, search for & save movies to a library - optionally we welcome you to donate and support our site!
💻 Below is a screenshot of the application:
GIVEN a movie search engine
WHEN I load the search engine
THEN I am presented with a navbar with options to Search for Movies", Signup", "Login", "Donate" and an input area and "Search" button
WHEN I enter key search terms into the input area and select "Search"
THEN I am presented with several search results, each featuring a movie title, description, image
WHEN I click on the Signup option
THEN I am presented with two inputs: email address and a password then a Submit button
WHEN I enter a valid email address and create a password and click on the Signup button
THEN my user account is created and I am logged in to the site
WHEN the Login option is selected
THEN I am presented with two inputs for an email address and a password and login button
WHEN I enter my account’s email address and password and select the Login button
THEN I am logged in to the site
WHEN I am logged in to the site
THEN the navbar options change to "Search for Movies","Wish List", "Watched", and "Logout"
WHEN I am logged in and enter a search term in the input field and click the submit button
THEN I am presented with several search results, each featuring a movie's title, description, image and a "Save" button
WHEN I click on the "Save" button on a movie
THEN that movie’s information is saved to my wish list
WHEN I click on the "Wish List" Navbar option
THEN I am presented with all of the movies I have saved to my wish list, each featuring the movie's title, description, image and "Play" button
WHEN I click on the "Play" button for a movie
THEN that movie is deleted from my movie wish list and added to my watched list
WHEN I click on the "Watched" navbar option
THEN I am presented with all the movies I have Watched : Movie name, Description
WHEN I click on the Logout button
THEN I am logged out of the site and presented with a menu with the options "Search for Movies", "Signup", "Login", "Donate" and an input area and "Search" button
Use React for the front end.
Use GraphQL with a Node.js and Express.js server.
Use MongoDB and the Mongoose ODM for the database.
Use queries and mutations for retrieving, adding, updating, and deleting data.
Be deployed using Heroku (with data).
Meet the minimum requirements of a PWA:
Uses a web manifest
Uses a service worker for offline functionality
Is installable
Have a polished UI.
Be responsive.
Be interactive (i.e., accept and respond to user input).
Include authentication (JWT).
Protect sensitive API key information on the server.
Have a clean repository that meets quality coding standards (file structure, naming conventions, best practices for class and id naming conventions, indentation, quality comments, etc.).
Have a high-quality README (with unique name, description, technologies used, screenshot, and link to deployed application).
- Description
- User Story
- Acceptance Criteria
- Table of Contents
- Available Scripts
- Testing
- Contributing
- Learn More
In the project root directory, you can run:
Runs the app in the development mode.
Both the server and react will start and populate as localhost in browser.
Open http://localhost:3000 to view in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
✏️ To be defined or added at a later date
Jenifer Queen
Nathalie
Michael Dreesen
You can learn more in the Create React App documentation. To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify