Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/epiled/space-app

🌌 Site de astrologia onde exploramos os mistérios do espaço.
https://github.com/epiled/space-app

react sass styled-components

Last synced: about 2 hours ago
JSON representation

🌌 Site de astrologia onde exploramos os mistérios do espaço.

Host: GitHub
URL: https://github.com/epiled/space-app
Owner: Epiled
License: mit
Created: 2024-02-18T08:28:50.000Z (9 months ago)
Default Branch: main
Last Pushed: 2024-08-07T16:18:37.000Z (3 months ago)
Last Synced: 2024-08-08T17:34:55.591Z (3 months ago)
Topics: react, sass, styled-components
Language: JavaScript
Homepage:
Size: 1.88 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # 🌌 Space App

Projeto do curso React: estilize componentes com Styled Components e manipule arquivos estáticos, ministrado pelos instrutores João Vitor Pereira e  Vinicios Neves.

| :placard: Vitrine.Dev |     |

| -------------  | --- |

| :sparkles: Nome        | **Space App**

| :label: Tecnologias | react, sass, styled components, html, css, js, node, vite, eslint

![banner](https://github.com/user-attachments/assets/5cf2b3f3-81f5-4916-8908-c15cb94346fe#vitrinedev)

 📃 Detalhes do projeto 


Bem-vindo ao nosso site de Astrologia, onde exploramos os mistérios das luas, planetas e galáxias! Aqui, você encontrará um curso completo que combina a magia do universo com as mais modernas técnicas de desenvolvimento web usando React e Styled Components. Este curso foi projetado para aqueles que desejam mergulhar no cosmos da astrologia e aprender a criar interfaces deslumbrantes e funcionais.

![Badge](https://img.shields.io/github/last-commit/Epiled/space-app?style=for-the-badge)

![Badge](https://img.shields.io/github/languages/code-size/Epiled/space-app?style=for-the-badge)

![Badge](https://img.shields.io/github/languages/count/Epiled/space-app?style=for-the-badge)

![Bagde](https://img.shields.io/badge/repo%20status-Beta-cyan?style=for-the-badge)

![Bagde](https://img.shields.io/github/v/release/Epiled/space-app?style=for-the-badge)

![Bagde](https://img.shields.io/github/license/Epiled/space-app?style=for-the-badge)

![Badge](https://img.shields.io/badge/-React-61DAFB?style=for-the-badge&logo=react&logoColor=black)

![Badge](https://img.shields.io/badge/-Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white)

![Badge](https://img.shields.io/badge/-Styled%20Components-DB7093?style=for-the-badge&logo=styledcomponents&logoColor=white)

![Badge](https://img.shields.io/badge/-HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)

![Badge](https://img.shields.io/badge/-CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)

![Badge](https://img.shields.io/badge/-JS-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)

![Badge](https://img.shields.io/badge/-Node.js-339933?style=for-the-badge&logo=node.js&logoColor=white)

![Badge](https://img.shields.io/badge/-Vite.js-646CFF?style=for-the-badge&logo=vite&logoColor=white)

![Badge](https://img.shields.io/badge/-ESLint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white)

 📑 Tabela de Conteúdos 


   * [Detalhes do projeto](#detalhes-do-projeto)

   * [Tópicos Desenvolvidos](#topicos-curso)

   * [Demonstração](#demonstracao)

     - [Home](#home)

   * [Pré-Requisito](#pre-requisito)

   * [Instalação](#instalacao)

   * [Como usar](#como-usar)

   * [Tecnologias](#tecnologias)

   * [Autor](#autor)

 👩‍🏫 Tópicos desenvolvidos


    * Diferencie o Vite do CRA e conheça as vantagens do uso do Styled Components

    * Utilize styled-components para criação de uma NavBar e estilização de um banner

    * Projete e implemente componentes React para exibir imagens e legendas

    * Aplique estilos personalizados e acessíveis para uma galeria de fotos

    * Adicione uma barra lateral de imagens populares e footer

 👀 Demonstração 


 Home 


https://github.com/user-attachments/assets/80b66cac-5e60-480d-b535-d696b74ed083

https://github.com/user-attachments/assets/90d1d8bf-f0fe-47f3-acb2-8283166271b2

 🚨 Pré-requisito 



  Node



 ⚙ Instalação 


```

1. git clone https://github.com/Epiled/space-app.git

2. cd space-app

3. npm install

```

 👩‍🏫 Como usar 


```

1. Abra no seu terminal o diretorio "space-app"

2. npm run dev

2. Caso a url não abra sozinha acesse através deste caminho http://localhost:5173/

```

 🛠 Tecnologias 


As seguintes tecnologias foram usadas na construção deste projeto:



  React

  Sass

  Styled Components

  HTML5

  CSS3

  JavaScript

  Node.js

  Vite

  ESLint



 👨‍💻 Autor 




![Felindo](https://user-images.githubusercontent.com/55258483/178338085-2cea8bf2-6d0c-409a-9d0e-23359b7d303e.png)

 


 _{Felipe De Andrade}

Feito com ❤️ por Felipe De Andrade 👋🏽 Entre em contato!

[![Linkedin Badge](https://img.shields.io/badge/-Felipe-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/fademendonca/)](https://www.linkedin.com/in/fademendonca/)

[![Gmail Badge](https://img.shields.io/badge/[email protected]?style=flat-square&logo=Gmail&logoColor=white&link=mailto:[email protected])](mailto:[email protected])

[![Instagram Badge](https://img.shields.io/badge/-Instagram-e4405f?style=flat-square&logo=Instagram&logoColor=white&link=https://www.instagram.com/felipe.deam/)](https://www.instagram.com/felipe.deam/)

[![Codepen Badge](https://img.shields.io/badge/-Codepen-000000?style=flat-square&logo=Codepen&logoColor=white&link=https://codepen.io/epiled)](https://codepen.io/epiled)