Trilha ReactJS

Projeto   |    Tecnologias   |    Layout   |    Licença

Podcastr

Projeto desenvolvido para gerenciar seus podcasts. Projeto realizado na Next Level Week #5 @Rocketseat.

O melhor para você ouvir, sempre. 🎧🎶

Funcionalidades

• Escutar podcast.
• Visualizar sobre o que se trata o podcast.
• Gerenciar podcasts.
• ❌ Modal Cookies consent
• ❌ Site responsivo.

Desafios

✔ - Documentar bem o projeto
✖ - Melhorar o estilo: Responsividade e Design
✖ - Banco de dados
✖ - Next PWA

Funcionalidades:
    - Trocar o tema da aplicação: Light e Dark
    ✖ - COOKIES:
        - Cookies consent
        - Guardar dados
        - Alterar dados
        - Deletar dados
    ✖ - SQL:
        - Guardar dados
        - Alterar dados
        - Deletar dados
    - Telas:
        ✔ - Home
        ✔ - Episodes
        - 404

Erros de layout da NLW#5 🚧 ⇄ Consertos 🛠⚙

• (error 1) - Img diminuída ou nem aparecendo no 'card' .latestEpisodes ul li.
• (error 2) - Scroll lateral, componentes transbordando.

Fixed error 1:

    /* Adicione 'width: 1%;' dentro de '.episodeDetails {}' */
    .episodeDetails {
        width: 1%; /* NOVA LINHA */
        margin-left: 1rem;
        flex: 1;

        a {/*...*/}
        p {/*...*/}
        span {/*...*/}
    } /* - home.module.scss */

Fixed error 2:

    /* Config. for Notebooks with small screen */
    @media (max-width: 1366px) {
        html {
            font-size: 80%;
        }
    } /* - global.scss */

    /**
     * Você pode editar o valor da 'max-width'
     * caso não sirva totalmente para o seu caso,
     * assim como criar outras media queries para
     * outros tamanhos de tela se preferir.
     */

    /* --------------------------------------- */

    /* Config. for Tablet & Mobile */
    @media (max-width: 1220px) {
        .latestEpisodes {
            ul {
                grid-template-columns: 1fr;
                grid-template-rows: repeat(2, 1fr);
            }
        }
    } /* - home.module.scss */
    /**
     * Esta configuração faz com que telas que
     * tenham uma largura menor que 1220px, as
     * ul's se adaptem e quebrem de linha,
     * ocupando assim uma coluna e duas linhas.
     */

Tecnologias 🚀

Esse projeto foi desenvolvido com as seguintes tecnologias:

• Html | 5
• Sass | ^1.32.11
• Typescript | ^4.2.4
• ReactJS | ^17.0.2
• NextJS | ^10.1.3
• NodeJS | ^14.16.1

Layout 🚧

Desktop Screenshot

Ver mais

Mobile Screenshot

Em breve...

Rodando o projeto 🚴🏻‍♂️

"Só vou dar uma olhadinha...":

🎧 Site hospedado na Vercel 🎶

Na sua maquina:

Dependências

    "dependencies": {
        "axios": "^0.21.1",
        "date-fns": "^2.21.1",
        "next": "10.1.3",
        "rc-slider": "^9.7.2",
        "react": "17.0.2",
        "react-dom": "17.0.2",
        "sass": "^1.32.11"
    },
    "devDependencies": {
        "@types/node": "^14.14.41",
        "@types/react": "^17.0.3",
        "@types/react-dom": "^17.0.3",
        "json-server": "^0.16.3",
        "typescript": "^4.2.4"
    }
    //Ex: $ npm install @types/_____ -D

# Clone o repositório
$ git clone https://github.com/NyctibiusVII/Podcastr.git

# Acesse a pasta do projeto no prompt de comando
$ cd podcastr

# Instale as dependências
$ npm install

# Execute o script "dev"
$ npm run dev

# O projeto inciará na porta: 3000 - acesse http://localhost:3000

Contribuição 💭

Para construir essa aplicação tive a ajuda do professor Diego Fernandes da Rocketseat que disponibilizou video aulas do projeto Podcastr e tive uma ajuda desta grande comunidade que a Rocketseat construiu no Discord. Feito com ♥ by Rocketseat 👋 Participe da nossa comunidade!

Hashtags #

Dias	Hashtags
Dia 1	#MissãoEspacial
Dia 2	#EmBuscaDoPróximoNível
Dia 3	#Astronautas
Dia 4	#UniversoInfinito
Dia 5	#MissãoCumprida

Licença ⚖️

Este projeto está sob a licença do MIT. Veja o arquivo LICENSE para mais detalhes.

Contato ✉️

@MatheusVidigal🦊