A modern, feature-rich blog platform built with Angular 19 and Firebase, supporting multiple user roles, rich content creation, and social engagement features.
- Frontend: Angular 19, Material 3, RxJS, NgxEditor, Signals
- Backend: Firebase (Authentication, Firestore, Storage)
- Image Handling: Cloudinary
- Deployment: GitHub Pages
The project follows Angular's recommended structure with standalone components and feature modules:
src/
├── app/
│ ├── core/ # Core functionality
│ │ ├── auth/ # Authentication services
│ │ ├── guards/ # Route guards
│ │ └── services/ # Core services
│ │
│ ├── shared/ # Shared components
│ │ ├── components/ # Reusable components
│ │ ├── directives/ # Custom directives
│ │ └── pipes/ # Custom pipes
│ │
│ ├── features/ # Feature modules
│ │ ├── blog/ # Blog feature
│ │ ├── admin/ # Admin dashboard
│ │ ├── user/ # User profile
│ │ └── home/ # Home page
│ │
│ ├── layout/ # Layout components
│ └── app.component.ts # Root component
│
├── environments/ # Environment variables
└── styles/ # Global styles
- Node.js 18+
- npm 9+
- Angular CLI 19+
- Clone the repository
git clone https://github.com/your-username/blog-app.git
cd blog-app- Install dependencies
npm install-
Create environment files Create
src/environments/environment.tsandsrc/environments/environment.prod.tswith your Firebase configuration. -
Start the development server
npm startCreate a .env file in the project root with the following variables:
FIREBASE_API_KEY=your-api-key
FIREBASE_AUTH_DOMAIN=your-auth-domain
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_STORAGE_BUCKET=your-storage-bucket
FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
FIREBASE_APP_ID=your-app-id
FIREBASE_MEASUREMENT_ID=your-measurement-id
CLOUDINARY_CLOUD_NAME=your-cloud-name
CLOUDINARY_UPLOAD_PRESET=your-upload-preset
- Core files:
auth.service.ts,login.component.ts,signup.component.ts - Roles: Admin, Author, User
- Auth Guards:
auth.guard.ts,admin.guard.ts,author.guard.ts
- Core files:
blog.service.ts,create-post.component.ts,post-list.component.ts,post-detail.component.ts - Features: Create, edit, publish, view posts, featured posts, tags, image uploads
- Core files:
comment.service.ts,comment-list.component.ts,comment-item.component.ts,comment-form.component.ts - Features: Add, edit, delete comments, threaded replies, moderation
- Core files:
admin-dashboard.component.ts,admin-posts.component.ts,admin-users.component.ts - Features: User management, post moderation, statistics, analytics
- Core files:
profile.component.ts,user-posts.component.ts - Features: Profile editing, avatar uploads, post management
- Enable Email/Password and Google sign-in methods in the Firebase console
- Configure OAuth redirect domains
We use role-based security rules. See firestore.rules for details.
Configure storage rules to allow authenticated users to upload images.
- Create a Cloudinary account
- Set up an unsigned upload preset
- Configure the cloud name and upload preset in your environment variables
- Use standalone components
- Leverage signals for state management
- Use reactive forms with proper validation
- Lazy load feature modules
- Use constructor injection with
inject()function
- Use security rules to protect data
- Batch related operations in transactions
- Use pagination for large data sets
- Cache frequently accessed data
- Properly handle unsubscribing from observables
- Use trackBy with ngFor
- Optimize image loading and transformations
- Implement lazy loading for components and modules
npm run buildnpm run build:prodnpm run deploynpm testnpm run e2eWe use GitHub Actions for CI/CD. The configuration is in .github/workflows/.
- Firebase Connection Issues: Check your API keys and project configuration
- Cloudinary Upload Errors: Verify upload preset permissions
- Build Errors: Make sure all dependencies are correctly installed
- Create a feature branch from
develop - Make your changes
- Write tests for your code
- Create a pull request to
develop - Wait for review and approval