Community App - NativeScript Angular

A mobile application built with NativeScript and Angular that helps connect volunteers and people who need help in their local community.

Overview

Community App is a cross-platform mobile application that enables community members to post help requests and offer services within their local area. It facilitates connections between volunteers and those in need of assistance.

Features

• User Authentication & Profiles

  • Sign up and login system
  • Profile management with personal information
  • Contact information display for easy communication
  • City-based user identification

• Help Requests & Service Discovery

  • Browse "Help Requests" tab to find people needing assistance
  • Browse "Service Providers" tab to find volunteers
  • Location-based filtering by city and state
  • Switch between different cities to explore posts from other areas

• Post Management

  • Create help requests or service offerings
  • Posts automatically expire after 48 hours
  • Posts ordered by date (newest first)
  • Easy post management

• Communication

  • Comment system for direct post interactions
  • Connect with other community members
  • Exchange contact information through profiles

Tech Stack

• Framework: NativeScript
• UI Framework: Angular
• Language: TypeScript
• Platform: iOS & Android (cross-platform)
• Backend: Community Backend API (Express.js, MongoDB)

Prerequisites

• Node.js (v12 or higher)
• NativeScript CLI installed globally
• Android SDK (for Android development)
• Xcode (for iOS development on macOS)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/hungle88/community-app-nativescript-angular.git
cd community-app-nativescript-angular

2. Install NativeScript CLI (if not already installed):

npm install -g nativescript

3. Install project dependencies:

npm install

4. Add the required platforms:

ns platform add android
ns platform add ios  # macOS only

Development

Run on Android Device/Emulator

ns run android

Run on iOS Device/Simulator

ns run ios

Development Server

ns serve

Build for Production

Android:

ns build android --release

iOS:

ns build ios --release

Project Structure

community-app-nativescript-angular/
├── src/
│   ├── app/
│   │   ├── components/        # Angular components
│   │   ├── services/          # Services for API calls
│   │   ├── models/            # TypeScript interfaces
│   │   └── app.module.ts      # Root module
│   ├── assets/                # Images, fonts, etc.
│   └── styles/                # Global styles
├── nativescript.config.ts     # NativeScript configuration
└── package.json

Key Components

Navigation Structure

• Tabs Navigation
  • Help Requests Tab
  • Service Providers Tab
  • User Profile Tab

Screens

• Login/Register - User authentication
• Home - Browse posts by category
• Post Details - View specific post and comments
• Create Post - New help request or service offering
• Profile - View and edit user information
• Search - Find posts and users in your area

Configuration

Create a src/app/config/api.config.ts file:

export const API_BASE_URL = 'YOUR_API_ENDPOINT';
export const API_TIMEOUT = 30000;

API Integration

The app communicates with the Community Backend API. Ensure the backend is running and accessible.

Authentication

• JWT token-based authentication
• Token stored in device storage
• Automatic token refresh on API requests

Dependencies

Key dependencies include:

• @angular/core - Angular framework
• @nativescript/angular - NativeScript Angular integration
• @nativescript/theme - UI theming
• nativescript-geolocation - Location services

Platform-Specific Setup

Android

• Minimum SDK: API 21
• Target SDK: API 30+
• Permissions required: INTERNET, ACCESS_FINE_LOCATION, ACCESS_COARSE_LOCATION

iOS

• Minimum deployment target: iOS 11.0
• Permissions required in Info.plist:
  • NSLocationWhenInUseUsageDescription
  • NSLocationAlwaysAndWhenInUseUsageDescription

Debugging

Debug on Device

ns debug android

Chrome DevTools

ns debug ios --inspector

Building and Deployment

Create a Release Build

Android:

ns build android --release --key-store-path <path-to-keystore> --key-store-password <password> --key-store-alias <alias> --key-store-alias-password <alias-password>

iOS:

ns build ios --release --for-device

Testing

Unit Tests

npm test

E2E Tests

npm run e2e

Performance Tips

• Use ChangeDetectionStrategy.OnPush for better performance
• Lazy load modules where possible
• Optimize images and assets
• Use ngZone to manage Angular change detection

Common Issues & Solutions

Issue: Connection Refused

• Ensure backend API is running
• Check API endpoint configuration
• Verify network connectivity

Issue: Authentication Fails

• Clear app cache: ns run android --clean
• Reset authentication token
• Check JWT configuration

Code Style

• Follow Angular style guide
• Use TypeScript strict mode
• Follow PascalCase for classes and interfaces
• Follow camelCase for variables and functions

Troubleshooting

For common NativeScript issues, refer to:

• NativeScript Documentation
• NativeScript Community Forum

Author

Hung Le - GitHub Profile

Related Projects

• Community Volunteer App (Angular Web)
• Community Backend (Express.js API)