ildaneta/challenges

👩🏻‍💻 This repository is dedicated to challenges that I perform in random ways, which can be from a study, or an application for articles that I create. 😊

🙋🏻‍♀️ Hi, My name is Ilda Neta

See about me.

challenges's Issues

Aba de configurações

Acho bom você criar uma aba de configurações,
e você coloca coisas como o tema, Dark ou Light e outras coisas.

financial app code review

You may want to install prettier to format code automatically

then setup a commit hook like this to run in each commit/push/etc... https://github.com/FotonTech/golden-stack/blob/08935c5d145dbca2975a4ce7c7a77fe40de418df/package.json#L44-L56 also use: husky, lint-staged https://github.com/FotonTech/golden-stack/blob/master/husky.config.js

add --fix flag to auto fix issues

challenges/financialApp/package.json

Line 10 in e847d59

"lint": "eslint ."

I don't use imports like this anymore because it doesn't scale very well after a certain size.

challenges/financialApp/src/pages/Cards.js

Lines 6 to 12 in e847d59

	import ellipsis from '../assets/images/ellipsis.png';
	import bgCreditCard from '../assets/images/bg-creditCard.png';
	import checkCreditCard from '../assets/images/check-creditCard.png';
	import visa from '../assets/images/visa.png';
	import contactlessPayment from '../assets/images/contactless-payment.png';
	import atmWithDraws from '../assets/images/atm-with-draws.png';
	import onlinePayments from '../assets/images/online-payments.png';

Consider using typescript with tsconfig paths setting, to avoid ../../ in imports, or use a babel plugin (maybe it's called root import I don't remember)

why did you choose to have one challenge repo instead of one repo per challenge? If I want to check out challenge A and clone it I end up cloning challenges B C D too

over-engineering:

challenges/financialApp/src/pages/Cards.js

Lines 52 to 54 in e847d59

	const toggleSwitch = () => setIsEnabled((previousState) => !previousState);
	const toggleSwitch2 = () => setIsEnabled2((previousState) => !previousState);
	const toggleSwitch3 = () => setIsEnabled3((previousState) => !previousState);

just add () => setIsEnabled((previousState) => !previousState) directly to the prop. You can actually do () => setIsEnabled(!isEnabled) should work about the same. The key idea here is to not add unnecessary stuff to the code, some things are just ugly and there's no fix to it, but the main problem is that "making the code nicer" is a very deep hole that will prevent you from shipping :)

cotainer and wrapper mean the same thing:

challenges/financialApp/src/pages/Cards.js

Lines 171 to 172 in e847d59

	</WrapperSwitchButtons>
	</ContainerSwitchButtons>

maybe not the best names to use. Besides this, your variable naming is REALLY GOOD.

usage of responsive lib here is great:

challenges/financialApp/src/pages/cards/styles.js

Line 5 in e847d59

} from 'react-native-responsive-screen';

I personally think that having a folder for styles like this: https://github.com/ildaneta/challenges/blob/master/financialApp/src/pages/cards/styles.js is just "hiding the code" https://twitter.com/thom_is_coding/status/1283433585249259521 if you just put it all into the same file, it would look like a lot of code... which leads me to the next point:

I think this looks good:

challenges/financialApp/src/pages/Home.js

Lines 7 to 15 in e847d59

	function Home() {
	return (
	<>
	<Header />
	<Main />
	<Menu />
	</>
	);
	}

it's a well abstracted component with sub-components. I think this is too much JSX in the same place:

challenges/financialApp/src/pages/Cards.js

Lines 58 to 193 in e847d59

	<StatusBar barStyle="light-content" backgroundColor="#2750a0" />
	<BlueWrapper />
	<Container>
	<WrapperTextMainButton>
	<DivTitleMain>
	<TitleMain>Seus Cartões</TitleMain>
	<ButtonMain>
	<ButtonImage source={ellipsis} />
	</ButtonMain>
	</DivTitleMain>
	<SubTitleMain>1 cartão físico, 1 cartão virtual</SubTitleMain>
	</WrapperTextMainButton>
	<ButtonsContainer>
	<WrapperButton first active style={styles.shadow}>
	<Buttons>Cartão Físico</Buttons>
	</WrapperButton>
	<WrapperButton>
	<Buttons>Cartão Virtual</Buttons>
	</WrapperButton>
	</ButtonsContainer>
	<ContainerImage source={bgCreditCard} />
	<ContainerCard>
	<ContainerCheckNameCard>
	<ContainerCheckCard>
	<IconsCard source={checkCreditCard} />
	</ContainerCheckCard>
	<ContainerCheckCard visa>
	<IconsCard source={visa} visa />
	</ContainerCheckCard>
	</ContainerCheckNameCard>
	<WrapperNumbersCard>
	<ContainerAsteriskCard>
	<ContainerAsteriskCardText>****</ContainerAsteriskCardText>
	</ContainerAsteriskCard>
	<ContainerAsteriskCard>
	<ContainerAsteriskCardText>****</ContainerAsteriskCardText>
	</ContainerAsteriskCard>
	<ContainerAsteriskCard>
	<ContainerAsteriskCardText>****</ContainerAsteriskCardText>
	</ContainerAsteriskCard>
	<ContainerAsteriskCard number>
	<ContainerAsteriskCardText number>2864</ContainerAsteriskCardText>
	</ContainerAsteriskCard>
	</WrapperNumbersCard>
	<ContainerDescriptionDataCard>
	<ContainerDescriptionsCardWrapper>
	<TitleDescriptionsCard>TITULAR DO CARTÃO</TitleDescriptionsCard>
	<DataDescriptionsCard>Ilda E. Neta</DataDescriptionsCard>
	</ContainerDescriptionsCardWrapper>
	<ContainerDescriptionsCardWrapper>
	<TitleDescriptionsCard>VALIDADE</TitleDescriptionsCard>
	<DataDescriptionsCard>05/22</DataDescriptionsCard>
	</ContainerDescriptionsCardWrapper>
	<ContainerDescriptionsCardWrapper>
	<TitleDescriptionsCard>CVV</TitleDescriptionsCard>
	<DataDescriptionsCard>934</DataDescriptionsCard>
	</ContainerDescriptionsCardWrapper>
	</ContainerDescriptionDataCard>
	</ContainerCard>
	<TitleSettingsCards>Configurações do Cartão</TitleSettingsCards>
	<ContainerSwitchButtons>
	<WrapperSwitchButtons>
	<ViewTest>
	<IconsButtons source={contactlessPayment} />
	<TextButtons>Pagamento sem Contato</TextButtons>
	</ViewTest>
	<SwitchButton>
	<Switch
	trackColor={{false: '#E7EBF1', true: '#34B27C'}}
	thumbColor={isEnabled ? '#fff' : '#E7EBF1'}
	ios_backgroundColor="#E7EBF1"
	onValueChange={toggleSwitch}
	value={isEnabled}
	/>
	</SwitchButton>
	</WrapperSwitchButtons>
	</ContainerSwitchButtons>
	<ContainerSwitchButtons>
	<WrapperSwitchButtons>
	<ViewTest>
	<IconsButtons source={onlinePayments} />
	<TextButtons>Pagamento Online</TextButtons>
	</ViewTest>
	<SwitchButton>
	<Switch
	trackColor={{false: '#E7EBF1', true: '#34B27C'}}
	thumbColor={isEnabled2 ? '#fff' : '#E7EBF1'}
	ios_backgroundColor="#E7EBF1"
	onValueChange={toggleSwitch2}
	value={isEnabled2}
	/>
	</SwitchButton>
	</WrapperSwitchButtons>
	</ContainerSwitchButtons>
	<ContainerSwitchButtons last>
	<WrapperSwitchButtons>
	<ViewTest>
	<IconsButtons source={atmWithDraws} />
	<TextButtons>Saque Caixa Eletrônico</TextButtons>
	</ViewTest>
	<SwitchButton>
	<Switch
	trackColor={{false: '#E7EBF1', true: '#34B27C'}}
	thumbColor={isEnabled3 ? '#fff' : '#E7EBF1'}
	ios_backgroundColor="#E7EBF1"
	onValueChange={toggleSwitch3}
	value={isEnabled3}
	/>
	</SwitchButton>
	</WrapperSwitchButtons>
	</ContainerSwitchButtons>
	</Container>
	<Menu />

you should break it down into components so it looks more like Home.js, and carry the styles together with the components, it makes sense to have them together because colocation is kinda good https://twitter.com/sseraphini/status/1121751206924378112

this isn't even a lot of styling: https://github.com/ildaneta/challenges/blob/master/financialApp/src/components/Main/styles.js ditch index.js and styles.js pattern and have them all in the same file, name the file Foo.js. It's better for you to find files and IDE too.

give components meaningful names to help debugging them:

challenges/financialApp/src/components/Main/index.js

Line 32 in e847d59

function Main() {

version 16 has issues with multidex, it's safe to support 21 and up I think

challenges/financialApp/android/build.gradle

Line 6 in e847d59

minSdkVersion = 16

enable hermes :D

challenges/financialApp/android/app/build.gradle

Line 81 in e847d59

enableHermes: false, // clean and rebuild if changing

add release signing config to buid signed apk for prod:

challenges/financialApp/android/app/build.gradle

Lines 146 to 152 in e847d59

	signingConfigs {
	debug {
	storeFile file('debug.keystore')
	storePassword 'android'
	keyAlias 'androiddebugkey'
	keyPassword 'android'
	}

change this line then:

challenges/financialApp/android/app/build.gradle

Line 161 in e847d59

signingConfig signingConfigs.debug

ternaries like this are ok, but I don't think they're the best solution

width: ${(props) => (props.menuCenter ? `${wp('13%')};` : `${wp('15%')};`)};
  height: ${(props) => (props.menuCenter ? `${hp('7')};` : `${hp('5%')};`)};
  margin-bottom: ${wp('2')};
  background: ${(props) => (props.menuCenter ? '#234F9D' : '#eceef2')};
  border-radius: ${(props) =>

It's a hard problem, but at some point in the furure maybe if need stuff like this, you need a component 🤔

Keep up the good work ilda :D really nice to have people like you in the community