Skip to content

README.md

Latest commit

 

History

History
195 lines (134 loc) · 5.06 KB

README.md

File metadata and controls

195 lines (134 loc) · 5.06 KB

Fullstack Angular App

A comprehensive fullstack example built with Angular 20.x (frontend with SSR) and NestJS (backend) demonstrating CRUD operations, advanced state management, and production-ready tooling.

📋 Overview

This application is a learning-focused, production-minded sample that showcases a complete CRUD workflow for "cards" with an Angular 20.x SPA frontend featuring SSR and zoneless change detection, and a NestJS REST API backend with comprehensive validation. It includes centralized styling tokens, responsive layouts, comprehensive NgRx state management, and modern development tooling.

🖼️ Want a quick preview? Check out the Screenshots section below to see the application in action without needing to clone or install anything!

🛠️ Technical Stack

Frontend

  • Angular 20.x - Standalone components, SSR, Zoneless change detection
  • Angular Material - Icons and UI primitives
  • NgRx - Actions, effects, reducers, selectors, state for comprehensive state management
  • SCSS - Centralized variables for consistent theming

Backend

  • NestJS - Modern Node.js framework with TypeScript
  • TypeORM - Database access and entity management
  • PostgreSQL - Data persistence with environment-based configuration

Development Tools

  • ESLint & Prettier - Code quality and formatting
  • Jest - Testing framework
  • Proxy Configuration - Development server setup

📁 Repository Structure

The repository follows a split frontend/backend structure:

fullstack-angular-app/
├── client/          # Angular application
│   ├── src/
│   │   ├── app/
│   │   │   ├── features/     # Reusable components
│   │   │   ├── pages/        # Page components
│   │   │   ├── services/     # Business logic services
│   │   │   ├── store/        # NgRx state management
│   │   │   └── models/       # TypeScript interfaces
│   │   ├── assets/           # Static assets
│   │   └── environments/     # Environment configurations
│   └── public/               # Public assets
│
└── server/          # NestJS API
    └── src/
        ├── controllers/      # API endpoints
        ├── services/         # Business logic
        └── models/          # DTOs and entities

🚀 Getting Started

Prerequisites

  • Node.js (v18+)
  • PostgreSQL database
  • npm or yarn

Installation & Running

  1. Clone the repository

    git clone <repository-url>
cd fullstack-angular-app

  2. Frontend Setup

    cd client
npm install
ng serve
# or
npm start

    The frontend will be available at http://localhost:4200

  3. Backend Setup

    cd server
npm install
npm run start:dev

    The API will be available at http://localhost:3000

Database Configuration

The backend requires a configured PostgreSQL database with environment variables. Check the server/ directory for:

  • .env file setup
  • Database connection details
  • Environment variable configuration

Refer to the server's README for specific database setup instructions.

🧪 Testing

Frontend Tests

cd client
ng test

Backend Tests

cd server
npm test

📚 Features

  • CRUD Operations - Complete create, read, update, delete functionality for cards
  • State Management - Centralized state with NgRx
  • Server-Side Rendering - Angular Universal for improved SEO and performance
  • Responsive Design - Mobile-first approach with SCSS variables
  • Type Safety - Full TypeScript implementation across frontend and backend
  • Modern Architecture - Standalone components and latest Angular features

🔧 Development

This project uses modern development practices:

  • Zoneless change detection for better performance
  • Comprehensive testing with Jasmine and Jest
  • ESLint and Prettier for code quality
  • Proxy configuration for seamless development experience

📖 Learning Resources

This project serves as an educational example demonstrating:

  • Modern Angular architecture patterns
  • NestJS backend development
  • NgRx state management
  • Full-stack TypeScript development
  • Production-ready tooling and configuration

🖼 Screenshots

Homepage

🏠 Homepage

Homepage 1 Homepage top section

Homepage 2 Homepage features and recent cards

Cards

🗂️ Cards List

Cards List

Cards Secondary List of cards with thumbnails and basic info

Create Card

➕ Create Card

Create Card Form to create a new card

Contact

✉️ Contact Page

Contact Page Contact page