Local Development & Tooling

Local Development & Tooling

This page is the developer-guide entry point for working on the skyconnect/streaming repository locally: repository layout, per-project toolchains, and dev-server commands.

Purpose and Scope

This page covers everything needed to get a local development environment up for the three code projects in this repository and to work with the supporting tooling:

• The Expo-based mobile app in streaming/
• The Next.js web frontend in streaming-frontend/
• The backend service in streaming-backend/

Sibling developer-guide pages (deployment, CI/CD, API reference, architecture rationale) are intentionally not covered here. This page focuses strictly on local setup, tooling, and day-to-day workflows.

Overview

The repository is a multi-project workspace rather than a single application. Each top-level directory is an independently scaffolded project with its own package manager, dev server, and README:

Both the mobile app and the web frontend were bootstrapped with the official scaffolding tools — create-expo-app and create-next-app respectively — so they follow the standard toolchains for those frameworks. The backend directory currently contains only a placeholder README, meaning no local setup is documented there yet.

Architecture

The diagram below shows how the local development environment is organized: three runnable projects, each with its own CLI toolchain.

Component roles:

• streaming/ (mobile) — an Expo project created with create-expo-app. It uses Expo’s file-based routing: “You can start developing by editing the files inside the app directory” (streaming/README.md). Development targets include development builds, Android emulator, iOS simulator, and the Expo Go sandbox app (streaming/README.md).
• streaming-frontend/ (web) — a Next.js App Router project. Editing app/page.tsx hot-reloads in the browser, and the default dev server is reachable at http://localhost:3000 (streaming-frontend/README.md).
• streaming-backend/ — the backend workspace; its README contains only the project title # streaming-backend and no commands yet (streaming-backend/README.md).

Local Toolchains by Project

Mobile app (streaming/) — Expo toolchain

The mobile app is a standard Expo project. The documented local workflow is two commands: install dependencies, then start the Expo dev server (streaming/README.md):

npm install
npx expo start

Once the dev server is running, the app can be opened through one of four targets (streaming/README.md):

• a development build of the app (the full, native-capable build)
• an Android emulator
• an iOS simulator
• Expo Go, described in the README as “a limited sandbox for trying out app development with Expo”

Key development behaviors:

• File-based routing: the app/ directory defines the screens/routes. Editing files there is the primary development loop (streaming/README.md).
• Project reset: npm run reset-project moves the starter code to an app-example/ directory and creates a blank app/ directory to start from (streaming/README.md). This is a one-way, destructive-ish operation: the original starter is preserved in app-example/, so it is safe to recover, but the working app/ tree is replaced.
• Linting: ESLint is set up via npx expo lint (streaming/README.md).
• Testing: the README points to Expo’s “Unit Testing with Jest” guide for adding Jest-based unit tests (streaming/README.md).
• TypeScript: the template ships with TypeScript enabled; see the “Using TypeScript” guide referenced in the README (streaming/README.md).

Web frontend (streaming-frontend/) — Next.js toolchain

The web frontend is a create-next-app project. The dev server can be started with any of the standard package managers (streaming-frontend/README.md):

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

The server listens at http://localhost:3000. Editing app/page.tsx auto-updates the page (hot reload / Fast Refresh), so the edit-save-refresh loop is the core local workflow (streaming-frontend/README.md). The project uses next/font to automatically optimize and load the Geist font family, which matters when verifying font rendering locally (streaming-frontend/README.md).

Backend (streaming-backend/) — status

The backend directory currently contains a single-line README (# streaming-backend) and no documented local setup, scripts, or configuration files (streaming-backend/README.md). At the time of writing, no docker-compose, Makefile, environment template, or service configuration was discovered in the top-level scan of the repository. Until the backend scaffolding lands, local development of the backend is not documented — this is a known gap, not an omission in this guide.

Core Local Development Flow

The day-to-day loop is the same shape for both the Expo app and the Next.js app: bootstrap with the framework CLI, start the dev server, then rely on hot reload while editing.

Why this order matters: installing dependencies first guarantees the framework CLI and its native tooling are present; the dev server then compiles on demand, so the first edit cycle is the moment most setup problems (missing packages, port conflicts, misconfigured emulators) surface. Linting (npx expo lint) is run separately and is the only documented static-analysis step, and it exists only for the Expo app.

Usage Examples

All examples below are extracted verbatim from the repository’s README files.

1. Bootstrap the Expo mobile app

npm install

npx expo start

This installs dependencies and starts the Expo dev server. In the output, you will find options to open the app in a development build, Android emulator, iOS simulator, or Expo Go (streaming/README.md).

2. Reset the Expo starter project

npm run reset-project

This moves the starter code to the app-example directory and creates a blank app directory where you can start developing (streaming/README.md). Use it once, early, when you want a clean slate instead of the template screens.

3. Start the Next.js web frontend

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Then open http://localhost:3000 in your browser. Editing app/page.tsx updates the page automatically (streaming-frontend/README.md).

4. Enable linting and testing tooling in the Expo app

npx expo lint

The README also points to Expo’s guides for “Unit Testing with Jest” and “Using TypeScript” as the next tooling steps for the mobile app (streaming/README.md).

Configuration Options & Tooling Reference

The repository does not expose centralized configuration files (no docker-compose.yml, Makefile, or .env template was found at the top level during exploration). Configuration is per-project and framework-standard. The following table summarizes what is documented in source:

Additional project-level configuration:

• Expo route structure: the app/ directory is the file-based router; routes map to files (streaming/README.md).
• Next.js font optimization: next/font loads Geist automatically; verify local rendering against the optimized font (streaming-frontend/README.md).

Failure Modes, Edge Cases & Operational Notes

Source evidence for edge cases is limited because the READMEs are scaffolding-level; the following reflects what the repository actually documents plus honest gaps:

• reset-project replaces your working tree. npm run reset-project moves starter code to app-example/ and creates a blank app/. Run it only before you have meaningful code in app/, or back up your work first (streaming/README.md).
• Expo Go is a sandbox. The README explicitly labels Expo Go “a limited sandbox for trying out app development with Expo” — native modules and some APIs are unavailable there; use a development build for full capability (streaming/README.md).
• Backend has no local setup. streaming-backend/README.md is a stub. There is no documented command, port, or configuration for running the backend locally; do not assume one exists (streaming-backend/README.md).
• No containerized dev environment discovered. No docker-compose, Makefile, or environment template surfaced in the top-level file scan. If you need reproducible environments, this must be added; it is currently a gap rather than a documented feature.
• Port conflicts. The web frontend binds http://localhost:3000; if another service occupies that port, the Next.js server will fail or prompt for an alternate port. No port-configuration override is documented in the README (streaming-frontend/README.md).

Extension Points

• Framework conventions are the extension mechanism. Both apps are stock scaffolds, so extending tooling means following Expo and Next.js conventions: add scripts to package.json, extend ESLint config via npx expo lint, add Jest per Expo’s unit-testing guide, and add routes by creating files under app/.

Related Links

• Mobile app README — streaming/
• Web frontend README — streaming-frontend/
• Backend README — streaming-backend/