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

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

Built With

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

Showcase Videos

Contacts App Showcase Part.1 - Watch Video

Contacts App Showcase pt.2 - Watch Video

Contacts App Showcase pt.3 - Watch Video

Contacts App Showcase Pt.4

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:
• Twitter:
• LinkdIn:

🤝 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!