https://github.com/realworld-apps/angular-realworld-example-app

Exemplary real world application built with Angular
https://github.com/realworld-apps/angular-realworld-example-app

angular

Last synced: 8 days ago
JSON representation

Exemplary real world application built with Angular

• Host: GitHub
• URL: https://github.com/realworld-apps/angular-realworld-example-app
• Owner: realworld-apps
• License: mit
• Created: 2016-09-22T19:46:14.000Z (over 9 years ago)
• Default Branch: main
• Last Pushed: 2026-01-27T00:24:02.000Z (13 days ago)
• Last Synced: 2026-01-27T06:33:26.201Z (13 days ago)
• Topics: angular
• Language: TypeScript
• Homepage:
• Size: 1.95 MB
• Stars: 5,558
• Watchers: 232
• Forks: 3,408
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# ![Angular Example App](logo.png)

> ### Angular codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://realworld.show) spec and API.

### [RealWorld](https://realworld.show)

This codebase was created to demonstrate a fully fledged application built with Angular that interacts with an actual backend server including CRUD operations, authentication, routing, pagination, and more. We've gone to great lengths to adhere to the [Angular Styleguide](https://angular.dev/style-guide) & best practices.

# How it works

A global documentation for the project is available at [docs.realworld.show](https://docs.realworld.show/introduction/).

# Getting started

Make sure you have the [Angular CLI](https://github.com/angular/angular-cli#installation) installed globally. You can `bun install` to resolve all dependencies (should take a couple of seconds).

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

### Building the project

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Functionality overview

The example application is a social blogging site (i.e. a Medium.com clone) called "Conduit". It uses a custom API for all requests, including authentication. You can view a live demo over at [demo.realworld.show](https://demo.realworld.show)

**General functionality:**

- Authenticate users via JWT (login/signup pages + logout button on settings page)

- CRU\* users (sign up & settings page - no deleting required)

- CRUD Articles

- CR\*D Comments on articles (no updating required)

- GET and display paginated lists of articles

- Favorite articles

- Follow other users

**The general page breakdown looks like this:**

- Home page (URL: / )

  - List of tags

  - List of articles pulled from either Feed, Global, or by Tag

  - Pagination for list of articles

- Sign in/Sign up pages (URL: /login, /register )

  - Uses JWT (store the token in localStorage)

  - Authentication can be easily switched to session/cookie based

- Settings page (URL: /settings )

- Editor page to create/edit articles (URL: /editor, /editor/article-slug-here )

- Article page (URL: /article/article-slug-here )

  - Delete article button (only shown to article's author)

  - Render markdown from server client side

  - Comments section at bottom of page

  - Delete comment button (only shown to comment's author)

- Profile page (URL: /profile/:username, /profile/:username/favorites )

  - Show basic user info

  - List of articles populated from author's created articles or author's favorited articles

## Realworld Angular

This project may be too simple for getting a good understanding of the different ways an Angular project can be built.

For a comprehensive understanding of how more complex Angular projects can be implemented, you may check the [

RealWorld Angular](https://github.com/realworld-angular) organization that is specialized in Angular development, currently managed by [Gerome Grignon](https://github.com/geromegrignon).

## License

- **Project code**: [MIT License](LICENSE)

- **Angular logo**: The Angular logo is a trademark of Google LLC, used to indicate this project is built with Angular.