{"id":19048303,"url":"https://github.com/omarramoun/contacts","last_synced_at":"2026-04-20T10:32:53.362Z","repository":{"id":244949581,"uuid":"688548586","full_name":"OmarRamoun/contacts","owner":"OmarRamoun","description":"A contacts management system. react native application that allows the user to add, delete, update the contact they want.","archived":false,"fork":false,"pushed_at":"2024-06-21T17:50:09.000Z","size":2006,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"staging","last_synced_at":"2026-02-01T21:26:43.158Z","etag":null,"topics":["react-native","react-native-app","redux-toolkit","styled-components","styled-system","typescript"],"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/OmarRamoun.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,"zenodo":null}},"created_at":"2023-09-07T15:18:38.000Z","updated_at":"2024-06-21T17:50:13.000Z","dependencies_parsed_at":"2024-06-23T08:30:47.034Z","dependency_job_id":null,"html_url":"https://github.com/OmarRamoun/contacts","commit_stats":null,"previous_names":["omarramoun/contacts"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/OmarRamoun/contacts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OmarRamoun%2Fcontacts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OmarRamoun%2Fcontacts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OmarRamoun%2Fcontacts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OmarRamoun%2Fcontacts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OmarRamoun","download_url":"https://codeload.github.com/OmarRamoun/contacts/tar.gz/refs/heads/staging","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OmarRamoun%2Fcontacts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32043037,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["react-native","react-native-app","redux-toolkit","styled-components","styled-system","typescript"],"created_at":"2024-11-08T23:06:27.220Z","updated_at":"2026-04-20T10:32:53.336Z","avatar_url":"https://github.com/OmarRamoun.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![](https://img.shields.io/static/v1?label=BY\u0026message=RAMOUN\u0026color=birghtgreen)](https://ramoun.me)\n\n![React](https://img.shields.io/badge/-React-1f1f1f?logo=react\u0026logoColor=61DAFB\u0026style=for-the-badge)\n![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge\u0026logo=redux\u0026logoColor=white)\n![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n![Yarn](https://img.shields.io/badge/yarn-%232C8EBB.svg?style=for-the-badge\u0026logo=yarn\u0026logoColor=white)\n\n# Contacts\n\n\u003e A sample app for a contacts managment system. react native application that allows the user to add, delete, update the contact they want.\n\n## Collective Screenshots of the APP [android]\n\n\u003cp align=\"center\" justify=\"center\"\u003e\n  \u003cimg width=\"180px\" height=\"320px\" src=\"screenshots/screenshot1.png\" /\u003e\n  \u003cimg width=\"180px\" height=\"320px\" src=\"screenshots/screenshot2.png\" /\u003e\n  \u003cimg width=\"180px\" height=\"320px\" src=\"screenshots/screenshot3.png\" /\u003e\n  \u003cimg width=\"180px\" height=\"320px\" src=\"screenshots/screenshot4.png\" /\u003e\n\u003c/p\u003e\n\n## Outline of Building Process\n\n0. Prepare Project Structuree, Dependecy Management, Build System, Linting System, and Application Configs.\n1. Build a navgiation stack map\n2. UI Breakdown to components (core components, navigation, layouts, pages)\n3. Build components library (core building blocks of the app - under `src/components`)\n4. Build a styling system using `styled-system` (including theme and global styles - under `src/styles`)\n5. Add styling to core components\n6. Build screens components (responsible for common layouts between pages - under `src/screens`)\n7. Build stacks of the app (under `src/stacks`)\n8. Build hooks and utility functions (under `src/hooks` and `src/utils`)\n9. Add global state (using `Redux Toolkit` - under `src/state`)\n10. Add animations (using `RN Animated`)\n11. [Coming Soon] Unit Tests and Mocks.\n12. [Coming Soon] Performance Optimization\n13. [Coming Soon] Add Security Layers\n\n## Built With\n\n1. **Typescript**\n2. **React Native**\n3. **Styled System**\n4. **Redux Toolkit**\n\n## Showcase Videos\n\n\u003cdiv\u003e\n    \u003ca href=\"https://www.loom.com/share/924c275f602142ea8c7ae24348bacf51\"\u003e\n      \u003cp\u003eContacts App Showcase Part.1 - Watch Video\u003c/p\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.loom.com/share/924c275f602142ea8c7ae24348bacf51\"\u003e\n      \u003cimg style=\"max-width:300px;\" src=\"https://cdn.loom.com/sessions/thumbnails/924c275f602142ea8c7ae24348bacf51-with-play.gif\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv\u003e\n    \u003ca href=\"https://www.loom.com/share/8269364a72c44c2ebeeb4dbcaae153a7\"\u003e\n      \u003cp\u003eContacts App Showcase pt.2 - Watch Video\u003c/p\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.loom.com/share/8269364a72c44c2ebeeb4dbcaae153a7\"\u003e\n      \u003cimg style=\"max-width:300px;\" src=\"https://cdn.loom.com/sessions/thumbnails/8269364a72c44c2ebeeb4dbcaae153a7-with-play.gif\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv\u003e\n    \u003ca href=\"https://www.loom.com/share/65e39714ecd44d6597556b225c10bf66\"\u003e\n      \u003cp\u003eContacts App Showcase pt.3 - Watch Video\u003c/p\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.loom.com/share/65e39714ecd44d6597556b225c10bf66\"\u003e\n      \u003cimg style=\"max-width:300px;\" src=\"https://cdn.loom.com/sessions/thumbnails/65e39714ecd44d6597556b225c10bf66-with-play.gif\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv\u003e\n    \u003ca href=\"https://www.loom.com/share/23b2dae1b6514182b69ef4da076f79be\"\u003e\n      \u003cp\u003eContacts App Showcase Pt.4\u003c/p\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.loom.com/share/23b2dae1b6514182b69ef4da076f79be\"\u003e\n      \u003cimg style=\"max-width:300px;\" src=\"https://cdn.loom.com/sessions/thumbnails/23b2dae1b6514182b69ef4da076f79be-with-play.gif\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n\n## How To Run Locally\n\n\u003e **Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till \"Creating a new application\" step, before proceeding.\n\n### Step 0: Install Dependencies\n\n```bash\n# 1. clone repository\ngit clone https://github.com/OmarRamoun/contacts.git\n\n# 2. change current directory\ncd contacts\n\n# 3. Install all Dependencies\nyarn install\n\n# 4. Build Icons\nyarn icons\n```\n\n### Step 1: Start the Metro Server\n\nFirst, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.\n\nTo start Metro, run the following command from the _root_ of your React Native project:\n\n```bash\n# using Yarn\nyarn dev # check package.json for more info\n```\n\n### Step 2: Start your Application\n\nLet Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:\n\n#### For Android\n\n```bash\nyarn android\n```\n\n#### For iOS\n\n```bash\nyarn ios\n```\n\nIf everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.\n\n## Author\n\n👤 **Omar Ramoun**\n\n- **GitHub**: [![@omarramoun](https://img.shields.io/github/followers/omarramoun?label=OmarRamoun\u0026style=social)](https://github.com/omarramoun)\n- **Twitter**: [![@omarramoun](https://img.shields.io/twitter/follow/omarramoun?label=OmarRamoun\u0026style=social)](https://twitter.com/omarramoun)\n- **LinkdIn**: [![@omarramoun](https://img.shields.io/github/followers/omarramoun?label=OmarRamoun\u0026logo=linkedin\u0026style=social)](https://www.linkedin.com/in/omarramoun/)\n\n## 🤝 Contributing\n\nContributions, issues, and feature requests are welcome!\n\nFeel free to check the [issues page](../../issues).\n\n## Show your support\n\nGive a ⭐️ if you like this project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomarramoun%2Fcontacts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fomarramoun%2Fcontacts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomarramoun%2Fcontacts/lists"}