Merge branch 'release/1.0.0'

README.md

@@ -1,59 +1,27 @@
-# Movie Project
+![Home1](./public/Home1.PNG)
+![Home2](./public/home2.PNG)
+![Home3](./public/home3.PNG)
 
-## Overview
+Description :
+Neocine is a movie and actor information website that allows users to explore the latest movies, popular actors, and more. It provides a user-friendly interface to browse through movie details, actor profiles, and related content. Neocine is powered by The Movie Database (TMDb) API to fetch real-time movie and actor data.
 
-Working with APIs to make our websites interactive sits at the core of frontend web development. At the end, frontend websites work as interfaces that give us the ability to interace with data. All this data is coming from some form of an API.
+Tools Used :
 
-The API you will be interacting with is a movie API that can be used to retreive information about movies and actors. It is quite extensive and serves many purposes for your needs. In addition to that, it has quite a versatile searching mechanism that gives you the ability to reach for the information you need.
+Next.js
+Material UI
+Figma (for design and prototyping)
+Prettier
+Husky
+Commitizen
+Git Workflow
 
-## How to make use of this WIKI?
+Team Linkedin
 
-As you can see, the only thing you received from us is a bunch of `.md` (Markdown) files like the one you're reading now. We want you to learn to build your own projects from scratch and see how the process is done. So, we have created the following things in the wiki to help you out with the preparation:
+- [Sidahmed Slikh](https://www.linkedin.com/in/sidahmed-zinedine)
+- [Benarba Tewfik](www.linkedin.com/in/mohammed-tewfik-benarba)
+- [Bouchra Ikram](https://www.linkedin.com/in/bouchra-ikram-aboura-1750b5169/)
+- [Youssef Sergma](https://www.linkedin.com/in/sergma)
+- [Imane Omari](https://www.linkedin.com/in/iman-omari)
+- [Melissa Sidi Said](https://www.linkedin.com/in/milyssa-sidisaid-46170a232/)
 
-1. Setup - This page contains the steps you need to setup the project. **Only one of you will do it, while the others watch and support them**
-2. Requirements - This page contains the requirements that you need to do for the project.
-3. Presentation - This page contains the requirements that you need to do when presenting.
-4. Score guide - We're introducing a new score system. This page contains the breakdown of the score.
-
-To make the best use of this Wiki, go first to the requirements, understand them, then go to the score guide, understand it, then finally head to the setup page so you can do the setup with everything in mind.
-
-## Key takeaways 🎉
-
-If you finish this project you can be absolutely sure that you can work on any project in the future. Generally, you will be able to use the same tools and techniques you used here to build any website in the future.
-
-#### Things you will practice while working on this project
-
-You will be able to practice:
-
-- Dividing tasks as components between the team and avoiding most conflict issues.
-- Using states and setters to change the state of the component.
-- Using props to pass data from one component to another.
-- Using static-site generation and server-side rendering to fetch data and add them to pages.
-- Preparing folder structure in a way that makes your, and everyone elses work easier.
-- Adding new dependencies and how to use them.
-- Reading the documentation of the packages you use.
-- Reading the documentation of APIs and how to understand them.
-- Using Authentication tokens in your
-- Using routes to navigate between pages.
-- Using local storage to store information.
-- Using UI Kits to make styling components easier.
-
-#### Concerns to avoid
-
-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.
-
-#### 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.`*
+---

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)