Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/daraperini/learning-react-organo

My first React project evolved through time and became a 3-version project
https://github.com/daraperini/learning-react-organo

javascript react typescript-react virtual-dom

Last synced: 14 days ago
JSON representation

My first React project evolved through time and became a 3-version project

Awesome Lists containing this project

README

        

# Organo

My (first!) React project was firstly created during Alura's class *React: developing with JavaScript* and gained three versions during Alura's degree *Explore React with JavaScript*: the class version, my own personal version and a TypeScript version. All of them are called Organo: a website to organize teams.

My own version was developed thinking about the organization of Valorant players sorting them according to their *roles* and preferred character.

In the class' version you'll se some extra mechanisms in comparison to my personal version as it was created from React's theoretic studies. You can alter the DOM as you wish: change teams' colors, add new teams, delete team members and mark them as favorites in this version.

And the TypeScript version was done using Organo's base project. I used the initial project that was done in JS and refactored the components in TS.

## Used tools:

* React
* JavaScript
* TypeScript

*(Alura is a Brazilian technology school and for acessibility reasons this code is in Portuguese)*

## Initializing project's versions on your computer

- Clone the repository using the command line:
- git clone *link of the repository*
- cd *file of the repository*

- Go to the version's file:
- cd *name of the file*

- Run the code:
- npm install (to install all project's dependencies)
- npm start (to open the project on your browser)

* In case the project does not opend automatically type http://localhost:3000 on your browser

#

# Organo

Esse projeto (meu primeiro projeto em React!) iniciou no curso *React: desenvolvendo com JavaScript*, da Alura, e ganhou três versões durante a formação *Explore React com JavaScript*: A versão dos cursos, a minha versão pessoal e uma versão em TypeScript. Todas as versões são chamadas Organo, um site criado com o objetivo de organizar times.

Meu projeto foi desenvolvido pensando na utilização do Organo para a organização de jogadores de Valorant de acordo com seu *role* e o personagem de preferência.

Na versão do curso você encontrará alguns mecanismos extras do da minha versão pessoal, sendo que este foi desenvolvido a partir do estudo conceitual do React. Nele você pode alterar o DOM de acordo com seu gosto, além de adicionar novos times, deletar participantes e favoritá-los.

Já a versão escrita em TypeScript foi realizada a partir do projeto base do Organo. Nessa versão utilizei o projeto inicial feito em JS e refatorei todos os componentes usando TS.

## Ferramentas utilizadas:

* React
* JavaScript
* TypeScript

## Iniciando as versões do projeto na sua máquina

- Clone o repositório através do terminal:
- git clone *link do repositório*
- cd *pasta do repositório*

- Entre na pasta da versão que você deseja iniciar:
- cd *nome da pasta*

- Rode o código na sua máquina:
- npm install (para instalar as dependências do projeto)
- npm start (para abrir o projeto no seu navegador)

* Caso o projeto não abra automaticamente, digite http://localhost:3000 no seu navegador