Anonygram

Trending Article Web Platform
A trending article web platform created using Backend (Spring Boot) and Frontend (React).

Overview

The platform is designed to be displayed on a mobile phone.

Trending article list	Expanded article thread	Reply window	Delete article
Image-previewable input box	After creating article with image	Search with keyword
Setting page	User preference	Login page	Registration page
Trending article list (Light theme)	Creating new article (Light theme)	Setting page (Light theme)

System Architecture

Features

Overview

• A trending article platform similar to Twitter
• Display articles, reply articles, search articles
• User login and authentication
• Preference settings: profile picture, language, theme

Features Details

Server side - Spring boot

• RESTFul API web service with OpenAPI3 document (Swagger)
• Trending articles sorted by update time, implemented using LRU cache
• Cache issue prevention: cache penetration (storing empty values), cache breakdown (distribution lock), and cache avalanche (random expiration times)
• JWT and CSRF token for authentication
• Imgur used as image objects store
• Containerization and deployment using Docker Compose

Client side - React

• React 18 functional components
• Redux with persistence and thunk (asynchronous actions)
• Image-previewable input box
• UI throttle and Axios pending request
• Content html filter to prevent XSS

Quick Start

Run with docker-compose

docker-compose up

Query API

Check other APIs in OpenAPI documentation: https://localhost/api/swagger

Example

Get discussion by page

• Request URL: GET:https://localhost/api/discussion/{{articleId}}?page=1
• Response Body:

{
    "articleId": "bc054e47-1d25-4325-93a3-69beb0cb26c4",
    "status": "NORMAL",
    "count": 3,
    "articles": [
        {
            "articleId": "bc054e47-1d25-4325-93a3-69beb0cb26c4",
            "no": 0,
            "authorId": "TEsbXg9K",
            "title": "About Penguins",
            "word": "Penguins are a group of aquatic flightless birds from the family Spheniscidae of the order Sphenisciformes. They live almost exclusively in the Southern Hemisphere: only one species, the Galápagos penguin, is found north of the Equator. Highly adapted for life in the ocean water, penguins have countershaded dark and white plumage and flippers for swimming. Most penguins feed on krill, fish, squid and other forms of sea life which they catch with their bills and swallow whole while swimming. A penguin has a spiny tongue and powerful jaws to grip slippery prey.",
            "status": "NORMAL",
            "createdTime": "2024-05-23T23:00:41",
            "updatedTime": "2024-05-23T23:00:41",
            "likeCount": 0,
            "like": false,
            "authorName": "TEsbXg9K"
        },
        {
            "articleId": "bc054e47-1d25-4325-93a3-69beb0cb26c4",
            "no": 1,
            "authorId": "GRIZAQpK",
            "word": "Penguins are a group of aquatic flightless birds from the family Spheniscidae of the order Sphenisciformes. They live almost exclusively in the Southern Hemisphere: only one species, the Galápagos penguin, is found north of the Equator. Highly adapted for life in the ocean water, penguins have countershaded dark and white plumage and flippers for swimming. Most penguins feed on krill, fish, squid and other forms of sea life which they catch with their bills and swallow whole while swimming. A penguin has a spiny tongue and powerful jaws to grip slippery prey.",
            "status": "NORMAL",
            "createdTime": "2024-05-23T23:00:41",
            "updatedTime": "2024-05-23T23:00:41",
            "likeCount": 0,
            "like": false,
            "authorName": "GRIZAQpK"
        },
        {
            "articleId": "bc054e47-1d25-4325-93a3-69beb0cb26c4",
            "no": 2,
            "authorId": "ExMfDV0c",
            "word": "Penguins are a group of aquatic flightless birds from the family Spheniscidae of the order Sphenisciformes. They live almost exclusively in the Southern Hemisphere: only one species, the Galápagos penguin, is found north of the Equator. Highly adapted for life in the ocean water, penguins have countershaded dark and white plumage and flippers for swimming. Most penguins feed on krill, fish, squid and other forms of sea life which they catch with their bills and swallow whole while swimming. A penguin has a spiny tongue and powerful jaws to grip slippery prey.",
            "status": "NORMAL",
            "createdTime": "2024-05-23T23:00:41",
            "updatedTime": "2024-05-23T23:00:41",
            "likeCount": 0,
            "like": false,
            "authorName": "ExMfDV0c"
        }
    ]
}

Stress Test

Use ApacheBench for stress testing

cd api/src/test/ab
python3 script.py