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.
DemoVideo.mp4
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
## 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| title | command | description |
|---|---|---|
| build/td> |
|
Load Dependencies and build project |
| Run on localhost |
|
Will run the backend application on localhost:8080. To run any api just hit "http://localhost:8080/api_url" with required body |
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.gitcd Group14/ui npm install
or
yarn installnpm dev
or
yarn dev- NodeJS
v18.x
you can use nvm to manage node versions
check if exists
node --version
vite --versionNOTE: 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';
| title | command | description |
|---|---|---|
| development |
|
starts development server |
| build |
|
generates bundle files in build directory |
- 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
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 installto 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 installto install dependencies. - Runs
yarn buildto create a production build. - Saves the frontend build artifacts.
- backend-test-job: Runs JUnit tests for backend code.
- Uses Maven Docker image.
- Runs
mvn verifyto 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-backendfor the backend, exposes port8073.my-app-uifor the frontend, exposes port8074.- Port
8074on the server maps to port5173inside the frontend container.
- Port
- 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.
-
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.
-
"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.
-
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.
-
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.
-
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.
- We've separated CSS and JavaScript for improved maintainability and readability.
- Our vite.config.js is organized to enhance readability and manage different aspects of the build process efficiently.
- In LoginSignup.constant.js, we've defined action types and string constants, adhering to the DRY principle and ensuring consistency.
- Our reducers, like in LoginSignup.reducer.js, define an initial state, providing a clear understanding of our data structure and default values.
- We use a clear structure with switch statements in our reducers for handling different action types, enhancing code readability.
- Our action creators, as seen in LoginSingup.actions.js, provide a consistent method for dispatching actions, facilitating maintainability.
- Across our files, we use descriptive variable and function names, making our code self-explanatory.
- We've organized our files to separate concerns (constants, actions, reducer), aiding in maintainability and scalability.
- We maintain a consistent coding style across all files to ensure readability and maintainability.
- In complex logic sections, like in our reducers, we use comments to clarify the purpose of code blocks.
- We use constants instead of hard-coded values to avoid magic numbers/strings, enhancing code readability and maintainability.1
- Our functions are designed to adhere to the Single Responsibility Principle.
- We ensure proper indentation and spacing in our code formatting for enhanced readability.
- We use arrow functions for a concise and modern approach in our JavaScript files.
- In our state management, as seen in reducers, we handle the state immutably, crucial for Redux-like architectures.
- We implement robust error handling mechanisms throughout our code.
- Consistent Naming Conventions: Our naming conventions are consistent, aiding in understanding the codebase.
- We separate logic (JS files) from presentation, following best practices in frontend development.
- Our code utilizes modern JavaScript features, reflecting up-to-date and efficient coding practices.
- 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