Strangely is an innovative web platform that facilitates connections between strangers through events, promoting new friendships and social interactions. It provides an easy-to-use interface for users to engage in events and meet new people.

Documentation

• Overview

• 1.1 Usage Scenario
  

• Backend Setup

  • Libraries Used
  • Prerequisites
  • Getting Started
  • References of technologies used
  
  

• Frontend Setup

  • Prerequisites
  • Getting Started
  • Commands
  • References of technologies used
  • Opinionated Dev Environment
    

• 1.2 Build/Deployment/Local run instructions

2. CI/CD

   2.1 Build

   2.2 Pipeline Stages

   2.3 Build Stage

   2.4 Test Stage

   2.5 Publish Stage

   2.6 Deploy Stage

   2.7 Docker Container

   2.8 Deployment Access

3. Test

   3.1 Coverage

   3.2 Integration tests

   3.3 Test best practices

   3.4 TDD adherence

4. Quality

   4.1 Architecture smells

   4.2 Design principles

   4.3 Design smells

   4.4 Implementation smells

   4.5 Other clean code practices

5. Miscellaneous

   5.1 Dependencies

   
   

6. Demo 5.2 Demo Video

• Features
• Developers
• License

Strangely is designed to create a comfortable and welcoming platform for people looking to expand their social circles and experience new events.

• Sign Up with Ease: Users can effortlessly register using their email or opt for a quicker sign-up with their Google account.

• Simple Login Process: Once registered, users can log in using their chosen credentials or with their Google account.

• Forgot Password? No Worries: If a user forgets their password, they can click on the "Forgot Password" option, enter their username, and receive a password reset link.

• Explore Categories: Upon login, users will land on the homepage showcasing various categories. They can even add new categories that interest them.

• Customize Your Profile: A convenient left-hand panel offers options for "Profile" and "Connections." Users can click on "Profile" to easily modify settings such as username, email, and phone number.

• Stay Connected: In the "Connections" section, users can see their connected contacts and review their chat history with them.

• Discover and Share: Clicking on individual categories reveals related posts. Users can view posts by others or contribute by adding their own with captions or images.

• Express Yourself: Each post offers options to like, dislike, love, and chat. Users can react to posts and connect with others through our built-in messaging system.

• Post-Related Chat Groups: When a user successfully posts, a chat group is automatically created. The author becomes the group admin.

• Navigate with Ease: On the post page, a left-hand section allows users to effortlessly return to categories.

• Navigate Anytime: The top navigation bar includes buttons for the homepage, connections (chats), and logout.

• Connect and Communicate: On the chat page, users can manage connections, add new ones, or remove existing ones. The messaging system enables individualized communication with connections.

• Join Post-Related Groups: Viewers of a post can request to join the chat group. They can send a direct message to the author, asking for an invitation to the group.

• One-on-One Communication: Users can directly message anyone within the platform. This allows for private and direct communication between users.

To easily understand use case scenario we have created the Use Case UML diagram

• Java 17
• Maven 3.9.5
• Lombok 1.18.22
• SQL

## Getting Started
Follow these steps to set up and run the project locally.

### 1. Clone the Repository
```bash
 git clone [email protected]:courses/2023-fall/csci-5308/Group14.git 
 OR
 git clone https://git.cs.dal.ca/courses/2023-fall/csci-5308/Group14.git

cd Group14/Backend

mvn clean install -Dskiptests

Run the 'main' function BackendApplication class present in BackendApplication.java

The backend utilizes a range of libraries, including:

• spring-boot-starter-data-jdbc
• spring-boot-starter-oauth2-client
• spring-boot-starter-oauth2-resource-server (version: 6.1.5)
• spring-boot-starter-security
• spring-boot-starter-web
• spring-ldap-core
• spring-security-ldap
• mysql-connector-j
• spring-boot-starter-data-jpa
• spring-boot-devtools
• spring-boot-starter-test
• spring-security-test
• spring-security-oauth2-resource-server: v6.1.5
• lombok-maven-plugin: v1.18.20.0
• mapstruct: v1.5.5.Final
• mapstruct-processor: v1.5.5.Final
• spring-boot-starter-mail: v3.1.4
• velocity: v1.7
• jakarta.validation-api: v3.0.2
• lombok: v1.18.30
• spring-context-support: v6.0.12
• firebase-admin: v9.2.0
• spring-security-oauth2-autoconfigure: v2.6.8
• java-jwt: v4.4.0
• spring-web: v6.0.12
• spring-security-web: v6.1.4
• spring-websocket (version: 6.0.13)
• spring-messaging (version: 6.0.13)
• junit
• mockito-core

• spring.security.user.name
• spring.security.user.password
• spring.security.oauth2.client.registration.google.client-id
• spring.security.oauth2.client.registration.google.client-secret
• spring.security.oauth2.client.registration.google.scope

• spring.datasource.url
• spring.datasource.username
• spring.datasource.password

• spring.jpa.show-sql
• spring.jpa.properties.hibernate.format_sql
• OAuth2 Resources Configuration
• spring.security.oauth2.resourceserver.jwt.issuer-uri
• spring.security.oauth2.resourceserver.jwt.jwk-set-uri

• spring.mail.protocol
• spring.mail.host
• spring.mail.port
• spring.mail.username
• spring.mail.password
• spring.mail.properties.mail.smtp.auth
• spring.mail.properties.mail.smtp.starttls.enable
• spring.mail.properties.mail.smtp.ssl.enable
• spring.mail.properties.mail.smtp.starttls.required
• mail.smtp.starttls.enable

• Spring Boot
• Spring Framework
• Spring Security
• Spring LDAP
• Spring Cloud
• MySql Connector/
• Project Lombok
• MapStruct
• Jakarta Validation API
• Java JWT
• Firebase Admin SDK
• Apache Velocity
• Junit
• Mockito

 git clone [email protected]:courses/2023-fall/csci-5308/Group14.git 
 OR
 git clone https://git.cs.dal.ca/courses/2023-fall/csci-5308/Group14.git

cd Group14/ui

 npm install 
 or
 yarn install

npm dev
or
yarn dev

• NodeJS v18.x

you can use nvm to manage node versions

check if exists

node --version
vite --version

NOTE: if you are trying to consume deployed backend url in frontend, then you need to connect to Dalhousie VPN and consume this deployed backend url

i.e 'http://172.17.1.123:8073' in file : ui/src/services/urls.js

else if you want to use locally ran backend service

then replace export const baseURL = 'http://172.17.1.123:8073'; with export const baseURL = 'http://localhost:8080';

vite

vite build

• React
• React Router
• Redux
• AntDesign
• Vite
• Axios
• Emotion
• Material-UI
• React Font Awesome
• React Oauth
• Sass
• Classnames
• Redux DevTools Extension
• Redux Thunk

• Use Visual Studio Code - v1.82.2.
• Install extensions
  • ESLint
  • Prettier - Code formatter

Continuous Integration and Delivery This application uses GitLab CI/CD for automating builds, tests, and deployments.

The .gitlab-ci.yml file defines the following stages:

This stage has two parallel jobs:

• backend-build-job: Builds the Spring Boot backend application using Maven.

  • Uses Maven Docker image.
  • Runs mvn clean install to compile and package the backend.
  • Saves the generated JAR file as a build artifact.

• frontend-build-job: Builds the React frontend application using Yarn.

  • Uses Node Docker image.
  • Runs yarn install to install dependencies.
  • Runs yarn build to create a production build.
  • Saves the frontend build artifacts.

• backend-test-job: Runs JUnit tests for backend code.
  • Uses Maven Docker image.
  • Runs mvn verify to execute unit tests.
  • Frontend tests are commented out for now.

Builds Docker images for the backend and frontend.

• Tags images with Git commit SHA for traceability.
• Pushes images to Docker Hub repository.

Deploys the application to the production server (IP 172.17.1.123).

• Connects to the server via SSH using a private key.
• Pulls the latest images from Docker Hub.
• Stops any existing containers.
• Starts new containers with the latest images.

• my-app-backend for the backend, exposes port 8073.
• my-app-ui for the frontend, exposes port 8074.
  • Port 8074 on the server maps to port 5173 inside the frontend container.

• Backend: http://172.17.1.123:8073 (for internal consumption)
• Frontend: http://172.17.1.123:8074 (Publicaly exposed)

Code coverage report was generated using IntelliJ. Our code coverage for service class is 85%.

We have written multiple integration tests.

We have followed best practices for mocking the dependent classes. System under test is beign tested in isolation.

For some of our APIs we have followed Test driven developement approach.

• Single Responsibility Principle

  The Single Responsibility Principle dictates that a class should have a singular responsibility, promoting the separation of concerns and facilitating the modification, testing, and reuse of code. This principle is being adhered to in several instances where we are creating distinct controllers and services for various stakeholders.

• Open/Closed Principle (OCP)

  "A class should be open for extension but closed for modification" means that a class's behavior can be extended without modifying its source code. We have implemented this principle in our application by creating separate classes for different types of users.

• Liskov Substitution Principle (LSP)

  Subtypes should be able to replace their base types without changing the correctness of the program. As a result, we ensure that if any class implements an abstract class or interface, it can fully replace its parent class.

• Interface Segregation Principle (ISP)

  The Interface Segregation Principle advocates for the use of smaller, more specialized interfaces instead of larger, more complex ones. This approach enables easier maintenance, testing, and code reuse. To implement this principle, we have designed separate interfaces for specific tasks. For example, we have a dedicated mail service interface responsible solely for sending mails, without including unnecessary methods that users would have to implement during implementation. By segregating interfaces in this way, we ensure that our application remains organized and manageable.

• Dependency Inversion Principle (DIP)

  To promote modularity and extensibility, the principle suggests that modules should rely on abstractions such as interfaces and abstract classes. To reduce dependencies on individual classes and decouple the components, we employ numerous interfaces and classes. As we're using Spring Boot for our application, we don't need to be too concerned about this principle because the framework is based on SOLID principle.

• The Excel sheet : ArchitectureSmellsFinal.xlsx
• Preview:
• These are all false positive smells, Thier reason for being false positive is shown below.

• The Excel sheet : DesignSmellsFinal.xlsx
• Preview:
• These are all false positive smells, Thier reason for being false positive is shown below.

• The Excel sheet : ImplementationSmellsFinal.xlsx
• Preview:
• These are all false positive smells, Thier reason for being false positive is shown below.

1. We've separated CSS and JavaScript for improved maintainability and readability.
2. Our vite.config.js is organized to enhance readability and manage different aspects of the build process efficiently.
3. In LoginSignup.constant.js, we've defined action types and string constants, adhering to the DRY principle and ensuring consistency.
4. Our reducers, like in LoginSignup.reducer.js, define an initial state, providing a clear understanding of our data structure and default values.
5. We use a clear structure with switch statements in our reducers for handling different action types, enhancing code readability.
6. Our action creators, as seen in LoginSingup.actions.js, provide a consistent method for dispatching actions, facilitating maintainability.
7. Across our files, we use descriptive variable and function names, making our code self-explanatory.
8. We've organized our files to separate concerns (constants, actions, reducer), aiding in maintainability and scalability.
9. We maintain a consistent coding style across all files to ensure readability and maintainability.
10. In complex logic sections, like in our reducers, we use comments to clarify the purpose of code blocks.
11. We use constants instead of hard-coded values to avoid magic numbers/strings, enhancing code readability and maintainability.1
12. Our functions are designed to adhere to the Single Responsibility Principle.
13. We ensure proper indentation and spacing in our code formatting for enhanced readability.
14. We use arrow functions for a concise and modern approach in our JavaScript files.
15. In our state management, as seen in reducers, we handle the state immutably, crucial for Redux-like architectures.
16. We implement robust error handling mechanisms throughout our code.
17. Consistent Naming Conventions: Our naming conventions are consistent, aiding in understanding the codebase.
18. We separate logic (JS files) from presentation, following best practices in frontend development.
19. Our code utilizes modern JavaScript features, reflecting up-to-date and efficient coding practices.
20. Our file structure is designed to be scalable, accommodating the growth of the project.

• @emotion/react: ^11.11.1 - Library for CSS-in-JS styling solution, providing great performance and flexibility.

• @emotion/styled: ^11.11.0 - A lightweight library for writing CSS styles with JavaScript.

• @fortawesome/free-solid-svg-icons: ^6.4.2 - Solid style icon set from Font Awesome.

• @fortawesome/react-fontawesome: ^0.2.0 - Font Awesome integration for React applications.

• @mui/icons-material: ^5.14.18 - Material Design icons for MUI.

• @mui/material: ^5.14.18 - React components that implement Material Design using MUI.

• @mui/styled-engine: ^5.14.15 - Styled engine for MUI components.

• @react-oauth/google: ^0.11.1 - Library for implementing Google OAuth in React.

• @reduxjs/toolkit: ^1.9.7 - Toolkit for efficient Redux development.

• antd: ^5.9.4 - Ant Design, a design system with React UI library.

• axios: ^1.5.1 - Promise-based HTTP client for browser and Node.js.

• classnames: ^2.3.2 - Utility for conditionally joining classNames together.

• eslint-config-react-app: ^7.0.1 - ESLint configuration used by Create React App.

• node-sass: ^9.0.0 - Library providing Node.js bindings to LibSass.

• react: ^18.2.0 - Library for building user interfaces.

• react-dom: ^18.2.0 - DOM-specific methods for React.

• react-redux: ^8.1.3 - Official React bindings for Redux.

• react-router-dom: ^6.16.0 - DOM bindings for React Router.

• redux: ^4.2.1 - Predictable state container for JavaScript apps.

• redux-devtools-extension: ^2.13.9 - DevTools extension for Redux.

• redux-thunk: ^2.4.2 - Middleware for Redux.

• vite: ^4.4.11 - Frontend build tool.

• vite-plugin-eslint: ^1.8.1 - Vite plugin to integrate ESLint.

• spring-boot-starter-data-jpa: - Integration of Spring Data JPA with Spring Boot.

• spring-boot-starter-security: - Integration of Spring Security with Spring Boot.

• jjwt-api: - APIs for creating, parsing, and verifying JWTs.

• jjwt-impl: - Implementation of JWT APIs.

• jjwt-jackson: - Jackson-based JSON support for JWTs.

• spring-boot-starter-web: - Support for building web applications including RESTful applications using Spring MVC.

• spring-boot-devtools: - Tools for development in Spring Boot.

• mysql-connector-j: - JDBC driver for MySQL.

• lombok: 1.18.30 - Java library for reducing boilerplate code.

• spring-boot-starter-tomcat: - Integration of Tomcat with Spring Boot.

• spring-boot-starter-test: - Tools for testing Spring Boot applications.

• spring-security-test: - Support for testing Spring Security.

• log4j-api: - Logging API for Java.

• spring-ldap-core: - Core LDAP features in Spring.

• spring-security-ldap: - LDAP features in Spring Security.

• spring-security-oauth2-resource-server: 6.1.5 - Support for OAuth 2.0 resource server.

• lombok-maven-plugin: 1.18.20.0 - Maven plugin for Lombok.

• mapstruct: 1.5.5.Final - Code generator for converting between Java bean types.

• mapstruct-processor: 1.5.5.Final - Processor for MapStruct.

• spring-boot-starter-mail: 3.1.4 - Integration of mail sending functionality with Spring Boot.

• velocity: 1.7 - Template engine.

• jakarta.validation-api: 3.0.2 - Jakarta Bean Validation API.

• spring-context-support: 6.0.12 - Support classes for integrating common third.

• Nizamul Kazi
• R Khanna
• N Chudasama
• F Vora
• M Faizan