analimazn / challenge-magrathea-frontend Goto Github PK

https://challenge-magrathea-frontend.herokuapp.com/

Versões

node: v12.18.1
npm: 6.14.5
yarn: 1.22.4

Site fictício para demonstrar Meetups localizados na região de Joinville.

1. Instalação
2. Inicializando a aplicação
3. Estrutura do Projeto
   1. Sobre Public
   2. Sobre Routes
   3. Sobre Services
   4. Sobre Containers
   5. Sobre Components
   6. Sobre Styles
   7. Sobre Utils
4. Dependências do projeto

Para instalar as dependências utilize as linhas de comando do yarn.

yarn install

Crie o arquivo .env e preencha de acordo com o arquivo .env.example.

É importante que a URL da API contenha a / ao final.

Ex:

REACT_APP_API_URL=http://localhost:3000/

No arquivo .env é possível utilizar a API que está disponível no endereço https://challenge-magrathea-backend.herokuapp.com/ em um servidor no Heroku, ou, se preferir, você pode baixar e configurar a API localmente através deste repositório.

Após instalar e preencher o arquivo .env, execute o comando abaixo para iniciar a aplicação localmente:

yarn start

ou

npm start

Por padrão o projeto irá inicializar no endereço http://localhost:3000/ ou http://localhost:300X/, podendo ser o X um número de acordo com a quantidade de instâncias que estão executando. Ex: Poderá ser 3001 caso a API já esteja executando na porta 3000.

├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── README.md
└── src
    ├── App.js
    ├── components
    │   ├── CardEvent
    │   │   ├── CardEvent.jsx
    │   │   ├── index.jsx
    │   │   └── styles.css
    │   ├── CardMeetup
    │   │   ├── CardMeetup.jsx
    │   │   ├── index.jsx
    │   │   └── styles.css
    │   └── Header
    │       ├── Header.jsx
    │       ├── index.jsx
    │       └── styles.css
    ├── containers
    │   ├── EventsList
    │   │   ├── EventsList.jsx
    │   │   ├── index.jsx
    │   │   └── styles.css
    │   └── MeetupsList
    │       ├── index.jsx
    │       ├── MeetupsList.jsx
    │       └── styles.css
    ├── index.js
    ├── routes
    │   ├── EventsRoute
    │   │   ├── EventsRoute.jsx
    │   │   └── index.jsx
    │   ├── index.jsx
    │   └── MeetupsRoute
    │       ├── index.jsx
    │       └── MeetupsRoute.jsx
    ├── services
    │   ├── Api.js
    │   ├── Events.js
    │   └── Meetups.js
    ├── styles
    │   └── global.css
    └── utils
        └── format.js

O diretório public armazena o index.html utilizado no projeto.

O diretório de routes é responsável renderizar as páginas com as informações corretas obtidas pelos services.

O diretório de services é responsável por realizar a conexão com a API e carregar os dados que serão utilizados na aplicação.

O diretório de containers é responsável por agrupar diferentes componentes que serão utilizados para compor a página.

O diretório de components é responsável por armazenar componentes mais específicos e consistentes para que sejam reutilizados na aplicação em diferentes páginas.

O diretório de styles é responsável pelos arquivos globais de estilização, ou seja, que afetam a aplicação como um tudo.

O diretório de utils contém funções genéricas que podem auxiliar em pequenas formatações de dados na aplicação.

• axios: Biblioteca responsável por realizar requisições HTTP.
• moment: Biblioteca responsável por validar e manipular datas.
• react: Biblioteca Javascript para construir interfaces.
• bootstrap: Framework CSS para criar componentes estilizados.
• react-bootstrap: Adaptação do Bootstrap para o React.
• react-icons: Biblioteca com uma coleção de famosos ícones componentizados para o React.
• react-router-dom: Biblioteca que possibilita sincronização entre UI e URL.