Twitter emulation in Java and React/Angular

The application emulates the main features of Twitter:

• login, logout;
• account management (registration, editing, deleting, search by substring);
• main page (account properties, timeline, tweets, following, followers);
• tweet creating;
• follow/unfollow.

in several ways:

1. Spring MVC, JSP
2. Spring Boot, JSP
3. Spring Boot, React
4. Spring Boot, Angular

Requirements

• JDK 21+
• Apache Maven 3.9.0+
• Node.js 20.18.0+ (optional)
• Docker (optional)

Running

Spring MVC, JSP

1. From the command line with Maven (in the root directory):

   mvn clean install -Dmaven.test.skip=true

2. Change directory:

   cd twitter-emulation-spring-mvc-jsp

3. From the command line run one of the commands with Maven:

   mvn jetty:run (H2)
   mvn jetty:run -P development (H2)
   mvn jetty:run -P production (Oracle Database)
   (Oracle Database connection properties: etc/jetty.xml)

4. Access the deployed web application at:

   http://localhost:8080

5. Log in with existing accounts (jsmith/password, jdoe/password, rroe/password, alone/password) or create a new account

Spring Boot, JSP

1. From the command line with Maven (in the root directory):

   mvn clean install -Dmaven.test.skip=true

2. Change directory:

   cd twitter-emulation-spring-boot-jsp

3. From the command line run one of the commands with Maven:

   mvn spring-boot:run (H2)
   mvn spring-boot:run -P development (H2)
   mvn spring-boot:run -P production (Oracle Database)
   (Oracle Database connection properties: src/main/resources/application.yml)

4. Access the deployed web application at:

   http://localhost:8080

5. Log in with existing accounts (jsmith/password, jdoe/password, rroe/password, alone/password) or create a new account

Spring Boot, React

Method 1

1. From the command line with Maven (in the root directory):

   mvn clean install -Dmaven.test.skip=true

2. Change directory:

   cd twitter-emulation-spring-boot-react-server

3. From the command line run one of the commands with Maven:

   mvn spring-boot:run (H2)
   mvn spring-boot:run -P development (H2)
   mvn spring-boot:run -P production (Oracle Database)
   (Oracle Database connection properties: src/main/resources/application.yml)

4. Access the deployed web application at:

   http://localhost:8080

5. Log in with existing accounts (jsmith/password, jdoe/password, rroe/password, alone/password) or create a new account

Method 2

1. Install Node.js

2. Run to ensure that npm is working:

   npm -v

3. Change directory:

   cd twitter-emulation-spring-boot-react-server

4. From the command line run one of the commands with Maven:

   mvn spring-boot:run (H2)
   mvn spring-boot:run -P development (H2)
   mvn spring-boot:run -P production (Oracle Database)
   (Oracle Database connection properties: src/main/resources/application.yml)

5. Change directory:

   cd twitter-emulation-spring-boot-react-web

6. From the command line with npm:

   npm start

7. Access the deployed web application at:

   http://localhost:5173

8. Log in with existing accounts (jsmith/password, jdoe/password, rroe/password, alone/password) or create a new account

Method 3

1. From the command line with Maven (in the root directory):

   mvn clean package -DskipTests

2. Change directory:

   cd twitter-emulation-distrib/target

3. Find distribution file:

   twitter-emulation-react-<version>.zip

4. Extract files from ZIP, for example:

   unzip twitter-emulation-react-<version>.zip

5. Change directory:

   cd twitter-emulation-react-<version>

6. Run:

   runme.bat (Windows)
   runme.sh (macOS or Linux)

7. Access the running web application at:

   http://localhost:8080

8. Log in with existing accounts (jsmith/password, jdoe/password, rroe/password, alone/password) or create a new account

Spring Boot, Angular

Method 1

1. From the command line with Maven (in the root directory):

   mvn clean install -Dmaven.test.skip=true

2. Change directory:

   cd twitter-emulation-spring-boot-angular-server

3. From the command line run one of the commands with Maven:

   mvn spring-boot:run (H2)
   mvn spring-boot:run -P development (H2)
   mvn spring-boot:run -P production (Oracle Database)
   (Oracle Database connection properties: src/main/resources/application.yml)

4. Access the deployed web application at:

   http://localhost:8080

5. Log in with existing accounts (jsmith/password, jdoe/password, rroe/password, alone/password) or create a new account

Method 2

1. Install Node.js

2. Run to ensure that npm is working:

   npm -v

3. Change directory:

   cd twitter-emulation-spring-boot-angular-server

4. From the command line run one of the commands with Maven:

   mvn spring-boot:run (H2)
   mvn spring-boot:run -P development (H2)
   mvn spring-boot:run -P production (Oracle Database)
   (Oracle Database connection properties: src/main/resources/application.yml)

5. Change directory:

   cd twitter-emulation-spring-boot-angular-web

6. From the command line with npm:

   npm start

7. Access the deployed web application at:

   http://localhost:4200

8. Log in with existing accounts (jsmith/password, jdoe/password, rroe/password, alone/password) or create a new account

Method 3

1. From the command line with Maven (in the root directory):

   mvn clean package -DskipTests

2. Change directory:

   cd twitter-emulation-distrib/target

3. Find distribution file:

   twitter-emulation-angular-<version>.zip

4. Extract files from ZIP, for example:

   unzip twitter-emulation-angular-<version>.zip

5. Change directory:

   cd twitter-emulation-angular-<version>

6. Run:

   runme.bat (Windows)
   runme.sh (macOS or Linux)

7. Access the running web application at:

   http://localhost:8080

8. Log in with existing accounts (jsmith/password, jdoe/password, rroe/password, alone/password) or create a new account

Monitoring

1. Change directory:

   cd twitter-emulation-spring-boot-admin

2. From the command line with Maven:

   mvn spring-boot:run

3. Change directory:

   cd twitter-emulation-spring-boot-react-server

   or

   cd twitter-emulation-spring-boot-angular-server

4. From the command line with Maven:

   mvn spring-boot:run

5. Access Spring Boot Admin application at:

   http://localhost:9000

6. Log in with existing account admin/password

Testing

Backend unit testing for DAOs and services

1. Install Docker (optional, only for Oracle Database testing)

2. Change directory:

   cd twitter-emulation-common

3. From the command line run one of the commands with Maven:

   mvn test (H2)
   mvn test -P development (H2)
   mvn test -P production (Oracle Database)

Backend unit testing for controllers, integration testing

1. Change directory:

   cd twitter-emulation-spring-boot-common-server

2. From the command line with Maven:

   mvn test

Frontend unit testing

Jest, React Testing Library, Vitest tests

1. Change directory:

   cd twitter-emulation-spring-boot-react-web

2. From the command line with npm:

   npm run test

Jasmine tests

1. Change directory:

   cd twitter-emulation-spring-boot-angular-web

2. From the command line with npm:

   npm run test

Frontend end-to-end testing

Puppeteer tests

1. Change directory:

   cd twitter-emulation-spring-boot-react-web

2. From the command line with npm:

   npm run e2e

Protractor tests

1. Change directory:

   cd twitter-emulation-spring-boot-angular-web

2. From the command line with npm:

   npm run e2e

Development

• H2 Database Console
• Swagger:
  • Swagger UI
  • Swagger JSON
  • Swagger YAML

Frameworks and libraries

• Spring:
  • Spring MVC
  • Spring Boot
  • Spring Security
  • Spring Test
  • Spring Boot Admin
• React
• Angular
• H2 or Oracle Database (data storage)
• Swagger (REST API documentation)
• JUnit (Java unit testing)
• Mockito (mocking for unit tests in Java)
• TestContainers (testing with Docker containers)
• Jest (JavaScript unit testing)
• React Testing Library (JavaScript unit testing for React)
• Jasmine (JavaScript unit testing)
• Puppeteer (JavaScript end-to-end testing)
• Protractor (end-to-end testing for Angular)
• Vitest (JavaScript testing by Vite)

CI/CD

• GitHub Actions (automation of workflows)
• Dependabot (automated dependency updates)
• Mergify (automated merging of pull requests)

Tools

• ToDoList 7.1.5+ (planning)
• Pencil 3.0.4+ (GUI prototyping)
• Violet 0.21.1 (UML diagrams)

Article

The evolution of creating web applications in Java (Russian)