Skip to content

lucassmaniotto/Hello-World

Repository files navigation

Hello World!

Portifólio implementado com Create React App no curso de React Router da Alura.

🪧 Vitrine.Dev
✨ Nome Hello World!
🏷️ Tecnologias javascript, html, styled-components, npm, react
🚀 URL https://hello-world-lucassmaniotto.vercel.app/
🖥 Curso https://www.alura.com.br/curso-online-React-desenvolvendo-react-router-javaScript

Banner

Detalhes do projeto

Este projeto é uma Single Page Application (SPA) desenvolvido em ReactJS utilizando React Router durante o curso React: desenvolvendo em React Router com JavaScript da Alura.

⚙️ Configurando o projeto

Para que o projeto funcione corretamente, é necessário instalar as dependências do projeto. Para isso, basta executar o comando abaixo no terminal:

npm install

▶️ Executando o projeto

No diretório do projeto, você pode executar:

npm start

Com o comando acima, você irá rodar o projeto em modo de desenvolvimento que pode ser acessado em http://localhost:3000 no seu navegador.

📚 Bibliotecas

💡 Funcionalidades

Rotas

Visto que o projeto é uma SPA, o mesmo funciona como uma página só, através de rotas gerenciadas pelo React Router:

image

As rotas consistem em duas abas, uma de Home Page que possui meus projetos principais desenvolvidos e disponibilizados no Github, e uma página Sobre Mim que conta um pouquinho da minha história com programação, além de coisas que eu gosto bastante.

ezgif com-gif-maker

Renderização de artigos

Para cada página de artigo, o conteúdo é renderizado em uma rota dinâmica projects/:id com o conteúdo de json de cada projeto no qual ocorre iterações sobre o mesmo e transformado em Markdown com o React Markdown:

image

image

image

Tratamento de Rotas

Caso aconteça algum direcionamento de rota de erro, uma página 404 é renderizada com um cachorro salsicha informando possíveis causas e um botão de voltar a página anterior, seja ela Home, Sobre Mim ou de algum Projeto.

ezgif com-gif-maker

Card de sugestões

Ao final de cada artigo de Projeto, a página disponibiliza uma rota diferente para um próximo projeto, através de métodos do JavaScript de filter, sort e slice:

image