NetGrade

Overview

NetGrade is a Progressive Web App (PWA) designed to deliver a native-like experience on web and mobile platforms.

Technologies Used

Technology	Purpose
React 18	Building user interfaces
Ionic Framework	UI components for mobile and desktop apps
Capacitor	Native runtime for web apps on mobile platforms devices
Vite	Fast build tool and development server
Cypress	End-to-end testing
Vitest	Unit testing framework
Prettier	Code formatting
ESLint	Linting and code quality checks
TypeORM	ORM
SQLite	SQL DB
React-Query	State Management

Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (LTS version recommended)

• npm (comes with Node.js)

• Ionic CLI:

  npm install -g @ionic/cli native-run

Further please read Env setup.

Installation

1. Clone the Repository

2. Install Dependencies:

   npm install

Running the Application

Running in the Browser

To start the application with hot reload in your default browser:

npm run dev

This command starts a development server with live reloading enabled.

Running on a Device or Emulator

Note: Before running on a device or emulator, ensure you have the necessary SDKs installed (Xcode for iOS, Android SDK for Android).

Building and Running

For iOS:

ionic capacitor run ios -l --external

For Android:

ionic capacitor run android -l --external

• The -l flag enables live reload.
• The --external flag allows other devices on your network to access the dev server.

Shutting Down iOS Simulators

If you need to stop all running iOS simulators, you can use the following command:

xcrun simctl shutdown all

ESLint

ESLint helps in identifying and reporting on patterns found in the code. The configuration is in eslint.config.mjs.

• Linting Code:

  npm run lint

Testing

Unit Tests

Unit tests are written using Vitest.

• Running Unit Tests:

  npm test

• Running Tests with Coverage:

  npm run test:coverage

  The coverage report is generated in the coverage/ directory.

Test files are typically located alongside the components they test, following the naming convention ComponentName.test.tsx.

End-to-End Tests

End-to-end tests are conducted using Cypress.

• Running E2E Tests:

  npm run e2e

Cypress tests are located in the cypress/ directory.

CI/CD Pipeline

The project uses GitHub Actions for continuous integration and deployment. The workflow is defined in .github/workflows/release.yml.

Required Secrets

The following secrets need to be configured in the GitHub repository settings:

• APPLE_DIST_CERT_P12: Base64-encoded Apple Distribution Certificate (.p12 file)
• APPLE_DIST_CERT_PASS: Password for the Apple Distribution Certificate
• IOS_PROVISION_PROFILE: Base64-encoded iOS Provisioning Profile
• APP_STORE_CONNECT_API_KEY_ID: The key ID from your App Store Connect API key
• APP_STORE_CONNECT_ISSUER_ID: The issuer ID from your App Store Connect API key
• APP_STORE_CONNECT_API_KEY_CONTENT: The private key content from your App Store Connect API key

Useful Links

• Ionic Framework Documentation: Ionic Docs
• Capacitor Documentation:
  • iOS Platform Guide
  • Android Platform Guide
• Fastlane Documentation: Fastlane Docs