Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/soaressluiss/the-simpsons-quotes
🍩👨 A page that displays quotes from characters from the famous North American cartoon "The Simpsons" coming from the "The Simpsons Quotes" API.
https://github.com/soaressluiss/the-simpsons-quotes
api axios radix-ui react styled-components the-simpsons typescript
Last synced: about 4 hours ago
JSON representation
🍩👨 A page that displays quotes from characters from the famous North American cartoon "The Simpsons" coming from the "The Simpsons Quotes" API.
- Host: GitHub
- URL: https://github.com/soaressluiss/the-simpsons-quotes
- Owner: Soaressluiss
- License: mit
- Created: 2023-10-08T18:50:43.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-08T18:57:42.000Z (2 months ago)
- Last Synced: 2024-09-09T13:47:27.944Z (2 months ago)
- Topics: api, axios, radix-ui, react, styled-components, the-simpsons, typescript
- Language: TypeScript
- Homepage: https://the-simpsons-quotes-soaressluiss.vercel.app
- Size: 12.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Tópicos:
- [Deploy](#deploy)
- [Descrição](#descrição)
- [Funcionalidades](#funcionalidades)
- [Tecnologias utilizadas](#tecnologias-utilizadas)
- [Inicie localmente o Projeto](#inicie-localmente)
- [Gif demostrativo](#gif-demostrativo)
- [Como contribuir](#como-contribuir)
## Deploy:
> [The Simpsons quotes 🍩👨🦲](https://the-simpsons-quotes-soaressluiss.vercel.app)
## Descrição:
O projeto consiste em uma página que exibe citações das personagens do famoso desenho norte-americano "[Os Simpsons](https://www.adorocinema.com/series/serie-290/)".
Foi desenvolvido com o objetivo de aprimorar o conhecimento nas tecnologias: React, TypeScript e Styled Components, além de aperfeiçoar as habilidades de integração com a API "[The Simpsons Quotes](https://thesimpsonsquoteapi.glitch.me/)" por meio do uso do Axios para realizar requests HTTP.
[Topo](#tópicos)
## Funcionalidades:
- Screen loading inicial;
- Temas light e dark (salvo em LocalStorage);
- Salvar citações (as citações salvas, ficam guardadas no LocalStorage do browser);
- Scroll Infinito para o carregamento de mais quotes;
- Animações;
- Controle de som (play, pause, vol+, vol-, minimizar player)
- Buscar personagens por nome;
- SEO - (Search Engine Optimization (otimização para mecanismos de busca));
- Responsividade a diversos tamanhos de tela (desktops, tablets e smartphones);
[Topo](#tópicos)
## Tecnologias utilizadas:
| Tecnologias | Ícones |
| :-----------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: |
| [**React**](https://react.dev/) | 
|
| [**React Router Dom v.6**](https://reactrouter.com/en/main) | 
|
| [**React Icons**](https://react-icons.github.io/react-icons/) | 
|
| [**Styled Components**](https://styled-components.com/) | 
|
| [**TypeScript**](https://www.typescriptlang.org/) | 
|
| [**Axios**](https://axios-http.com/) | 
|
| [**Radix UI**](https://www.radix-ui.com/) | 
|
| [**Vite**](https://vitejs.dev/) | 
|
[Topo](#tópicos)
## Inicie localmente:
Primeiro certifique-se de ter o [Node](https://nodejs.org/en) instalado em sua máquina.
clone o projeto através do comando:
```
git clone https://github.com/Soaressluiss/the-simpsons-quotes.git
```
Vá para o diretório da pasta:
```
cd the-simpsons-quotes
```
Instale todas as dependências:
```
npm install
```
Inicie o projeto com o comando:
```
npm run dev
```
[Topo](#tópicos)
## Gif demostrativo:
[Topo](#tópicos)
## Como contribuir:
- Faça um Fork desse repositório.
- Crie uma branch com a sua feature:
`git checkout -b my-feature`
- Commit suas mudanças: ` git commit -m 'feat: My new feature'`
- Push a sua branch: `git push origin my-feature`
[Topo](#tópicos)
Esse projeto está sob a licença MIT. Veja o arquivo [License](./License) para mais detalhes.
#### Feito com ❤ por [Luís Soares](https://github.com/Soaressluiss) ©2024
#### Gostou do projeto? Me mande uma mensagem!😄
[Topo](#tópicos)