Skip to content

README.md

Latest commit

 

History

History
351 lines (253 loc) · 8.08 KB

README.md

File metadata and controls

351 lines (253 loc) · 8.08 KB

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