Microblog Application

A modern multi-user microblog application built with .NET 9 Web API backend and React TypeScript frontend. Users can register, login, create posts, and view posts from other users.

Features

• User Authentication: Register and login with JWT tokens
• Post Management: Create, read, update, and delete posts (280 character limit)
• Real-time Feed: View all posts from all users in chronological order
• User Profiles: Display user information with posts
• Responsive Design: Modern UI with Tailwind CSS
• Pagination: Efficient loading of posts with pagination
• Security: Password hashing with BCrypt and JWT authentication

Technology Stack

Backend (.NET API)

• .NET 9 Web API
• Entity Framework Core with SQLite
• JWT Authentication
• BCrypt.Net for password hashing
• Swagger/OpenAPI documentation

Frontend (React)

• React 18 with TypeScript
• React Router for navigation
• Axios for HTTP requests
• Tailwind CSS for styling
• Context API for state management

Prerequisites

• .NET 9 SDK
• Node.js (version 16 or higher)
• npm or yarn

Getting Started

Option 1: Docker Deployment (Recommended)

The easiest way to run the complete application is using Docker:

git clone <repository-url>
cd POC_for_Zed

# Build and start all services
docker-compose up -d

# Run comprehensive tests
./test-docker.sh

The application will be available at:

• Frontend: http://localhost:3000
• API: http://localhost:5000
• Swagger Documentation: http://localhost:5000/swagger

Option 2: Manual Setup

1. Clone the Repository

git clone <repository-url>
cd POC_for_Zed

2. Setup Backend API

Navigate to the API directory:

cd MicroblogApi

Restore dependencies:

dotnet restore

Build the project:

dotnet build

Run the API:

dotnet run

The API will be available at:

• HTTP: http://localhost:5000
• HTTPS: https://localhost:5001
• Swagger UI: http://localhost:5000/swagger

3. Setup Frontend

Navigate to the frontend directory:

cd ../microblog-frontend

Install dependencies:

npm install

Start the development server:

npm start

The React app will be available at http://localhost:3000

Docker Deployment

Prerequisites for Docker

• Docker
• Docker Compose

Quick Start with Docker

1. Clone and navigate to the project:

   git clone <repository-url>
   cd POC_for_Zed

2. Build and start all services:

   docker-compose up -d

3. Verify deployment:

   docker-compose ps

4. Run comprehensive tests:

   chmod +x test-docker.sh
   ./test-docker.sh

5. Access the application:

   • Frontend: http://localhost:3000
   • API: http://localhost:5000
   • Swagger UI: http://localhost:5000/swagger

Docker Services

The Docker setup includes:

• API Container (microblog-api):

  • .NET 9 Web API
  • SQLite database
  • Runs on port 5000

• Frontend Container (microblog-frontend):

  • React app served by Nginx
  • Runs on port 3000

Docker Commands

# Start services
docker-compose up -d

# View logs
docker-compose logs -f api
docker-compose logs -f frontend

# Stop services
docker-compose down

# Rebuild containers
docker-compose build

# View container status
docker-compose ps

# View resource usage
docker stats

API Endpoints

Authentication

• POST /api/auth/register - Register a new user
• POST /api/auth/login - Login user
• GET /api/auth/user/{id} - Get user by ID
• GET /api/auth/user/{username} - Get user by username

Posts

• GET /api/posts - Get all posts (paginated)
• GET /api/posts/{id} - Get specific post
• GET /api/posts/user/{userId} - Get posts by user ID
• GET /api/posts/user/{username} - Get posts by username
• POST /api/posts - Create new post (authenticated)
• PUT /api/posts/{id} - Update post (authenticated, owner only)
• DELETE /api/posts/{id} - Delete post (authenticated, owner only)

Project Structure

POC_for_Zed/
├── MicroblogApi/                 # .NET Web API Backend
│   ├── Controllers/              # API Controllers
│   ├── Data/                     # Database Context
│   ├── Models/                   # Entity Models and DTOs
│   ├── Services/                 # Business Logic Services
│   ├── Program.cs                # Application Entry Point
│   └── appsettings.json          # Configuration
│
├── microblog-frontend/           # React Frontend
│   ├── public/                   # Static Assets
│   ├── src/
│   │   ├── components/           # React Components
│   │   ├── contexts/             # React Contexts
│   │   ├── services/             # API Services
│   │   ├── types/                # TypeScript Interfaces
│   │   ├── App.tsx               # Main App Component
│   │   └── index.tsx             # Entry Point
│   ├── package.json              # Dependencies
│   └── tailwind.config.js        # Tailwind Configuration
│
└── README.md                     # This file

Configuration

Backend Configuration

The API uses SQLite for simplicity. The database file (microblog.db) will be created automatically in the API directory when you first run the application.

JWT settings can be configured in appsettings.json:

{
  "JwtSettings": {
    "SecretKey": "YourSuperSecretKeyThatIsAtLeast32CharactersLong!",
    "Issuer": "MicroblogApi",
    "Audience": "MicroblogApiUsers",
    "ExpiryInHours": "24"
  }
}

Frontend Configuration

The frontend is configured to connect to the API at http://localhost:5000 by default. You can change this in src/services/api.ts if your API runs on a different port.

Features in Detail

User Registration and Authentication

• Users can register with username, email, and password
• Passwords are securely hashed using BCrypt
• JWT tokens are used for authentication
• Tokens are stored in localStorage and automatically included in API requests

Post Management

• Authenticated users can create posts up to 280 characters
• Users can edit and delete their own posts
• All posts are displayed in chronological order (newest first)
• Posts show author information (username, display name, avatar)
• Timestamps show relative time (e.g., "2h ago", "1d ago")

User Interface

• Clean, modern design using Tailwind CSS
• Responsive layout that works on desktop and mobile
• Loading states and error handling
• Form validation with user feedback
• Character count for post composition

Development

Running in Development Mode

Backend:

cd MicroblogApi
dotnet watch run

Frontend:

cd microblog-frontend
npm start

Building for Production

Backend:

cd MicroblogApi
dotnet publish -c Release

Frontend:

cd microblog-frontend
npm run build

Troubleshooting

Common Issues

1. CORS Error: Make sure the API is running and the frontend URL is in the CORS policy
2. Database Issues: Delete microblog.db to reset the database
3. Port Conflicts: Change ports in launchSettings.json (API) or use different npm port
4. JWT Errors: Clear localStorage and login again

Docker Issues

1. Containers won't start:

   # Check Docker daemon
   docker info
   
   # Check port conflicts
   docker-compose down
   lsof -i :3000,5000
   
   # Rebuild containers
   docker-compose build --no-cache

2. Database errors:

   # Remove containers and volumes
   docker-compose down -v
   
   # Restart fresh
   docker-compose up -d

3. CORS errors:

   • Verify frontend is accessing API correctly
   • Check browser console for errors
   • Ensure containers are on same network

API Not Starting

• Check if the port is already in use
• Verify .NET 9 SDK is installed (for manual setup)
• Check for build errors
• Review container logs: docker-compose logs api

Frontend Not Starting

• Verify Node.js is installed (version 16+) (for manual setup)
• Clear node_modules and reinstall: rm -rf node_modules && npm install
• Check for TypeScript errors
• Review container logs: docker-compose logs frontend

Performance Issues

• Check container resource usage: docker stats
• Increase Docker memory allocation if needed
• Monitor logs for memory/CPU issues

Testing

Automated Testing with Docker

The project includes a comprehensive test script that verifies all functionality:

# Make script executable
chmod +x test-docker.sh

# Run all tests
./test-docker.sh

The test script performs:

• ✅ Container build verification
• ✅ Service health checks
• ✅ API endpoint testing
• ✅ User registration and authentication
• ✅ Post creation and retrieval
• ✅ Frontend accessibility
• ✅ Swagger documentation
• ✅ Error log analysis
• ✅ Performance monitoring

Manual Testing

1. Test User Registration:

   curl -X POST http://localhost:5000/api/auth/register \
     -H "Content-Type: application/json" \
     -d '{
       "username": "testuser",
       "email": "[email protected]",
       "password": "password123",
       "confirmPassword": "password123",
       "displayName": "Test User"
     }'

2. Test Post Creation:

   # Use token from registration response
   curl -X POST http://localhost:5000/api/posts \
     -H "Content-Type: application/json" \
     -H "Authorization: Bearer YOUR_TOKEN_HERE" \
     -d '{"content": "Hello Docker World! 🐳"}'

3. Test Frontend:

   • Open http://localhost:3000 in browser
   • Register a new account
   • Create posts
   • View the feed

Verification Checklist

After deployment, verify:

• Frontend loads at http://localhost:3000
• API responds at http://localhost:5000/api/posts
• Swagger UI accessible at http://localhost:5000/swagger
• User registration works
• Authentication works
• Posts can be created and viewed
• No critical errors in logs

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly (run ./test-docker.sh)
5. Submit a pull request

License

This project is for demonstration purposes. Feel free to use as a starting point for your own projects.