Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/charlesbrun/code-hero
https://github.com/charlesbrun/code-hero
react styled-components typescript
Last synced: 17 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/charlesbrun/code-hero
- Owner: CharlesBrun
- Created: 2024-08-09T00:46:49.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-08-10T16:26:00.000Z (3 months ago)
- Last Synced: 2024-10-10T17:22:49.167Z (about 1 month ago)
- Topics: react, styled-components, typescript
- Language: TypeScript
- Homepage:
- Size: 1.78 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Marvel Characters Project
## Description
This project allows users to search and view details about Marvel characters. The application uses the Marvel API to retrieve data on characters, comics, series, stories, and events.
## Technologies Used
- **React**: JavaScript library for building user interfaces.
- **TypeScript**: A superset of JavaScript that adds static typing.
- **Styled Components**: Library for styling React components using CSS-in-JS.
- **Yarn**: Package manager for the project.
## Features
- **Character Search**: Allows searching for Marvel characters by name.
- **Detail Display**: Shows details of the selected character, including comics, series, stories, and events.
- **Pagination**: Navigate through search results using pagination.
## Installation
To install the project dependencies, use Yarn. Run the following command at the root of the project:
```bash
yarn install
```
## Script
- **Start the Application**: To start the application, run:
```bash
yarn start
```
## Project Structure
- **`src/`**: Contains the source of the application.
- **`components/`**: Components of the application.
- **`pages/`**: Pages of the application.
- **`context/`**: Contexts for state management.
- **`services/`**: Services for API calls.
- **`styles/`**: Global styles and themes.
- **`interfaces/`**: TypeScript types and interfaces.
- **`public/`**: Static files and the basic HTML structure.
- **`package.json`**: Project configuration and scripts.
- **`tsconfig.json`**: TypeScript configuration.
# Projeto Personagens da Marvel
## Descrição
Este projeto permite buscar e visualizar detalhes sobre personagens da Marvel. A aplicação utiliza a API da Marvel para obter dados sobre personagens, quadrinhos, séries, histórias e eventos.
## Tecnologias Utilizadas
- **React**: Biblioteca JavaScript para construção de interfaces de usuário.
- **TypeScript**: Superset do JavaScript que adiciona tipagem estática.
- **Styled Components**: Biblioteca para estilização de componentes React utilizando CSS-in-JS.
- **Yarn**: Gerenciador de pacotes para o projeto.
## Funcionalidades
- **Busca de Personagens**: Permite buscar personagens da Marvel por nome.
- **Exibição de Detalhes**: Mostra detalhes do personagem selecionado, incluindo quadrinhos, séries, histórias e eventos.
- **Paginação**: Navegue pelos resultados da busca utilizando paginação.
## Instalação
Para instalar as dependências do projeto, utilize o Yarn. Execute o seguinte comando na raiz do projeto:
```bash
yarn install
```
## Script
- **Iniciar a Aplicação**: Para iniciar a aplicação, execute:
```bash
yarn start
```
## Estrutura do Projeto
- **`src/`**: Contém o código-fonte da aplicação.
- **`components/`**: Componentes reutilizáveis da aplicação.
- **`pages/`**: Páginas da aplicação.
- **`context/`**: Contextos React para gerenciamento de estado.
- **`services/`**: Serviços para chamadas à API.
- **`styles/`**: Estilos globais e temas.
- **`interfaces/`**: Tipos e interfaces TypeScript.
- **`public/`**: Arquivos estáticos e a estrutura básica do HTML.
- **`package.json`**: Configuração do projeto e scripts.
- **`tsconfig.json`**: Configuração do TypeScript.