Skip to content

Strangely is an innovative web platform that facilitates connections between strangers through events, promoting new friendships and social interactions.

Notifications You must be signed in to change notification settings

KaziNizamul/Strangely

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Strangely

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.

Coverage(https://img.shields.io/badge/coverage-85%25-blue) pipeline(https://img.shields.io/badge/pipeline-passed-green)

Java Spring Boot Lombok Maven JUnit MySQL

React Redux Vite Ant Design Material UI Sass Auth0 Docker GitLab CI/CD




DemoVideo.mp4

Table of Contents

Documentation

  1. 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

  2. Test

    3.1 Coverage

    3.2 Integration tests

    3.3 Test best practices

    3.4 TDD adherence

  3. Quality

    4.1 Architecture smells

    4.2 Design principles

    4.3 Design smells

    4.4 Implementation smells

    4.5 Other clean code practices

  4. Miscellaneous

    5.1 Dependencies


  5. Demo 5.2 Demo Video


☑️ Documentation

Overview

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


▪️Usage Scenario

⏺ User Registration and Login:
  • 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.

⏺ Password Management:
  • 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.
⏺ Homepage Exploration:
  • Explore Categories: Upon login, users will land on the homepage showcasing various categories. They can even add new categories that interest them.
⏺ User Profile Settings:
  • 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.
⏺ Connections and Chat History:
  • Stay Connected: In the "Connections" section, users can see their connected contacts and review their chat history with them.
⏺ Category-specific Posts:
  • 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.
⏺ Interactive Post Engagement:
  • 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.
⏺ Automatic Chat Groups:
  • Post-Related Chat Groups: When a user successfully posts, a chat group is automatically created. The author becomes the group admin.
⏺ Seamless Navigation:
  • Navigate with Ease: On the post page, a left-hand section allows users to effortlessly return to categories.
⏺ Intuitive Navbar:
  • Navigate Anytime: The top navigation bar includes buttons for the homepage, connections (chats), and logout.
⏺ Chat and Connection Management:
  • 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

Image



Strangely - Backend

Prerequisites

## 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

2. Navigate to the project directory

cd Group14/Backend

Commands

 title command  description
build/td>
mvn clean install -Dskiptests
Load Dependencies and build project
Run on localhost
Run the 'main' function BackendApplication class present in BackendApplication.java
Will run the backend application on localhost:8080. To run any api just hit "http://localhost:8080/api_url" with required body

Libraries Used

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

Application Properties Overview

Security Configuration

  • 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

DataSource Configuration

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

JPA Configuration

  • 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

Email Configuration

  • 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

References of technologies used:


Strangely - UI

Getting Started

1. Clone the Repository

 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

2. Navigate to the ui directory

cd Group14/ui

3. Install dependencies

 npm install 
 or
 yarn install

4. Start the development server

npm dev
or
yarn dev

Prerequisites

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';

Commands

 title command  description
development
vite
starts development server
build
vite build
generates bundle files in build directory

Reference of technologies used

Opinionated Dev Environment

☑️ CI/CD

▪️Build

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

▪️Pipeline Stages

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

▪️Build Stage

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.

▪️Test Stage

  • 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.

▪️Publish Stage

Builds Docker images for the backend and frontend.

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

▪️Deploy Stage

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.

▪️Docker Containers

  • 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.

▪️Deployment Access



☑️ Test

▪️Coverage

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

▪️Integration tests

We have written multiple integration tests.

▪️Test best practices

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

▪️TDD adherence

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



☑️ Quality

▪️Design principles

  • 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.



▪️Architecture smells

The detailed excel sheet can be found here

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

▪️Design smells

The detailed excel sheet can be found here

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

▪️Implementation smells

The detailed excel sheet can be found here

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

▪️Other clean code practices (FrontEnd)

  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.

☑️ Miscellaneous

▪️Dependencies

FrontEnd Dependencies

• @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.

Backend Dependencies

• 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.

Features

Developers

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

Releases

No releases published

Packages

No packages published