{"id":24836821,"url":"https://github.com/glopez-dev/trelltech","last_synced_at":"2025-03-26T03:42:47.022Z","repository":{"id":274087354,"uuid":"921869573","full_name":"glopez-dev/trelltech","owner":"glopez-dev","description":"A project management mobile app in React Native","archived":false,"fork":false,"pushed_at":"2025-01-24T19:18:04.000Z","size":96578,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-24T20:23:06.621Z","etag":null,"topics":["epitech","mobile-app","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/glopez-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-24T19:15:35.000Z","updated_at":"2025-01-24T19:18:07.000Z","dependencies_parsed_at":"2025-01-24T20:33:15.675Z","dependency_job_id":null,"html_url":"https://github.com/glopez-dev/trelltech","commit_stats":null,"previous_names":["glopez-dev/trelltech"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glopez-dev%2Ftrelltech","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glopez-dev%2Ftrelltech/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glopez-dev%2Ftrelltech/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glopez-dev%2Ftrelltech/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glopez-dev","download_url":"https://codeload.github.com/glopez-dev/trelltech/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245585801,"owners_count":20639671,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["epitech","mobile-app","react-native"],"created_at":"2025-01-31T05:43:53.996Z","updated_at":"2025-03-26T03:42:46.984Z","avatar_url":"https://github.com/glopez-dev.png","language":"TypeScript","readme":"# Epitech 6th semester - Mobile dev module - Trelltech\n\nModule: `T-DEV-600`\n\n## Technical Stack \n\n- React Native\n- TypeScript\n- Jest\n- Expo\n- Gluestack UI\n- React Navigation [https://reactnavigation.org/docs/hello-react-navigation]()\n\n## Architecture\n\nModel View ViewModel (MVVM)\n\n**Resources** :\n\n- https://tech.groww.in/apply-mvvm-in-react-native-app-ad77fa0f851b\n\n### How to Use MVVM with React Native?\n\nWhen you are developing a complex project with React Native, you may not be able to maintain the code and structure with ease. MVVM architecture makes the code manageable and ensures that it is scalable.\n\nYou won't need to make any additions to the architecture while adding more views or models to the project Redux and MobX. Before choosing the apt method, you will need to develop a few apps.\n\nBefore we begin coding, we will take a look at MVVM in-depth. We just touched upon how it is valid and the pros and cons. Here we will look at the individual aspects and learn how to code each one for React Native applications.\n\nThe four main blocks for any MVVM include:\n\n- View\n- ViewController\n- ViewModel\n- Model\n\nLet’s understand each block in detail.\n\n\u003cimg src=\"https://www.expertappdevs.com/sitebucket/images/mvvm-components.jpg\" /\u003e\n\n### View\n\nThe view is your Interface, which you build with React Native framework. This is the point where the user will interact with your application.\n\nEither they will input a command, use mouse movements or press a key to trigger the ViewController from the interface.\n\nThe interface doesn’t do much except take in and give out the display data. For instance, if you use the tax calculator, your input will be salary and other details, while the output will be the tax liability.\n\nThe view will only display the numbers and trigger events based on the input in both cases.\n\n```js\nimport React from \"react\";\nimport PokemonList from \"./UI/PokemonList\";\nimport PokemonForm from \"./UI/PokemonForm\";\n\nclass PokemonView extends React.Component {\n  render() {\n    const {\n      pokemons,\n      pokemonImage,\n      pokemonName,\n      randomizePokemon,\n      setPokemonName,\n      addPokemon,\n      removePokemon,\n      shouldDisableSubmit,\n    } = this.props;\n\n    return (\n      \u003cReact.Fragment\u003e\n        \u003cPokemonForm\n          image={pokemonImage}\n          onInputChange={setPokemonName}\n          inputValue={pokemonName}\n          randomize={randomizePokemon}\n          onSubmit={addPokemon}\n          shouldDisableSubmit={shouldDisableSubmit}\n        /\u003e\n        \u003cPokemonList removePokemon={removePokemon} pokemons={pokemons} /\u003e\n      \u003c/React.Fragment\u003e\n    );\n  }\n}\n```\n\n### ViewController\n\nThe ViewController will take up the command and pass it on to the ViewModel.\n\nIt is important to note that one ViewController can pass commands to several ViewModels.\n\nYou won't need to ramp up the controllers in this case. The command will be cleaned, interpreted, and passed to the ViewModel, thus enabling easy access.\n\n```js\nimport React from \"react\";\nimport PokemonView from \"./PokemonView\";\n\nclass PokemonController extends React.Component {\n  state = {\n    pokemonImage: \"1.gif\",\n    pokemonName: \"\",\n  };\n\n  setRandomPokemonImage = () =\u003e {\n    const rand = Math.ceil(Math.random() * 10);\n    this.setState({ pokemonImage: `${rand}.gif` });\n  };\n\n  setPokemonName = (e) =\u003e {\n    this.setState({ pokemonName: e.target.value });\n  };\n\n  clearPokemonName() {\n    this.setState({ pokemonName: \"\" });\n  }\n\n  savePokemon = () =\u003e {\n    this.props.viewModel.addPokemon({\n      image: this.state.pokemonImage,\n      name: this.state.pokemonName,\n    });\n  };\n\n  addPokemon = () =\u003e {\n    this.savePokemon();\n    this.clearPokemonName();\n  };\n\n  removePokemon = (pokemon) =\u003e {\n    this.props.viewModel.removePokemon(pokemon);\n  };\n\n  render() {\n    const { viewModel } = this.props;\n\n    return (\n      \u003cPokemonView\n        pokemons={viewModel.getPokemons()}\n        pokemonImage={this.state.pokemonImage}\n        randomizePokemon={this.setRandomPokemonImage}\n        setPokemonName={this.setPokemonName}\n        addPokemon={this.addPokemon}\n        removePokemon={this.removePokemon}\n        pokemonName={this.state.pokemonName}\n        shouldDisableSubmit={!this.state.pokemonName}\n      /\u003e\n    );\n  }\n}\n\nexport default PokemonController;\n```\n\n### ViewModel\n\nThis is the third and most important block of the MVVM architecture.\n\nAt this point, the block is not communicating with the interface directly.\n\nSo, it will not know whether the interface was built using React, Vue, or any other framework.\n\nIt is a JS class that you can reuse to make any application.\n\n```js\nclass PokemonViewModel {\n  constructor(pokemonStore) {\n    this.store = pokemonStore;\n  }\n\n  getPokemons() {\n    return this.store.getPokemons();\n  }\n\n  addPokemon(pokemon) {\n    this.store.addPokemon(pokemon);\n  }\n\n  removePokemon(pokemon) {\n    this.store.removePokemon(pokemon);\n  }\n}\n\nexport default PokemonViewModel;\n```\n\n### Model\n\nThis is your source for accessing the data; from here, the `ViewModel` and `ViewController` will gain the necessary output and send it to `View`.\n\nThis part of the architecture will find databases, network layers, and services. Your logic should be restricted to helping the model send the necessary updates to the View.\n\nThis is your MVVM architecture. However, there is an extra component that you will use to bind these elements together, and it is known as a provider. The provider is not part of the MVVM architecture but will be used when creating the app solution.\n\n### Provider\n\nWhen working with `ViewModel`, you will need to inject dependencies that can help quickly collect the data and send it to the `View`.\n\nThat’s where the provider will help. The instances in the `ViewModel ` are passed to the `ViewController` through this block after injecting the necessary dependencies.\n\nThis block doesn’t carry any logic. It is designed to connect the different blocks properly.\n\n```js\nimport React from \"react\";\nimport { inject } from \"mobx-react\";\nimport PokemonController from \"./PokemonController\";\nimport PokemonViewModel from \"./PokemonViewModel\";\nimport RootStore from \"../../models/RootStore\";\n\n@inject(RootStore.type.POKEMON_MODEL)\nclass PokemonProvider extends React.Component {\n  constructor(props) {\n    super(props);\n    const pokemonModel = props[RootStore.type.POKEMON_MODEL];\n    this.viewModel = new PokemonViewModel(pokemonModel);\n  }\n\n  render() {\n    return \u003cPokemonController viewModel={this.viewModel} /\u003e;\n  }\n}\n\nexport default PokemonProvider;\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglopez-dev%2Ftrelltech","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglopez-dev%2Ftrelltech","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglopez-dev%2Ftrelltech/lists"}