Address Book - NativeScript Vue Application

A modern, production-ready mobile Address Book application built with Vue.js and NativeScript, featuring clean architecture and best practices.

📱 Features

• Authentication System

  • Mock login screen with validation
  • Persistent authentication state
  • Secure logout functionality

• Contact Management

  • View all contacts in an elegant list
  • Add new contacts with validation
  • Edit existing contact details
  • Delete contacts with confirmation
  • 5 pre-loaded sample contacts

• Data Persistence

  • Local storage using NativeScript ApplicationSettings
  • All changes persist across app restarts
  • No backend API required

• User Experience

  • Clean, modern UI design
  • Smooth page transitions
  • Form validation with helpful error messages
  • Empty state handling
  • Confirmation dialogs for destructive actions

• Cross-Platform

  • Works on both iOS and Android
  • Platform-specific optimizations
  • Responsive design

🏗️ Architecture

The project follows clean architecture principles with clear separation of concerns:

app/
├── components/           # Vue components
│   ├── Login.vue        # Login screen
│   ├── ContactList.vue  # Contact list display
│   └── AddEditContact.vue # Add/Edit contact form
├── store/               # State management
│   └── index.js         # Vuex-like store implementation
└── app.js               # Application entry point

Key Design Patterns

1. State Management: Custom Vuex-like store with reactive state
2. Component Communication: Props down, events up
3. Data Persistence: ApplicationSettings for local storage
4. Validation: Comprehensive form validation with user feedback
5. Navigation: Programmatic navigation with transitions

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• NativeScript CLI
• For iOS: macOS with Xcode
• For Android: Android SDK and Android Studio

Installation

1. Install NativeScript CLI globally:

   npm install -g @nativescript/core

2. Navigate to the project directory:

   cd /media/volumeD/AddressBookNative

3. Install dependencies:

   npm install

Running the Application

Android

npm run android

or

ns run android

iOS (macOS only)

npm run ios

or

ns run ios

Building for Production

Android

npm run build:android

iOS

npm run build:ios

📖 Usage Guide

1. Login

• Enter any username (minimum 3 characters)
• Enter any password (minimum 4 characters)
• Click "Login" to access the contact list

2. View Contacts

• After login, you'll see a list of 5 pre-loaded contacts
• Each contact displays: name, phone number, and email
• Scroll through the list to view all contacts

3. Add Contact

• Tap the "+ Add Contact" button at the bottom
• Fill in all required fields:
  • First Name (minimum 2 characters)
  • Last Name (minimum 2 characters)
  • Contact Number (minimum 10 digits)
  • Email (valid email format)
• Tap "Add Contact" to save
• The new contact appears immediately in the list

4. Edit Contact

• Tap "✏️ Edit" button on any contact card
• Modify the desired fields
• Tap "Save Changes" to update
• Changes appear immediately in the list

5. Delete Contact

• Tap "🗑️ Delete" button on any contact card
• Confirm the deletion in the dialog
• Contact is removed immediately from the list

6. Logout

• Tap the "Logout" option in the action bar
• Confirm logout in the dialog
• Returns to the login screen

🎨 UI/UX Features

• Modern Design: Clean, intuitive interface with Material Design principles
• Color Scheme: Professional blue theme (#3498db)
• Typography: Clear hierarchy with appropriate font sizes
• Icons: Emoji-based icons for visual clarity
• Feedback: Real-time validation with helpful error messages
• Animations: Smooth page transitions
• Responsive: Adapts to different screen sizes

🔧 Technical Details

State Management

The application uses a custom Vuex-like store implementation:

store.state; // Reactive state
store.getters; // Computed getters
store.commit(); // Synchronous mutations
store.dispatch(); // Asynchronous actions

Data Models

Contact:

{
  id: Number,           // Unique identifier (timestamp)
  firstName: String,    // Required, min 2 chars
  lastName: String,     // Required, min 2 chars
  contactNumber: String,// Required, min 10 digits
  email: String         // Required, valid email format
}

User:

{
  username: String; // Authentication identifier
}

Validation Rules

• Username: Required, minimum 3 characters
• Password: Required, minimum 4 characters
• First Name: Required, minimum 2 characters
• Last Name: Required, minimum 2 characters
• Contact Number: Required, minimum 10 digits, phone format
• Email: Required, valid email format (user@domain.com)

📁 Project Structure

AddressBookNative/
├── app/
│   ├── components/
│   │   ├── Login.vue
│   │   ├── ContactList.vue
│   │   └── AddEditContact.vue
│   ├── store/
│   │   └── index.js
│   └── app.js
├── App_Resources/
│   ├── Android/
│   │   └── src/main/
│   │       ├── AndroidManifest.xml
│   │       └── res/
│   └── iOS/
│       ├── Info.plist
│       └── build.xcconfig
├── package.json
├── webpack.config.js
├── tsconfig.json
├── nativescript.config.ts
└── README.md

🔒 Security Considerations

• Mock authentication (no actual backend)
• Data stored locally on device
• No network requests required
• Suitable for demonstration and offline use

🛠️ Development Guidelines

Adding New Features

1. Create new component in app/components/
2. Add state/actions to app/store/index.js if needed
3. Update navigation in existing components
4. Follow existing naming conventions and code style

Code Style

• Use Vue 2 Options API
• Keep components focused and single-purpose
• Extract reusable logic into methods
• Use meaningful variable and function names
• Add comments for complex logic

Testing

Run on both platforms to ensure cross-platform compatibility:

• Test on Android emulator/device
• Test on iOS simulator/device
• Verify all CRUD operations
• Test form validations
• Check data persistence

📝 Sample Contacts

The app includes 5 pre-loaded contacts:

1. John Doe - +1234567890 - john.doe@example.com
2. Jane Smith - +1234567891 - jane.smith@example.com
3. Michael Johnson - +1234567892 - michael.j@example.com
4. Emily Davis - +1234567893 - emily.davis@example.com
5. David Wilson - +1234567894 - david.wilson@example.com

🐛 Troubleshooting

Common Issues

Issue: Build fails

• Solution: Run ns clean and try again

Issue: Hot reload not working

• Solution: Restart the app with ns run android/ios

Issue: Dependencies not installing

• Solution: Delete node_modules and package-lock.json, then run npm install

Issue: App crashes on startup

• Solution: Check console logs and ensure all files are in correct locations

🔄 Future Enhancements

Potential features for future versions:

• Search and filter contacts
• Group contacts by category
• Export/Import contacts
• Profile pictures for contacts
• Contact sharing
• Backend API integration
• Cloud synchronization
• Dark mode support

👨‍💻 Developer Notes

This application demonstrates:

• Clean architecture principles
• Component-based design
• State management patterns
• Form validation techniques
• Local data persistence
• Cross-platform mobile development
• Production-ready code quality

📄 License

MIT License - Feel free to use this project for learning and development.

🤝 Contributing

This is a demonstration project. Feel free to fork and modify for your needs.

---

Built with ❤️ using Vue.js and NativeScript