# ratex UI - Design System
Project developed during the **React Learning Trail 2022** and implemented new components as a challenge in **Rocketseat®'s Bootcamp Ignite**

[**Link to the project**](https://maicondelbel.github.io/ratex-ui/)

## Project description
The purpose of the challenge was to take the design system developed on the thread and implement 2 more new components that would be used in a future project (Ignite Call). The challenges were:
- Creation of the Toast component, which can be used for alert messages on the screen.
- Creation of Tooltip component, which will display additional information about dates.

#### Concepts applied
- Design System
- Monorepo
- Changeset
- Package versioning
- GitHub Actions
- Responsive Web Design

#### Used technologies
- React
- Vite
- Typescript
- Stitches
- Radix UI
- Storybook
- Turbo

## Deploy
- GitHub Pages

#### Layout
For this application, a Figma layout was provided to reproduce and implement all the features.

<iframe title="Layout da aplicação" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FM8yzjYdJ2O6DP7oANatqVN%2FIgnite-Call-(Community)%3Fnode-id%3D0%253A1%26t%3DVnegTEXVfnXgLt2v-1" allowfullscreen></iframe>

ratex UI

# Dynamic Template - Lastro
**Dynamic Template** project of **Digital Signage** for the company **Lastro**.

**[Link to the project](https://maicondelbel.github.io/digital-signage-preview/)**

#### Project description
Project created to strengthen the brand by broadcasting institutional videos and also keep customers waiting at the company's reception informed with news related to the financial market and local weather. The following features were added to this project:
- Extract information from Exame's RSS Feed in the Business category;
- Extract information about the São Paulo Stock Exchange (Ibovespa) from the Google Finance page;
- Consult information regarding the weather of the local city through the Clima Tempo API;
- Shorten URL for QRCode generation with fewer modules and possibility to quantify accesses through Bitly's API.

#### Concepts applied
- Web Scrapping
- Third-party API

#### Used technologies
- PHP (Back-end)
- HTML + CSS
- JQuery
- Owl Carousel 2
- QRCode.js

#### Deploy
- API (Docker - Google Cloud)
- Front-end (GitHub Pages)

Dynamic Template

# My Portfolio
Personal Portfolio project where I demonstrate my skills and main projects as a Full Stack Web Developer.

#### Project description
Personal project to showcase my project's portfolio, developed using the concept of JAMStack with Next.js, GraphQL and internationalization.

#### Concepts applied
- Componentization
- JAMStack
- Headless CMS
- GraphQL
- SSR (Server Side Rendering)
- SSG (Static Site Generation)
- Responsive Web Design
- Internationalization
- SEO

#### Used technologies
- Next.js
- Next SEO
- Next i18n
- Typescript
- Styled Components
- Hygraph CMS
- GraphQL Request
- GraphQL Codegen
- React Markdown
- Framer Motion
- Swiper
- PhotoSwipe
- Lingui
- Google reCAPTCHA
- EmailJS
- Mapbox

#### Deploy
- Vercel

#### Layout
The layout was inspired by [VCard](https://themeforest.net/item/vcard-resume-cv-portfolio/full_screen_preview/24217972?_ga=2.224925082.1498807047.1685626082-1587511181.1660313035&_gac=1.58701272.1683573324.Cj0KCQjwu-KiBhCsARIsAPztUF2UESAujXOXSCdCmt_nVyyWyZOtf5NlmKvPGxs47PMc6w35QZF7E6EaAjzPEALw_wcB)

My Portfolio

# Ignite Shop - Ignite Challenge
Project developed as a challenge of **React Learning Trail 2022** in **Rocketseat®**'s **Bootcamp Ignite**.

**[Link to the project](https://ignite-shop-challenge.vercel.app/)**

#### Project Description
The challenge's proposal was to take advantage of the application already developed and implement a shopping cart that uses data from the Stripe API to search for existing items, and control the number of items that the person wants to buy through the application, adding the following features:
- Add a specific item in the cart on the product page.
- Save all selected items in the cart, and display the quantity of them.
- Send stored cart to the checkout route, where it will generate the checkout session with the necessary ``line_items``.

#### Concepts applied
- States
- ContextAPI
- LocalStorage
- Third-party API
- Props
- Componentization
- SSR (Server Side Rendering)
- SSG (Static Site Generation)
- Responsive Web Layout

#### Used technologies
- NextJS
- Typescript
- Axios
- Swiper
- Stitches
- Stripe

#### Deploy
- Vercel

#### Layout
For this application, a Figma layout was provided to reproduce and implement all the features.

<iframe width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FDqPeDR5nEv5pClevcSXEhk%2FIgnite-Shop-2.0-(Copy)%3Fnode-id%3D0%253A1%26t%3DXKNoZ6gb4kIvtBIw-1" allowfullscreen></iframe>

Ignite Shop

# Ignite Call - Agendamento Descomplicado
Project developed during **React Learning Trail 2022** in **Rocketseat®**'s **Bootcamp Ignite**.

**[Link to the project](https://ignite-call-nu.vercel.app/)**

#### Project description
The project consists of an appointment scheduling platform, where the user chooses their personalized link, synchronizes their Google calendar and defines their availability times. Appointments made through this link will be automatically created in the user's Google calendar.

#### Concepts applied
- Design System
- Social Login
- Third-party APIs
- Remote State Manager (React Query)
- ORM
- SSR (Server Side Rendering)
- API Routes
- Relational Database
- Responsive Web Design
- Biblioteca de Componentes UI

#### Used technologies
- Next
- Next Auth
- Typescript
- Stitches
- Google Calendar API
- Prisma (MySQL)
- React Hook Form
- Zod
- Nookie
- React Query
- Radix UI

#### Deploy
- Vercel

#### Layout
For this application, a [Design System](https://maicondelbel.github.io/ratex-ui/) was developed as well a Figma layout was provided to reproduce and implement all the features.

<iframe width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FM8yzjYdJ2O6DP7oANatqVN%2FIgnite-Call-(Community)%3Fnode-id%3D0%253A1%26t%3DVnegTEXVfnXgLt2v-1" allowfullscreen></iframe>

Ignite Call

# ig.news - Blog por Assinatura
Project developed during **React Learning Trail** by **Rocketseat Education®**.

**[Link to the project](https://ig-news-paywall.vercel.app/)**

#### Project description
Project developed in class to teach the fundamentals of Next.js, concepts of SSR (Server Side Render), SSG (Static Site Generator) and JAMStack.

#### Concepts applied
- Componentization
- Non-Relational Database
- Social Login
- Third-party API
- SSR (Server Side Rendering)
- SSG (Static Site Generation)
- Webhooks
- Responsive Web Design

#### Used technologies
- Next.js
- Next Auth
- Typescript
- Axios
- Styled Components
- Stripe
- Fauna DB
- Prismic (CMS)

#### Implantação
- Vercel

#### Layout
For this application, a Figma layout was provided to reproduce and implement all the features.

<iframe width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FzaJk6ZAAmAEY3bFOv4E3yp%2Fig.news-(Copy)%3Fnode-id%3D1%253A2%26t%3DBmEbIUGSSbh4jjVZ-1" allowfullscreen></iframe>

ig.news

# BookWise - Desafio Ignite
Project developed during **React Learning Trail 2022** in **Rocketseat®**'s **Bootcamp Ignite**.

**[Link to the project](https://bookwise-ignite.vercel.app/)**

#### Project description
The purpose of the challenge was to develop a complete application (Fullstack) from total zero, based on a Figma prototype.
The application consists of a book evaluation platform, where the user can log in with their Google or GitHub account and then evaluate the available books, leaving a score from 1 to 5, and a description.

#### Concepts applied
- Social Login
- Remote State Manager (React Query)
- ORM
- API Routes
- Relational Database
- Responsive Web Design
- UI component library 
- Forms validation

#### Used technologies
- NextJS
- Next Auth
- Typescript
- Axios
- Stitches
- Prisma ORM
- Zod
- TanStack React Query
- Radix UI
- MySQL
- React Hook Form

#### Deploy
- Vercel

#### Layout
For this application, a Figma layout was provided to reproduce and implement all the features.

<iframe width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FjTau6bMNSF10GkqwYAbuLA%2FBookWise--%25E2%2580%25A2-Desafio-React%3Ftype%3Ddesign%26node-id%3D1%253A17%26mode%3Ddesign%26t%3DpNZK0IXw92KfnxLs-1" allowfullscreen></iframe>

BookWise

# Coffee Delivery - Ignite Challenge
Project developed as a challenge of **React Learning Trail 2022** in **Rocketseat®**'s **Bootcamp Ignite**.

**[Link to the project](https://coffee-delivery-challenge.vercel.app/)**

#### Project description
The purpose of the challenge was to develop an application from scratch to manage a shopping cart in a fictional coffee shop, with the following functionalities:
- Listing of products (coffee) available for purchase
- Add specific quantity of items to cart
- Increase or remove quantity of items in cart
- Form for users to fill in their address
- Display total items in cart in the Header
- Display the total amount resulting from the sum of items in the cart multiplied by the amount

#### Concepts applied
- States
- ContextAPI
- LocalStorage
- Immutability
- Properties
- Componentization
- Reducers
- Responsive Web Design

#### Used technologies
- React
- Vite
- Typescript
- React Router DOM
- Styled Components
- React Hook Form
- Immer

#### Deploy
- Vercel

#### Layout
For this application, a Figma layout was provided to reproduce and implement all the features.

<iframe width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FLvvFgWuq850doSmf4w8rmm%2FCoffee- Delivery-(Copy)%3Fnode-id%3D0%253A1%26t%3DXxNg8LX8yYlZAwLY-1" allowfullscreen></iframe>Ignite Challenge#02

Coffee Delivery

# NLW eSports - Next Level Week
Project developed during the **NLW eSports** presented by **Rocketseat®**.

**[Link to the project](https://e-sports-nlw.vercel.app/)**

#### Project description
The project consists of a platform that allows the user to create an advertisement for their favorite games with their available time in the week to play with the objective of finding duos (companies) to play together.

#### Concepts applied
- Validation of requests (Front-end and Back-end)
- Relational Database
- ORM
- UI Component Library
- Responsive Web Design
- Utility-first CSS framework

#### Used technologies
##### Back-end
- Node.js
- Express
- Typescript
- Zod
- Prisma (MySQL)

##### Front-end
- React
- Vite
- Typescript
- TailwindCSS
- React Hook Form
- Zod
- Radix UI

#### Deploy
- Back-end - Google Cloud Platform
- Front-end - Vercel

#### Layout
For this application, a Figma layout was provided to reproduce and implement all the features.

<iframe width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FlmgVpdxtJjRuMmzLpDxro1%2FNLW- eSports-(Community)%3Fnode-id%3D0%253A1%26t%3DE9WUzqfmcOxhbmGb-1" allowfullscreen></iframe>

NLW eSports 

# Lessons Platform - Ignite Lab
Project developed during **Ignite Lab #02** by **Rocketseat®**

**[Link para o projeto](https://lessons-platform-ignitelab.vercel.app/)**

#### Project description
The project consists of a platform that manages online classes published on YouTube, classified as lives and practical classes (recorded content). The contents of the classes are managed through a CMS with a specific date and time to be broadcast. To access the platform, you need to register in advance, with name and email (Leeds capture).

#### Concepts applied
- GraphQL
- JAMStack
- CMS (Hygraph)
- Responsive Web Design
- Utility-first CSS Framework

#### Used technologies
- React
- Vite
- Typescript
- TailwindCSS
- Appolo Client
- GraphQL Codegen
- Vime (Media Player)

#### Deploy
- Vercel

#### Layout
For this application, a Figma layout was provided to reproduce and implement all the features.

<iframe width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FcfnfdVjvuVocTXRc8tRc0D%2FPlataforma-de-evento---Ignite-Lab-(Community)%3Fnode-id%3D0%253A1%26t%3DCJHZQsCypNyI1duy-1" allowfullscreen></iframe>

Lessons Platform

# Let Me Ask - Q&A Platform
Project developed during the **NLW #Together** presented by **Rocketseat®**.

**[Link to the project](https://nlw-letmeask-eight.vercel.app/)**

#### Project description
The project consists of a real-time Q&A platform for streamers to interact with their audience through rooms, answering questions they find most relevant.

#### Concepts applied
- Componentization
- States
- ContextAPI
- Social Login
- Realtime Database (Firebase)
- Responsive Web Design

#### Used technologies
- React
- Vite
- Typescript
- Styled Components
- Firebase
- React Hook Form
- React Hot Toast
- Styled React Modal

#### Deploy
- Vercel

#### Layout
For this application, a Figma layout was provided to reproduce and implement all the features.

<iframe width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F6Uvnwahzao1EwYWOBK9t2r%2FLetmeask-(Community)%3Fnode-id%3D0%253A1%26t%3DbQ5y9OD9UCK4qoto-1" allowfullscreen></iframe>

Let Me Ask

# Habits - Habits Tracker
Project developed during the **NLW Setup** presented by **Rocketseat®**.

**[Link to the project](https://nlw-habits-gamma.vercel.app/)**

#### Description:
The project consists of a platform for monitoring daily tasks that helps its users to track their performed and not performed activities.

#### Concepts applied
- Request Validations (Front-end e Back-end)
- Relational Database
- ORM
- Social Login (Firebase)
- Remote State Manager (React Query)
- UI Component Library
- Responsive Web Design
- Utility-first CSS framework
- CSS Skeleton Loading

#### Used technologies
##### Back-end
- Node.js
- Fastfy
- Typescript
- Zod
- Prisma (MySQL)
- Day.js

##### Front-end 
- React
- Vite
- Typescript
- TailwindCSS
- React Hook Form
- React Hot Toast
- React Query
- Firebase Auth
- Zod
- Radix UI
- Day.js
- CLSX

#### Deploy
- Back-end - Vercel (Serverless Functions)
- Front-end - Vercel

#### Layout
For this application, a Figma layout was provided to reproduce and implement all the features.

<iframe width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fu6CyYsZW2LCIlXFWbBXboh%2FHabits-(i)-(Community)%3Fnode-id%3D6%253A343%26t%3D8TEqjkK4dC1LBDLG-1" allowfullscreen></iframe>


Habits

# TVon Media Advertising Kit
Interactive **Media Kit** project developed for **TVon Mídias Digitais**.

**[Link to the project](https://maicondelbel.github.io/tvon-midia-kit/)**

#### Project description
The project consists of a static web page with information about the company's advertise points.

#### Applied concepts
- Framework for developing Frontend interface components
- Analytics

#### Used technologies
- Bootstrap
- JQuery
- Google Analytics

TVon Media Kit

# Finding My Dante - Web Scraper
Personal project

#### Project description
The project consists of a platform to search for Italian ancestors in military lists on several research sites of the genre and in its own database.

#### Concepts applied
- Web Scrapper
- Web Socket
- Process queues
- In-memory database (Redis)
- NoSQL Database (MongoDB)
- Node.js Process Manager

#### Used technologies
- JQuery
- Node.js
- Express
- Socket.io
- MongoDB
- Cheerio
- Bull
- Throng

Finding My Dante

# SM!LO Website - Wordpress
**Website** for the personal project of the artist **Lincoln Magalhães**.

**[Link to the project](https://www.smiloweb.com)**

#### Project description
The project consists of a website developed in Wordpress from a layout created in Photoshop by the artist himself, with the following features:
- Banner on the main page with links to the pages with background being changed when hovering the mouse over them;
- Carousel-format internal pages;
- Photo gallery;
- 3D gallery incorporation;
- Creation of an application where the user can take pictures through the computer or smartphone camera using the available filters;
- Internationalization - Portuguese/English.

#### Concepts applied
- Wordpress
- HTML + CSS
- Third-party libraries

#### Used Technologies
- Wordpress
- GeneratePress
- Owl Carousel 2
- Slider Revolution
- JeelizFaceFilter
- Html2canvas

Portfólio