DVD Shop website (NextJS)

The website is meant to be used by a company renting DVD's. The website displays the available titles (movies/TV series). The user can search for titles by name, or browse the featured titles. The website is responsive for mobile and tablet devices.

Site is hosted here: https://movie-shop-new.netlify.app

User guide can be found here: https://github.com/romesh-jaya/movie-shop-nextjs/blob/main/Quick%20Start%20Guide.pdf?raw=true

Screenshots

Home Page

---

Movie Details

---

Filtering movies

---

Tech Stack

• NextJS
• Typescript
• Integration with GraphQL via a lambda function on netlify
• Ant Design
• React Context
• Side-drawer
• SCSS modules
• Carousel component using pure-react-carousel
• Husky pre-commit hooks

Netlify functions env variables

These are defined in the Netlify dashboard's Build & deploy -> environment variables section

Note: the graphql queries are currently being issued under the 'user' role ('x-hasura-role': 'user'). This role needs to be granted select permissions in the graphql console.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Deploys

Auto publishing is on in the netlify console.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.