Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/daraperini/learning-react-space-app
A Space React project built with Styled Components.
https://github.com/daraperini/learning-react-space-app
javascript react styled-components
Last synced: 13 days ago
JSON representation
A Space React project built with Styled Components.
- Host: GitHub
- URL: https://github.com/daraperini/learning-react-space-app
- Owner: daraperini
- Created: 2023-11-29T19:46:33.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-01-11T14:10:39.000Z (10 months ago)
- Last Synced: 2024-01-11T20:49:19.154Z (10 months ago)
- Topics: javascript, react, styled-components
- Language: JavaScript
- Homepage: https://space-app-teal.vercel.app
- Size: 1.85 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SpaceApp
SpaceApp was created during Alura's class *React: Styles Components and static files manipulation*. This is a Vite project and I used Styled Components throughout it's development. It was created from scratch so I was able to apply HTML, CSS, JS and React knowledges while developing it.
As the focus of the project was using Styled Components the components where developed and programmed to be used only with stactical components.
The project has a responsive design so go and test it in the tablet and mobile sizes :)
## Used tools:
* React
* HTML
* JavaScript
* Styled Components
*(Alura is a Brazilian technology school and for acessibility reasons this code is in Portuguese)*
> To see the final layout click [here](https://space-app-teal.vercel.app/) but the images will not load. I suggest you follow the next steps:
Clone the repository to visualize the project correctly:
## Initializing the project on your computer
- Clone the repository using the command line:
- git clone *link of the repository*
- cd *file of the repository*
- You can also download the zip file
- Unzip it
- cd *name of the file*
- Run the code:
- npm install (to install all project's dependencies)
- npm run dev
- Copy and paste the Local link in your browser (to open the project)
#
# SpaceApp
O SpaceApp foi desenvolvido a partir do curso *React: estilize componentes com Styled Components e manipule arquivos estáticos*. Este é um projeto Vite e foi utilizado *Styled Components* em todo o seu desenvolvimento. Ele foi desenvolvido do zero, portanto foi possível aplicar conhecimentos de HTML, CSS, JS e React durante todo o desenvolvimento.
Como o projeto foi desenvolvido com foco na aplicação do Styled Components, os componentes foram pensados e programados para utilização apenas em arquivos estáticos.
O design é totalmente responsivo, então teste no tamanho tablet e mobile para ver as diferenças de layout :)
## Ferramentas utilizadas:
* React
* HTML
* JavaScript
* Styled Components
> Você pode visualizar o layout clicando [aqui](https://space-app-teal.vercel.app/) mas as imagens não carregarão. Indico que siga os próximos passos:
Para visualizar o projeto corretamente, baixe o repositório:
## Iniciando o projeto na sua máquina
- Clone o repositório através do terminal:
- git clone *link do repositório*
- cd *pasta do repositório*
- Caso prefira, faça download do arquivo compactado
- Descompacte a pasta
- cd *pasta do repositório*
- Rode o código na sua máquina:
- npm install (para instalar as dependências do projeto)
- npm run dev
- Copie o link Local e cole no seu navegador (para abrir o projeto)