Skip to content

A contacts management system. react native application that allows the user to add, delete, update the contact they want.

Notifications You must be signed in to change notification settings

OmarRamoun/contacts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Redux TypeScript Yarn

Contacts

A sample app for a contacts managment system. react native application that allows the user to add, delete, update the contact they want.

Collective Screenshots of the APP [android]

Outline of Building Process

  1. Prepare Project Structuree, Dependecy Management, Build System, Linting System, and Application Configs.
  2. Build a navgiation stack map
  3. UI Breakdown to components (core components, navigation, layouts, pages)
  4. Build components library (core building blocks of the app - under src/components)
  5. Build a styling system using styled-system (including theme and global styles - under src/styles)
  6. Add styling to core components
  7. Build screens components (responsible for common layouts between pages - under src/screens)
  8. Build stacks of the app (under src/stacks)
  9. Build hooks and utility functions (under src/hooks and src/utils)
  10. Add global state (using Redux Toolkit - under src/state)
  11. Add animations (using RN Animated)
  12. [Coming Soon] Unit Tests and Mocks.
  13. [Coming Soon] Performance Optimization
  14. [Coming Soon] Add Security Layers

Built With

  1. Typescript
  2. React Native
  3. Styled System
  4. Redux Toolkit

Showcase Videos

How To Run Locally

Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

Step 0: Install Dependencies

# 1. clone repository
git clone https://github.com/OmarRamoun/contacts.git

# 2. change current directory
cd contacts

# 3. Install all Dependencies
yarn install

# 4. Build Icons
yarn icons

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

# using Yarn
yarn dev # check package.json for more info

Step 2: Start your Application

Let 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:

For Android

yarn android

For iOS

yarn ios

If 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.

Author

👤 Omar Ramoun

  • GitHub: @omarramoun
  • Twitter: @omarramoun
  • LinkdIn: @omarramoun

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

About

A contacts management system. react native application that allows the user to add, delete, update the contact they want.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published