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

https://github.com/caiooanderson/materialui-space

Projeto feito para aprimorar conhecimento na utilização do MaterialUI, React-Router e Responsividade.
https://github.com/caiooanderson/materialui-space

material-ui react react-router typescript

Last synced: 3 months ago
JSON representation

Projeto feito para aprimorar conhecimento na utilização do MaterialUI, React-Router e Responsividade.

Awesome Lists containing this project

README

          

# 🌌 SpaceView

**SpaceView** é uma aplicação interativa e visualmente imersiva que permite explorar o universo de forma dinâmica. Utilizando animações em 3D para mostrar diferentes ambientes por onde já passei (cursos/bootcamps) com **Three.js**, **React Three Fiber** e uma interface moderna e responsiva com **Material UI**.

## 🚀 Tecnologias Utilizadas

* **React** com **TypeScript**
* **Vite** para bundling rápido
* **Three.js** com **@react-three/fiber** e **@react-three/drei** para visualização 3D
* **Material UI** para componentes modernos e responsivos
* **Framer Motion** para animações fluidas
* **React Router v7** para navegação entre rotas
* **ESLint** e **TypeScript ESLint** para padronização de código

## 📦 Instalação

1. Clone o repositório:

```bash
git clone https://github.com/CaiooAnderson/MaterialUI-Space.git
```

2. Acesse o diretório do projeto:

```bash
cd MaterialUI-Space
```

3. Instale as dependências:

```bash
npm install
```

## 🧪 Scripts Disponíveis

`npm run dev`


Inicia o servidor de desenvolvimento

`npm run build`


Compila o projeto para produção

`npm run start`


Alias para **dev**

## 🌠 Funcionalidades Principais

* 🌍 Visualização de planetas em 3D com rotação e iluminação das estrelas
* 🛰️ Interface imersiva com background animado de estrelas
* 🔭 Botões interativos como **Iniciar**, **Informações**, **Cursos**
* 💡 Suporte a temas Light/Dark
* 📡 Transições entre telas com React Hooks, Router, Context.

## 🗂️ Estrutura Inicial

O projeto segue uma estrutura modular, com componentes organizados e lógica separada entre animações 3D e interface UI.

## 📘 Requisitos

* Node.js ^18+
* Navegador moderno com suporte a WebGL