Speak App

This project is a comprehensive social media web application designed to enable users to connect, share, and interact with each other in a dynamic and engaging environment. The application includes a variety of features to facilitate user interaction, content sharing, and real-time communication. Below are the key functionalities of the application:

User Posts

• Create Posts: Users can create new posts by uploading text and images.
• Edit Posts: Users have the ability to edit their posts to correct or update information.
• Delete Posts: Users can delete their posts if they no longer wish to share them.
• Favorite Posts: Users can add posts to their favorites for easy access later.
• Reactions: Users can add reactions to posts, expressing their emotions or thoughts with likes, loves, and other emoji reactions.

Comments

• Add Comments: Users can add comments to posts to engage in discussions.
• Edit Comments: Users can edit their comments to correct or update information.
• Delete Comments: Users can delete their comments if they no longer wish to share them.
• Reactions: Users can add reactions to comments, similar to posts.

Friendships

• Send Friend Requests: Users can send friend requests to other users to connect.
• Accept/Decline Requests: Users can accept or decline friend requests.
• View Friend ListUsers can view a list of their friends and manage connections.

User Authentication

• Sign up: New users can create an account by providing necessary details such as email, username, and password.
• Login: Users can log in using their credentials to access the application.
• JWT-Based Security: Secure authentication and session management using JSON Web Tokens (JWT).

Real-Time Chat

• Text Chat: Users can engage in real-time text chat with their friends.
• Chat History: Users can view their chat history with friends.

Profile Management

• User Profiles: Users can create and update their profiles with personal information, profile pictures, and cover photos.

Technologies

Frontend (My Part)

• Angular: A powerful framework for building the frontend of the application, providing a robust structure for developing dynamic and responsive user interfaces.
• TypeScript: A superset of JavaScript that adds static typing, enabling the development of scalable and maintainable code.
• WebSocket: A protocol used to implement real-time chat functionality, ensuring seamless and instant communication between users.

Backend

• Java Spring Boot: A framework for building the backend API, providing a comprehensive programming and configuration model for modern Java-based enterprise applications.
• Microservices: An architectural style that structures the backend as a collection of loosely coupled services, enhancing scalability and maintainability.
• Docker: A platform used for containerizing the application, ensuring consistency across multiple environments and simplifying the deployment process.
• PostgreSQL: An advanced, open-source relational database used for storing and managing application data.

Development and Team Collaboration

This was a team project, and my role focused on frontend development using Angular and TypeScript. The project was managed using Jira for task tracking and progress monitoring. Our development process followed Agile methodologies, working in sprints to ensure regular delivery of features and improvements. Our codebase was hosted on GitHub, where we followed a structured workflow:

• Pull Requests: Team members created pull requests for new features and bug fixes.
• Code Reviews: Each pull request underwent a code review process to ensure code quality and consistency.
• Merging: After approval, pull requests were merged into the main branch.

Link to original repository: https://github.com/Project-SpeakApp/SpeakApp

Jira Backlog

Jira Timeline

Pull Request

Tasks done by me

• [Feature] As a user, I want to add a post.
• [Feature] As a user, I want to edit my post.
• [Feature] As a user, I want to delete my post.
• [Feature] As a user, I want to see posts (infinity scroll).
• [Feature] As a user, I want to see comments.
• [Feature] As a user, I want to sort comments by date and reactions.
• [Feature] As a user, I want to add a comment.
• [Feature] As a user, I want to edit my comment.
• [Feature] As a user, I want to delete my comment.
• [Bug] Shifting content when modal open.

Screenshots

Main Page

Thanks to infinity scroll users can load as much posts as they want.

Post and Comment Edition

Post and Comment Deletion

List of Comments

Initially there are 2 comments and every time user clicks load more comments there will be up to 10 additional comments loaded.

Real Time Chat