Parla

Speak a new language with an AI conversation tutor: Spanish, French, Italian and Japanese, with instant, friendly feedback on every reply.

Live demo: https://www.freelancerportfoliohub.com/jameslee/projects/parla/index.html

Overview

This repository contains the Parla marketing site and the Parla mobile app.

• Web (repo root) is a Next.js App Router site: the home page walks through a live conversation, How it works covers the placement chat, daily sessions, feedback and review loop, Languages presents each course with scenes, dialects and levels, and Pricing compares Free, Plus and Family with a billing FAQ. Every phone on the site is a React rendering of a real app screen.
• Mobile (mobile/) is an Expo Router app with Home, Talk (conversation), Sound lab and Progress tabs, plus a session recap screen.

The conversation model lives in mobile/lib/tutor.ts: sessions, tutor and learner turns, per-turn feedback, skill scores and the recap builder. The web site mirrors the same shapes in types/parla.ts.

Features

• Conversation view with tutor persona, transcript bubbles, inline "More natural" corrections and a live waveform.
• Session recap scored across pronunciation, grammar, vocabulary and fluency, rolled into one speaking score.
• Sound lab with syllable-level scoring, an IPA line and targeted tips.
• Streaks and daily goals with a weekly view and the next scene queued up.
• Five tutors with a hometown and accent: Madrid, Mexico City, Lyon, Bologna and Osaka.
• Instant feedback API (POST /api/feedback) with phrase-level rules per language.

Tech stack

Layer	Tools
Web	Next.js 15 (App Router), React 19, TypeScript (strict), next/image
API	Next.js route handlers, zod
Mobile	Expo SDK 54, Expo Router, React Native, react-native-svg, Animated API
Tooling	ESLint (flat config), Prettier, pnpm

Getting started

pnpm install
pnpm dev            # http://localhost:3000

Mobile app:

cd mobile
pnpm install
pnpm start          # press i for iOS Simulator or a for Android

Environment variables

Copy .env.example to .env.local. Both are optional before launch.

Variable	Purpose
NEXT_PUBLIC_APP_STORE_URL	App Store listing for the iPhone button
NEXT_PUBLIC_PLAY_STORE_URL	Google Play listing for the Android button

Project structure

.
├── app/                 # routes: /, /how-it-works, /languages, /pricing, /api/feedback
├── components/
│   ├── layout/          # Header (client), Footer, Brand, StoreButtons
│   ├── phone/           # Phone frame, tab bar, waveform, score ring, correction card
│   ├── screens/         # Conversation, Recap, Sound lab, Streaks, Home
│   ├── sections/        # hero, feature rows, scenes, quotes, CTA band
│   ├── how/ languages/ pricing/
│   └── ui/              # Icon, Avatar, TickList, SectionHead, RichText
├── lib/
│   ├── data/            # typed copy: languages, tutors, scenes, pricing, FAQ, app mock data
│   ├── feedback.ts      # phrase-level correction rules
│   └── scoring.ts       # score rings and speaking-score weights
├── types/               # shared domain types
├── public/              # fonts, images, favicon
└── mobile/
    ├── app/             # _layout, (tabs)/{index,conversation,pronunciation,streaks}, recap
    ├── components/      # native UI components
    ├── constants/       # theme tokens
    └── lib/             # tutor.ts session model, seed data, formatters

Scripts

Command	Description
pnpm dev	Start the Next.js dev server
pnpm build	Production build
pnpm start	Serve the production build
pnpm lint	Lint with ESLint
pnpm typecheck	Type-check with tsc --noEmit
pnpm format	Format with Prettier

In mobile/: pnpm start, pnpm ios, pnpm android, pnpm lint, pnpm typecheck.