Feedback

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": []
+}

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next"]
+}

.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.husky/commit-msg

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ${1}
+npx --no -- commitlint --edit ${1}

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run format:fix
+npx lint-staged

.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  semi: false,
+  singleQuote: false, // Do you want to use double or single quotations?
+  trailingComma: "all",
+}

.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev",
+      "serverReadyAction": {
+        "pattern": "started server on .+, url: (https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}

README.md

@@ -42,18 +42,18 @@ You will be able to practice:
 
 The following thoughts are traps; steer away from them:
 
-- *`This project is huge! I don't think I'm going to be able to do it.`* From your previous experiences, you know for a fact that everything starts big in the beginning but when you plan things and work on them they usually are not as big and scary as you thought.
-- *`I don't know how to use [insert tool here] how am I going to deal with all of this?`* Again, don't worry. You have dealt with so many unknown things and just like you learned how to use them, you will be able to learn how to use any tool you want as long as you check its documentation.
-- *`[Right from the beginning] How am I going to fix the bonus topic?`* DON'T GO THERE UNLESS YOU FINISH THE MAIN REQUIREMENTS FIRST!
-- *`[After spending hours on an issue to fix it without reading the documentation or searching the issue on google] I will spend extra hours on this until I fix it`* This is a trap. You should always read the documentation and search for the solution.
-- *`I'm so tired now!!!😩 I've been trying to fix this bug for 3 hours!!!`* In times like these, consider steping away from your computer and doing something else like playing with your pet, watching something funny, looking outside your window and enjoying cool air.
+- _`This project is huge! I don't think I'm going to be able to do it.`_ From your previous experiences, you know for a fact that everything starts big in the beginning but when you plan things and work on them they usually are not as big and scary as you thought.
+- _`I don't know how to use [insert tool here] how am I going to deal with all of this?`_ Again, don't worry. You have dealt with so many unknown things and just like you learned how to use them, you will be able to learn how to use any tool you want as long as you check its documentation.
+- _`[Right from the beginning] How am I going to fix the bonus topic?`_ DON'T GO THERE UNLESS YOU FINISH THE MAIN REQUIREMENTS FIRST!
+- _`[After spending hours on an issue to fix it without reading the documentation or searching the issue on google] I will spend extra hours on this until I fix it`_ This is a trap. You should always read the documentation and search for the solution.
+- _`I'm so tired now!!!😩 I've been trying to fix this bug for 3 hours!!!`_ In times like these, consider steping away from your computer and doing something else like playing with your pet, watching something funny, looking outside your window and enjoying cool air.
 
 #### Confidence boosters
 
 In times of doubts remember these:
 
-- *`This project will be a huge addition to my already big list of projects that will increase my future prospects of getting hired`*
-- *`The internet is FULL of resources that any one can use to learn about anything.`*
-- *`I've worked on 3 projects. They seemed difficult in the beginning but I still aced them. I'm awesome!`*
-- *`3 months ago, my biggest issues and worries are how to write the correct class name to change an HTML element's color. Now, I'm dealing with bigger things because I've learned so much more. My current worries and issues will be my HTML and CSS of my future.`*
-- *`I'm not alone on this team. There are 2 more people who got my back.`*
+- _`This project will be a huge addition to my already big list of projects that will increase my future prospects of getting hired`_
+- _`The internet is FULL of resources that any one can use to learn about anything.`_
+- _`I've worked on 3 projects. They seemed difficult in the beginning but I still aced them. I'm awesome!`_
+- _`3 months ago, my biggest issues and worries are how to write the correct class name to change an HTML element's color. Now, I'm dealing with bigger things because I've learned so much more. My current worries and issues will be my HTML and CSS of my future.`_
+- _`I'm not alone on this team. There are 2 more people who got my back.`_

Requirements.md

@@ -50,12 +50,12 @@ Your website need to have the following pages:
       7. Director's name
       8. Overview of the movie
       9. The main 5 actors of the movies in the credit section (Use the API for this)
-      10. A   related movies section which includes at least five related movies (Use the API for this)
+      10. A related movies section which includes at least five related movies (Use the API for this)
       11. A trailer section that has the movie trailer from youtube
       12. The movie production company name and logo.
    2. Functionality:
-       1. Clicking an actor in the main actors should go to the single actor page.
-       2. Clicking on a movie in the related movies section should take you to the Single movie page (#3)
+      1. Clicking an actor in the main actors should go to the single actor page.
+      2. Clicking on a movie in the related movies section should take you to the Single movie page (#3)
 4. Actors page - Shows a list of all popular actors. Clicking on an actor takes you to the Single actors page (#5)
 5. Single actors page - Shows information about the current actor.
    1. The information includes:
@@ -92,7 +92,7 @@ src/
 │  ├─ index.jsx           // Home page
 │  ├─ movies/
 │     ├─ index.jsx        // Movies page
-│     ├─ [movieId].jsx    // Single movie page 
+│     ├─ [movieId].jsx    // Single movie page
 ├─ components/
 │  ├─ Navbar/
 │     ├─ Navbar.jsx
@@ -169,8 +169,8 @@ After finishing the project, do the following:
 
 1. Deploy the project on netlify so you can have a link to use it in your portfolio. Don't forget to add a link in your website that points to this project.
 2. Remove everything from this README.md file and add the following content to it:
-    1. A screenshot of the website.
-    2. Your project's name.
-    3. Description of the project.
-    4. Tools used.
-    5. Your names.
+   1. A screenshot of the website.
+   2. Your project's name.
+   3. Description of the project.
+   4. Tools used.
+   5. Your names.

Score-guide.md

@@ -3,7 +3,7 @@
 This project will be graded. We will follow the following score guide so keep it in mind.
 
 | Criteria                                    | Score |
-|---------------------------------------------|-------|
+| ------------------------------------------- | ----- |
 | Project Requirements                        | 3     |
 | Used Github issues correctly                | 1     |
 | Used Github PRs correctly (Github workflow) | 1     |

Setup.md

@@ -46,7 +46,7 @@ Create a new file called `.prettierrc.js` in the root folder and put the followi
 module.exports = {
   semi: false,
   singleQuote: false, // Do you want to use double or single quotations?
-  trailingComma: 'all',
+  trailingComma: "all",
 }
 ```
 
@@ -91,7 +91,7 @@ npx lint-staged
 
 Now run `npm run prepare` that we created previously to initialize the new changes we created.
 
-### 4.  [Commitizen](https://github.com/commitizen/cz-cli) + [Commitlint]() [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)
+### 4. [Commitizen](https://github.com/commitizen/cz-cli) + [Commitlint]() [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)
 
 Commitizen and Conventional Commits are used to force correct code commit messages in the project. Commitizen is the tool while Conventional commits is the standard while Commitlint is a tool used to enforce that you follow the conventions.
 
@@ -128,7 +128,8 @@ npm install --save-dev @commitlint/{config-conventional,cli}
 npm install --save-dev @commitlint/config-conventional @commitlint/cli
 ```
 
-Create configuration file with the following command 
+Create configuration file with the following command
+
 ```
 echo "module.exports = {
     extends: ['@commitlint/config-conventional'],
@@ -156,7 +157,9 @@ echo "module.exports = {
     },
 };" > commitlint.config.js
 ```
+
 Now let's finalize this by adding the precommit message
+
 ```
 npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'
 ```
@@ -208,4 +211,4 @@ Now go to `.eslintrc.json` and add change it to
 
 Now run `npm run dev` your project should be ready.
 
-If everything is running correctly, let's create our first commit using `git cz` then choose `chore` by going down the list and add the scope `project structure` and small short message that explains what you did. Press enter to leave the longer description empty (if you want)
+If everything is running correctly, let's create our first commit using `git cz` then choose `chore` by going down the list and add the scope `project structure` and small short message that explains what you did. Press enter to leave the longer description empty (if you want)

commitlint.config.js

@@ -0,0 +1,25 @@
+module.exports = {
+  extends: ["@commitlint/config-conventional"],
+  rules: {
+    //   TODO Add Scope Enum Here
+    // 'scope-enum': [2, 'always', ['yourscope', 'yourscope']],
+    "type-enum": [
+      2,
+      "always",
+      [
+        "feat",
+        "fix",
+        "docs",
+        "chore",
+        "style",
+        "refactor",
+        "ci",
+        "test",
+        "perf",
+        "revert",
+        "build",
+        "vercel",
+      ],
+    ],
+  },
+}

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig