Movie Shop is an app that can be used for managing a movie library in a DVD rental store. Functionality is divided into 3 main categories:
- Adding movies to the library
- Browsing the titles available in the library
- Configuring settings
The app also allows potential customers to login and browse the available titles.
The app is hosted here: https://movie-shop-dev.web.app/
Quick start guide can be found here.
Tech Stack used:
- MERN Stack
- Vite server
- Typescript
- React Loading Skeleton
- React Router v6
- Lazy loading of code
- Auth0 Authentication
- Export to CSV
- chart-js
- notistack
- Cypress e2e testing
- prefers-color-scheme media query for dark mode support
- Automatic email sending via EmailJS
- Stripe
- Payments with pre-built checkout page and Stripe React library
- Subscriptions
- Webhooks for payment completion
- Paypal
- Payments with Paypal React library
- Subscriptions
- Webhooks for payment completion
- Pagination
- Material UI in this branch
- useMediaQuery hook
- Side-drawer
- Loading skeletons
- React material-table (@material-table/core had to be used with Vite)
- Bootstrap v5
This project uses OMDB API to search for movie data. The latter has a 1,000 daily API call limit. Another free alternative might be TMDB: https://developers.themoviedb.org/3/getting-started
This app communicates with the backend - which is available in a separate git project: movie-shop-backend.
To deploy to Firebase hosting, first perform a build, then run the following command from the terminal: firebase deploy --only hosting
Note: MongoDB automatically goes to inactive state after a period of inactivity, and needs restarting manually.
There is an environment variable, namely VITE_REDIRECT_TO_STRIPE, via which we can choose either Stripe's builtin checkout page, or our own Checkout page. For more info, https://stripe.com/docs/checkout/quickstart.
Stripe is running in TEST mode currently. Test cards to use are as follows:
- Payment succeeds: 4242 4242 4242 4242
- Payment requires authentication: 4000 0025 0000 3155
- Payment is declined: 4000 0000 0000 9995
Any CVC and expiry date will work for the above.
PayPal is running in sandbox mode currently. Test cards to use are as follows:
- Card No - 4032039029917251
- Expiry - 12/2027
- CVC - 593
All fields mentioned in .env.example must be filled with correct values and renamed as .env.
- VITE_SEARCH_URL - OMDB API URL
- VITE_REDIRECT_TO_STRIPE - Whether to use Stripe Prebuilt Checkout Page or React Components
- VITE_STRIPE_PK_TEST - Stripe public key
- VITE_NODE_SERVER - Backend Server URL
- VITE_PAYMENT_METHOD - either 'PAYPAL' or 'STRIPE'
- VITE_PAYPAL_CLIENT_ID - Paypal Client ID
- VITE_PAYPAL_MANAGE_SUB_URL - URL to manage client Paypal Subscriptions
Can be found here.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it 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!
To learn React, check out the React documentation.