docs: 📝 adding new readme

README.md

@@ -1,36 +1,96 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
-## Getting Started
+## 📚  Conceitos de React e Next B7Web 📚
 
-First, run the development server:
+![Logo](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K)
+
+<p align="center">
+   <img alt="GitHub language count" src="https://img.shields.io/github/languages/count/Gabriel4420/concepts-b7web">
+
+  <img alt="GitHub top language" src="https://img.shields.io/github/languages/top/Gabriel4420/concepts-b7web?logo=html">
+
+  <img alt="GitHub repo size in bytes" src="https://img.shields.io/github/repo-size/Gabriel4420/concepts-b7web?color=green">
+
+  <br>
+
+  <a href="https://www.codacy.com/manual/Gabriel4420/concepts-b7web?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=Gabriel4420/concepts-b7web&amp;utm_campaign=Badge_Grade">
+    <img src="https://app.codacy.com/project/badge/Grade/6dd6b46abeb14e99935a2b9ac5c6ede2"/>
+  </a>
+
+  <img alt="GitHub code size in bytes" src="https://img.shields.io/github/last-commit/Gabriel4420/concepts-b7web">
+
+
+  <a href="https://www.linkedin.com/in/gabriel-rodrigues-perez-2069b072/">
+    <img alt="Made by Gabriel" src="https://img.shields.io/badge/made%20by-Gabriel-%2304D361">
+  </a>
+</p>
+
+
+
+
+Este repositório foi criado para documentar e organizar os conceitos aprendidos no curso de React da B7Web, ministrado pelo professor Bonieky Lacerda. O curso abrangeu uma série de tópicos fundamentais para o desenvolvimento com React, desde os primeiros passos até o uso avançado de hooks, contextos e integração com APIs.
+
+
+
+
+## Stack utilizada
+
+**Front-end:** Next, Typescript, Redux, TailwindCSS
+
+**Back-end:** Next, Node
+
+
+## Tópicos Abordados:
+
+- Primeiros passos no React: Estrutura básica de uma aplicação React, configuração do ambiente e introdução ao JSX.
+- Estados e Eventos: Manipulação de estados internos e gestão de eventos para interação com o usuário.
+- Effects: Uso do hook useEffect para efeitos colaterais e gerenciamento do ciclo de vida de componentes.
+- Reducers: Implementação de gerenciamento de estado global utilizando o hook useReducer.
+- Hooks e Contexts: Exploração dos hooks mais utilizados no React (como useState, useEffect, useReducer, etc.) e gerenciamento de estado global com Context API.
+- Uso de APIs com Fetch e Axios: Consumo de APIs externas para obter dados dinâmicos e integrá-los na aplicação.
+
+Este repositório serve como um guia de referência rápida, contendo exemplos práticos e explicações claras para cada um dos tópicos mencionados. A cada novo conceito, o código será documentado e explicado com o objetivo de facilitar a compreensão e aplicação em projetos reais.
+## Rodando localmente
+
+Clone o projeto
+
+```bash
+  git clone https://github.com/Gabriel4420/concepts-b7web.git
+```
+Instale as dependências
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+  npm install
 ```
+Inicie o servidor
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+```bash
+  npm run dev
+```
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+## Feedback
 
-## Learn More
+Se você tiver algum feedback, por favor nos deixe saber por meio de gabriel_rodrigues_perez@hotmail.com 
 
-To learn more about Next.js, take a look at the following resources:
+---
 
-- [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.
+<h4 align="center">
+  Feito com ❤️ por Gabriel Rodrigues 👋️ <a href="mailto:gabriel_rodrigues_perez@hotmail.com">Entre em contato!</a>
+</h4>
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+<p align="center">
 
-## Deploy on Vercel
+  <a href="https://www.linkedin.com/in/gabriel-rodrigues-perez-2069b072/">
+    <img alt="Gabriel Rodrigues Perez" src="https://img.shields.io/badge/LinkedIn-Gabriel_Rodrigues-0e76a8?style=flat&logoColor=white&logo=linkedin">
+  </a>
+  <a href="https://www.facebook.com/gabriel.rodrigues.perez">
+    <img alt="Gabriel Rodrigues Perez" src="https://img.shields.io/badge/Facebook-Gabriel_Rodrigues-1778F2?style=flat&logoColor=white&logo=facebook">
+  </a>
+  <a href="https://www.instagram.com/gabriel_rodrigues_perez/">
+    <img alt="Gabriel Rodrigues Perez" src="https://img.shields.io/badge/Instagram-@gabriel4420-833AB4?style=flat&logoColor=white&logo=instagram">
+  </a>
+
+
+</p>
 
-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.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.