https://github.com/victor-lis/mathquiz

App para treinar suas habilidades matemáticas usando React Native!
https://github.com/victor-lis/mathquiz

firebase firebase-auth firebase-database react-native react-navigation

Last synced: 22 days ago
JSON representation

App para treinar suas habilidades matemáticas usando React Native!

• Host: GitHub
• URL: https://github.com/victor-lis/mathquiz
• Owner: Victor-Lis
• Created: 2023-12-14T14:44:58.000Z (11 months ago)
• Default Branch: master
• Last Pushed: 2024-02-27T00:18:44.000Z (9 months ago)
• Last Synced: 2024-10-12T10:11:33.536Z (about 1 month ago)
• Topics: firebase, firebase-auth, firebase-database, react-native, react-navigation
• Language: JavaScript
• Homepage:
• Size: 1.05 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# Math Quiz (Stop Matemático)

Esse foi um projeto que tive muita dedicação e carinho no processo de criação. 

A ideia começou de um professor meu, baseado como o próprio nome sugere, em uma espécie de parente do jogo "Stop", mas ao invés de coisas no geral, focado em matemática, no caso com operações e números sorteados.

Achei a ideia muito boa, mas acreditei que a proposta do professor era muito simples, então adicionei algumas coisas que acreditei que cabiam no projeto, como: 

- Login e definição de usuários;

- Foto de perfil dos usuários, para gerar identificação maior com o App e mais fácil;

- Alteração dos dados do usuário;

- Níveis de dificuldade (baseado na escolaridade);

- Timer dinâmico durante a partida, para gerar mais adrenalina;

- Resultado instantâneo logo após a resposta.

- Gravação no Firebase da melhor partida (separada por dificuldade);

- Para gerar mais motivação nos usuários adicionei sistema de ranking, com base nos acertos e no tempo.

## Desafios

Já havia usado muitos dos elementos desse projeto, como:

- useContext()

- FirebaseAuth

- Firebase RealtimeDB

- StackNavigation

Enfim, mas o grande detalhe é: Eu nunca havia usado todos esses e muito mais juntos, em um projeto grande, essa foi a primeira vez, então foi bem desafiador.

## Techs



  

  



## Aprendizados

Por final aprendi algumas coisas interessantes como: 

- Renderização condicional das rotas, com base no login(ou não) do usuário;

- Criação de um useContext();

- Mais de um sistema de navegações no mesmo App.

### Renderização dinâmica das rotas, com base no login

```js

export default function Routes(){

    const { signed, loading } = useContext(AuthContext)

    

    if(loading){

        return(

            

                

            

        )

    }

    return(

        signed?  : 

    )

}

```

### useContext passando os valores de auth

Abaixo vou colocar uma versão resumida de como funciona o useContext...

```js

import React, { useContext } from 'react'

export const AuthContext = createContext({})

export default function AuthProvider({ children }) {

    return (

        

            {children}

        

    )

}

```

## Navegações

#### 1- No signed

```js

import React from 'react'

import { createNativeStackNavigator } from '@react-navigation/native-stack'

import SignIn from '../Pages/SignIn'

import SignUp from '../Pages/SignUp'

const AuthStack = createNativeStackNavigator()

export default function AuthRoutes(){

    return(

        

            

                      

        

    )

}

```

#### 2- App Navigation (signed)

```js

import React from 'react'

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

import Home from '../Pages/Home2'

import RankingRoutes from './ranking.routes';

import UserRoutes from './user.routes';

const AppTabs = createBottomTabNavigator()

export default function AuthRoutes() {

    return (

        

            

            

            

        

    )

}

```

#### 3- Ranking Navigation

```js

import React from 'react'

import { createNativeStackNavigator } from '@react-navigation/native-stack'

import Ranking from '../Pages/Ranking'

import RankingList from '../Pages/Ranking/RankingList'

const RankingStack = createNativeStackNavigator()

export default function RankingRoutes(){

    return(

        

            

                      

        

    )

}

```

#### 4- User Navigation

```js

import React from 'react'

import { createNativeStackNavigator } from '@react-navigation/native-stack'

import User from '../Pages/User'

import EditUser from '../Pages/EditUser'

const UserStack = createNativeStackNavigator()

export default function UserRoutes(){

    return(

        

            

                      

        

    )

}

```

# Resultado



    
 Sign In 

    

    


    
 Sign Up 

    

    


    
 Home - Fundamental I 

    

    


    
 Home - Fundamental II 

    

    


    
 Home - Ensino Médio 

    

    


    
 Home - Ensino Superior 

    

    
   

    
 Home - Game 

    

    
      

    
 Rankings - 1 

    

    
  

    
 Rankings - 2 

    

    
  

    
 User 

    

    
  

    
 User - Changing Datas 

    

    




## Vídeo do projeto

[Veja um vídeo curto demonstrando o App!](https://youtube.com/shorts/dpOW0SbrpTA)

## Autores

- [@Victor-Lis](https://github.com/Victor-Lis)