Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/faustinopsy/card-perfil
Este projeto é uma aplicação de página única (SPA) desenvolvida com React. O foco principal é exibir uma série de "cards" interativos que, quando clicados, redirecionam o usuário para uma página de detalhes com informações mais aprofundadas.
https://github.com/faustinopsy/card-perfil
css3 javascript reactjs
Last synced: 21 days ago
JSON representation
Este projeto é uma aplicação de página única (SPA) desenvolvida com React. O foco principal é exibir uma série de "cards" interativos que, quando clicados, redirecionam o usuário para uma página de detalhes com informações mais aprofundadas.
- Host: GitHub
- URL: https://github.com/faustinopsy/card-perfil
- Owner: faustinopsy
- Created: 2023-12-14T19:46:55.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2023-12-15T21:42:57.000Z (about 1 year ago)
- Last Synced: 2023-12-16T21:39:36.954Z (about 1 year ago)
- Topics: css3, javascript, reactjs
- Language: JavaScript
- Homepage: https://faustinopsy.github.io/card-perfil/#/
- Size: 277 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Projeto SPA React com Cards Interativos
Este projeto é uma aplicação de página única (SPA) desenvolvida com React. O foco principal é exibir uma série de "cards" interativos que, quando clicados, redirecionam o usuário para uma página de detalhes com informações mais aprofundadas. O projeto demonstra o uso eficiente de React, React Router para navegação, e Fetch API para carregar dados dinâmicos de um arquivo JSON.
## Funcionalidades
Exibição de Cards: Mostra uma lista de cards na página inicial, cada um representando um item distinto.
Navegação Interativa: Cada card é clicável e redireciona para uma página de detalhes com mais informações.
Dados Dinâmicos: As informações dos cards são carregadas dinamicamente de um arquivo JSON.
Design Responsivo: A aplicação é responsiva, adequando-se a diferentes tamanhos de tela.
## Dependências
Para executar este projeto, as seguintes dependências precisam ser instaladas:
React: Biblioteca JavaScript para construir a interface do usuário.
React Router: Biblioteca para gerenciamento de navegação em aplicações React.
Vite: Ferramenta de build front-end que oferece uma experiência de desenvolvimento mais rápida.
## Configuração e Execução
### Pré-requisitos
Antes de iniciar, certifique-se de que você tem o Node.js, npm e Vite instalados em sua máquina. O Node.js e o npm podem ser baixados e instalados a partir do site oficial do Node.js. O Vite pode ser instalado via npm.
### Instalação
Clone o repositório do projeto:
```
git clone https://github.com/faustinopsy/card-perfil
```
Navegue até a pasta do projeto e instale as dependências:
```
cd card-perfil
npm install
```
O Vite é necessário para servir e construir a aplicação. Para instalá-lo globalmente, execute:
```
npm install -g vite
```
## Demonstração
Insira um gif ou um link de alguma demonstração
## Executando o Projeto:
```
npm run dev
```
## Contribuições
Contribuições são sempre bem-vindas! Para contribuir, por favor, siga estes passos:
Faça um fork do projeto.
Crie uma nova branch: git checkout -b feature/nome-da-feature.
Faça suas alterações e commit: git commit -m 'Adicionei uma nova feature'.
Envie para a branch original: git push origin feature/nome-da-feature.
Crie um pull request.