Portfolio

Code Blog

CodeBlog is a secure Angular blogging platform that empowers developers to create, share, and discover technical articles with role-based authorization, supported by a Node.js/Express backend using JWT authentication and middleware protection, while Angular's modular architecture, lazy loading, and dependency injection ensure high performance and seamless light/dark mode support.

Angular

Node.js

MongoDB

TypeScript

Html

MaterialUI

CSS

Project Requirements

Develop a secure authentication system (JWT-based).

Create a RESTful API for CRUD operations.

Use Angular for dynamic, component-based frontend.

Implement state management with RxJS and Angular services.

Ensure a scalable folder structure for both frontend and backend.

Use MongoDB (Mongoose) for efficient data management.

Deploy on a cloud platform (Vercel & Render).

Approaches Used

Followed MVC (Model-View-Controller) architecture for backend.

Utilized Angular modules and services for structured UI logic.

Created reusable, lazy-loaded Angular components and routes.

Created a modular component system to ensure reusability.

Used HttpClientModule for API calls with error and loading state handling.

Applied JWT authentication with role-based route guards in Angular.

Managed client-side routing using Angular Router with auth guards.

Challenges and Solutions

Managing authentication across pages.

Used AuthService and AuthGuard to protect routes and persist JWT in localStorage.

Handling asynchronous API requests.

Used Angular interceptors to globally handle API errors and attach JWT tokens.

Ensuring responsiveness across devices.

Used Angular Flex Layout and custom CSS Grid to achieve adaptive layouts.

Deploying frontend and backend seamlessly.

Hosted backend API on Render, frontend on Vercel, with CORS configured and environment variables handled properly.

Project Structure


    myPost/
├── backend/          # Node.js + Express API
│   ├── controllers/  # Contains functions handling API logic (e.g., user and post actions)
│   ├── models/       # Defines MongoDB schemas and data structures
│   ├── routes/       # Manages Express routes for different API endpoints
│   ├── middleware/   # Includes authentication, authorization, and error handling
│   ├── config/       # Configuration files for database and environment variables
│   └── server.js     # Main entry point to start the Node.js server
├── frontend/         # Angular + TypeScript user interface
│   ├── src/          # Core source code for the Angular application
│   ├── e2e/          # End-to-end test cases for UI functionality
│   ├── angular.json  # Angular project settings and configurations
│   └── package.json  # Manages frontend dependencies
├── docs/             # Documentation and media assets for the project
├── .gitignore        # Lists files and directories to exclude from version control
└── README.md         # Overview, setup instructions, and project details

How It Works

📦 Setup & Installation

Clone the repository: `git clone https://github.com/your-repo.git`
Install backend dependencies: `cd backend && npm install`
Start backend: `npm run dev`
Install frontend dependencies: `cd frontend && npm install`
Start frontend: `ng Serve`

Installation

Backend

cd backend && npm install && npm start

Frontend

cd frontend && npm install && ng serve

API Endpoints

Method	Route	Description
POST	/api/auth/register	Register a new user
POST	/api/auth/login	Login user and return JWT
GET	/api/users/profile	Get logged-in user's profile
PUT	/api/users/profile	Update logged-in user's profile
GET	/api/posts	Get all blog posts (paginated)
GET	/api/posts/:id	Get a single blog post by ID
POST	/api/posts	Create a new blog post (with image upload)
PUT	/api/posts/:id	Edit a blog post (title, content, image)
DELETE	/api/posts/:id	Delete a blog post
POST	/api/upload	Upload an image (used for post thumbnails)