https://github.com/jerp86/04-ignite-shop
Nesse módulo foi criado um projeto completo com o framework Next.js. Foi utilizado StitchesJS, passando por conceitos de SPA, server-side rendering (SSR) e static-site generation (SSG).
https://github.com/jerp86/04-ignite-shop
axios eslint keen-slider nextjs stitches stripe
Last synced: about 2 months ago
JSON representation
Nesse módulo foi criado um projeto completo com o framework Next.js. Foi utilizado StitchesJS, passando por conceitos de SPA, server-side rendering (SSR) e static-site generation (SSG).
- Host: GitHub
- URL: https://github.com/jerp86/04-ignite-shop
- Owner: jerp86
- License: mit
- Created: 2023-01-22T02:49:21.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-11T09:37:51.000Z (over 2 years ago)
- Last Synced: 2025-03-11T21:41:34.559Z (over 1 year ago)
- Topics: axios, eslint, keen-slider, nextjs, stitches, stripe
- Language: TypeScript
- Homepage:
- Size: 643 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Fundamentos do Next.js
>
---
Sobre |
Motivo |
Tecnologias |
Figma |
Cores |
Fontes |
Executar |
Licença
---
## :information_source: Sobre
Nesse módulo foi criado um projeto completo com o framework Next.js. Foi utilizado StitchesJS, passando por conceitos de SPA, server-side rendering (SSR) e static-site generation (SSG).
Foi desenvolvida uma aplicação de e-commerce, que contém as seguintes funcionalidades:
- Carrossel de produtos
- Mostra do nome e valor após hover do mouse
- Página estática com a descrição completa do produto
- Link para efetuar a compra através do Stripe
- Página estática de sucesso da compra efetuada
## :interrobang: Motivo
Reinicio dos estudos do bootcamp Ignite ReactJS da Rocketseat.
Este projeto foi dividido em quatro partes:
- Estrutura do Next.js
- Conceitos no Next.js
- Criação do projeto
- Criação das rotas
- Configuração do documento HTML
- Estrutura visual
- Configuração do Stitches
- Preparando estilos globais e cabeçalho da aplicação
- Estruturando a Home utilizando o componente de Imagems do Next.js
- Criando o carrossel
- Integração com Stripe
- Configurando conta no Stripe
- Data Fetching no Next.js
- Buscando produtos do Stripe
- Utilizando SSG
- Formatando preço com Intl
- Produto & Checkout
- Utilizando navegação via Link do Next.js
- Estrutura das páginas de Produto e de Sucesso
- Carregando informações do produto
- SSG com parâmetros dinâmicos
- Fallback do SSG
- Prefetch de links
- API routes no Next.js
- Checkout no Stripe
- Redirect no SSR
- Trabalhando com SEO
## :rocket: Tecnologias Utilizadas
- [Next.js](https://nextjs.org/)
- [Axios](https://axios-http.com/)
- [ESLint](https://eslint.org/)
- [keen-slider](https://keen-slider.io/)
- [Stitches](https://stitches.dev/)
- [Stripe](https://stripe.com/)
- [@rocketseat/eslint-config](https://github.com/rocketseat/eslint-config-rocketseat#readme)
## :art: Layout no Figma
Para essa aplicação foi fornecido um layout para que fosse possível seguir e implementar todas as funcionalidades desenhadas no #Figma.
[Figma - Ignite Shop](https://www.figma.com/file/OIJJEW24DFiJO6XLqHw2DM/Ignite-Shop/duplicate?node-id=0%3A1)
## :rainbow: Documentação de cores
| Cor | Hexadecimal |
| -------------------- | ------------------------------------------------- |
| white | #FFFFFF |
| |
| gray-100 | #E1E1E6 |
| gray-300 | #C4C4CC |
| gray-800 | #202024 |
| gray-900 | #121214 |
| |
| green-300 | #00B37E |
| green-500 | #00875F |
| |
| backgroundGradient | linear-gradient(180deg, #1EA483 0%, #7465D4 100%) |
## :abc: Fontes utilizadas
- [Roboto](https://fonts.google.com/specimen/Roboto)
## :zap: Como executar
- Clone o projeto:
```
git clone https://github.com/jerp86/04-ignite-shop.git
```
- Acesse a pasta clonada:
```
cd 04-ignite-shop
```
- Instale as dependências:
```
npm ci
```
- Inicie a fake API e o projeto:
```
npm run dev
```
## :memo: Licença
Esse projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
---
Feito por Jerp86 👋️
Entre em contato!
