Project Setup and Architecture

You have learned all the Angular concepts you need. Now you put them together. This module builds CinemaVault from scratch, one feature at a time.

Getting a TMDb API key

CinemaVault uses the TMDb API for movie data. Get a free API key:

1. Create an account at themoviedb.org
2. Go to Settings → API
3. Request an API key (select “Developer” type, describe your use as a learning project)
4. Copy the API key — you will use it in the next step

Scaffold the project

ng new cinema-vault

Select CSS stylesheets and No for SSR.

cd cinema-vault

Environment files

Angular’s environment file system lets you use different values for development and production. Create three files:

# Already exists — edit it
src/environments/environment.ts

# Create these:
src/environments/environment.prod.ts
src/environments/environment.local.ts

// environment.ts — default dev build (no real key)
export const environment = {
  tmdbApiKey: ''
};

// environment.prod.ts — production build (key injected by CI)
export const environment = {
  tmdbApiKey: ''
};

// environment.local.ts — local dev with your real key (GITIGNORED)
export const environment = {
  tmdbApiKey: 'YOUR_ACTUAL_API_KEY_HERE'
};

Add environment.local.ts to .gitignore — your API key should never be committed:

.gitignore

src/environments/environment.local.ts

Configure angular.json to use environment.local.ts when running ng serve --configuration=local:

In angular.json, under projects.cinema-vault.architect.build.configurations, add:

"local": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.local.ts"
    }
  ]
}

And under architect.serve.configurations:

"local": {
  "buildTarget": "cinema-vault:build:local"
}

Add an npm script in package.json:

"scripts": {
  "start:local": "ng serve --configuration=local"
}

Run with npm run start:local to use your local API key.

The planned architecture

src/app/
├── app.ts                    ← root component
├── app.html
├── app.css
├── app.config.ts             ← provideRouter + provideHttpClient
├── app.routes.ts             ← all 5 routes
├── core/
│   └── tmdb.config.ts        ← API key + URL helpers
├── models/
│   └── movie.model.ts        ← TypeScript interfaces
├── services/
│   ├── movie.ts              ← MovieService
│   ├── watchlist.ts          ← WatchlistService
│   └── toast.ts              ← ToastService
├── guards/
│   └── watchlist-guard.ts
├── components/
│   ├── nav-bar/
│   ├── movie-card/
│   └── toast/
└── pages/
    ├── home/
    ├── browse/
    ├── search-results/
    ├── movie-detail/
    └── watchlist/

Create the directory structure

mkdir -p src/app/{core,models,services,guards,components/{nav-bar,movie-card,toast},pages/{home,browse,search-results,movie-detail,watchlist}}

Exercise

1. Scaffold cinema-vault with ng new, choosing CSS and no SSR.
2. Create the three environment files with the content shown above.
3. Add your actual API key to environment.local.ts.
4. Configure angular.json with the local configuration.
5. Add the start:local script to package.json.
6. Create the directory structure with mkdir -p.
7. Run npm run start:local and confirm the app starts at localhost:4200.

Recap

• Scaffold with ng new cinema-vault, selecting CSS and no SSR.
• Three environment files: environment.ts (default), environment.prod.ts (CI), environment.local.ts (gitignored, has real key).
• Configure angular.json to swap the environment file when building with --configuration=local.
• The app uses core/, models/, services/, guards/, components/, and pages/ directories.