Angular Blog CMS is a lightweight, intuitive content management system that demonstrates modern Angular development practices. Perfect for learning Angular fundamentals or as a starter template for your blog platform.
- 🎨 Clean Architecture - Well-organized component structure
- 🚀 Modern Stack - Built with Angular 20 and TypeScript 5.4
- 📱 Responsive Design - Works seamlessly across all devices
- ⚡ Fast Performance - Optimized for speed and efficiency
- 🔧 Easy Setup - Get started in minutes
Get up and running in just a few steps:
git clone https://github.com/sharadj19/blog-cms.git
cd blog-cms
npm installYou'll need to run both the backend API and frontend application:
# Terminal 1 - Start the JSON Server (Backend)
npm run db-json
# Terminal 2 - Start Angular Development Server (Frontend)
npm start🎉 That's it! Your application is now running:
- Frontend: http://localhost:4200
- Backend API: http://localhost:3001
To test on mobile devices on the same network(hotspot):
npm run start:mobile
|
|
|
|
| Technology | Purpose |
|---|---|
| Angular 20 | Frontend framework |
| TypeScript 5.4 | Programming language |
| json-server | Mock REST API |
| Angular Router | Navigation & routing |
| RxJS | Reactive programming |
| Vercel | Deployment platform |
blog-cms/
|
├── json-server-db/
│ └── db.json # Mock API data
│
├── public/
│ └── favicon.ico
│
├── screenshots/ # App screenshots for README
│ ├── categories.png
│ ├── dashboard.png
│ ├── post-detail.png
│ ├── post-editor.png
│ └── posts-list.png
│
├── src/
│ ├── app/
│ │ ├── models/ # Data models
│ │ │ ├── category-model.ts
│ │ │ └── post-model.ts
│ │ │
│ │ ├── pages/ # App pages / routes
│ │ │ ├── categories/
│ │ │ │ ├── categories.html
│ │ │ │ ├── categories.ts
│ │ │ │ └── categories.css
│ │ │ │
│ │ │ ├── dashboard/
│ │ │ │ ├── dashboard.html
│ │ │ │ ├── dashboard.ts
│ │ │ │ └── dashboard.css
│ │ │ │
│ │ │ ├── post-detail/
│ │ │ │ ├── post-detail.html
│ │ │ │ ├── post-detail.ts
│ │ │ │ └── post-detail.css
│ │ │ │
│ │ │ ├── post-form/
│ │ │ │ ├── post-form.html
│ │ │ │ ├── post-form.ts
│ │ │ │ └── post-form.css
│ │ │ │
│ │ │ └── posts/
│ │ │ ├── posts.html
│ │ │ ├── posts.ts
│ │ │ └── posts.css
│ │ │
│ │ ├── services/
│ │ │ └── api-service.ts # REST API wrapper
│ │ │
│ │ ├── app.config.ts
│ │ ├── app.html
│ │ ├── app.ts
│ │ └── app.routes.ts
│ │
│ ├── assets/
│ │ └── icons/ # UI icons
│ │ ├── categories.svg
│ │ ├── dashboard.svg
│ │ └── posts.svg
│ │
│ ├── environments/ # Env configs
│ │ ├── environment.ts
│ │ └── environment.development.ts
│ │
│ ├── index.html
│ ├── main.ts
│ └── styles.css
│
├── package.json
└── angular.json # Angular project config
| Command | Description |
|---|---|
npm start |
Start Angular development server |
npm run db-json |
Start JSON Server backend |
npm run build |
Build for production |
npm run start:mobile |
Start with network access for mobile testing |
npm test |
Run unit tests |
Environment configurations can be modified in:
src/environments/environment.development.ts(development)src/environments/environment.ts(production)
This project helped me master:
✅ Angular Fundamentals
- Component architecture and lifecycle hooks
- Dependency injection and services
- Template and reactive forms
- Data binding and event handling
✅ Routing & Navigation
- Angular Router configuration
- Route guards and lazy loading
- Navigation strategies
✅ HTTP & APIs
- HttpClient for API calls
- Observable patterns with RxJS
- Error handling and interceptors
✅ TypeScript
- Strong typing and interfaces
- Generics and advanced types
- Best practices and patterns
✅ Development Workflow
- Version control with Git
- Code organization and structure
- Debugging techniques
- Deployment strategies
|
Real-time statistics and insights at a glance |
Browse, search, and manage all your blog posts |
|
Intuitive interface for creating and editing content |
Detailed view of individual blog posts |
|
Organize your content with custom categories |
Distributed under the GNU General Public License v3.0. See LICENSE for more information.
If you have any feedback, please reach out by creating an issue or connecting with me through my portfolio!
Made with ❤️ by Sharad Chandel