doc/create-project-docs

README.md

@@ -1,48 +1,83 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+<h2 align="center">QUE FILME</h2>
 
-## Getting Started
+<div align="center">
+  <img alt="GitHub top language" src="https://img.shields.io/github/languages/top/werlleyg/quefilme?color=9747FF">
 
-First, run the development server:
+  <a href="https://www.linkedin.com/in/werlleyg/" target="_blank" rel="noopener noreferrer">
+    <img alt="Made by" src="https://img.shields.io/badge/developed%20by-Werlley Ponte-9747FF">
+  </a>
+
+  <a href="https://github.com/werlleyg/quefilme/commits/main">
+    <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/werlleyg/quefilme?color=9747FF">
+  </a>
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+  <a href="https://github.com/werlleyg/quefilme/issues">
+    <img alt="Repository issues" src="https://img.shields.io/github/issues/werlleyg/quefilme?color=9747FF">
+  </a>
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+  <a href="https://quefilme.vercel.app/" target="_blank">
+    <img alt="GitHub website up/down" src="https://img.shields.io/website-up-down-green-red/https/quefilme.vercel.app/.svg">
+  </a>
+</div>
+<br/>
+<p align="center">
+ <b>Que Filme</b> aims to find the best movie and series suggestions for the user based on their previous choice of favorite titles. 🎥 🍿 ✨
+</p>
+<br/>
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+## 🛠 Technologies
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+The tools below were used in the project's development:
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+- [Next.js 14](https://nextjs.org/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Toastify](https://fkhadra.github.io/react-toastify/introduction)
+- [@emotion](https://emotion.sh/docs/introduction)
+- [React Icons](https://react-icons.github.io/react-icons)
+- [@svgr](https://react-svgr.com/docs/webpack/)
+- [Axios](https://axios-http.com/docs/intro)
+- [G4F](https://www.npmjs.com/package/g4f)
+- [Testing Library](https://testing-library.com/docs/react-testing-library/example-intro/)
+- [Jest](https://jestjs.io/docs/next/testing-frameworks)
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+## ⚙ Installation
 
-## Learn More
+1. Clone and set up this repository [Que Filme](https://github.com/werlleyg/quefilme)
+2. Run `npm i` or `yarn` in the project folder on your computer
+3. Run `npm run dev` or `yarn dev`
+4. Your project is already running 🔭
 
-To learn more about Next.js, take a look at the following resources:
+<br/>
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## 🏗️ Infrastructure Diagram
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+The project is hosted at Vercel and is accessible by the user from any device with internet browsing. The project also uses integration with two service providers, one for movies and the other for AI.
 
-## Deploy on Vercel
+<img src="docs/images/infrastructure-diagram.png" alt="Infrastructure Diagram" style="width: 100%; max-width: 650px">
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## 🔗 Architecture Diagram
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+The project was built adapting clean arch concepts to the context of Next.js. It has its division into layers, which are below:
 
-### to send push
+- **Domain:** Concentrates important information for business rules, such as entities, enums, errors, service, providers, protocols, and usecases contracts;
 
-```
-rm -rf yarn.lock node_modules
-rm -rf node_modules
-yarn --frozen-lockfile
-```
+- **Infrastructure:** The implementation of service contracts, proviers, protocols and usecases is carried out;
+
+- **Main:** In this layer, the factory pattern is carried out to instantiate the elements created in the infrastructure, in addition to aggregating project configurations such as environment variables and build settings;
+
+- **Presentation + Pages:** Outermost layer of design, talking directly to the framework used, responsible for creating the components, typography and global stylizations. The Pages directory, responsible for concentrating the pages of the application, is separated by limitations of the framework itself in dealing with this resource. Consider Pages as part of Presentation.
+
+<br/>
+
+<img src="docs/images/architecture-diagram.png" alt="Architecture Diagram" style="width: 100%; max-width: 650px">
+
+## 🚀 CI/CD Flow
+
+<img src="docs/images/cicd-flow.png" alt="CICD Flow" style="width: 100%; max-width: 650px">
+
+<br/>
+<br/>
+
+Developed by <a href="https://www.linkedin.com/in/werlleyg" target="_blank">Werlley Ponte</a>
+
+---

package.json

@@ -1,6 +1,6 @@
 {
   "name": "quefilme",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/pages/index.tsx

@@ -25,6 +25,7 @@ import { Environment } from "@/main/config";
 import { makeGetMovieSuggestionUsecase } from "@/main/factories/usecases/getMovieSuggestion.factory";
 import { toast } from "react-toastify";
 import { snackbarMessage } from "@/domain/enums/snackbar.enum";
+import Link from "next/link";
 
 export function Home() {
   const [value, setValue] = useState<string>();
@@ -159,7 +160,14 @@ export function Home() {
         </DivTopContent>
         <DivBottomContent>
           <P style={{ fontWeight: 500, textAlign: "center" }}>
-            Desenvolvido por <u>Werlley Ponte</u>
+            Desenvolvido por{" "}
+            <Link
+              href="https://www.linkedin.com/in/werlleyg"
+              target="_blank"
+              style={{ fontWeight: 700 }}
+            >
+              Werlley Ponte
+            </Link>
           </P>
         </DivBottomContent>
         <ShowMovie