Welcome to the csc4700-team-project-socialconnect wiki!

1 Final Artifact links

1.1 Final Abstract with Project Title and Team Member Names

Project Name: Social Connect Team Members: Dan Frost, Joey Lamanna, Charlie Hume

Abstract: Social Connect is a social media dashboard that allows users to see all their content in one place. Our motivation was to create a web-app for content creators that post to multiple platforms such as Instagram, TikTok, and YouTube, to access everything without needing to open multiple apps. Social Connect users can customize their own dashboard that uses API calls to display their most recent posts, an interactive calendar to schedule future posts, graphical analytics of views, likes, shares, and watch time, and a visual of most recent comments received across all platforms with the ability to reply to them.​​

1.2 Final Poster

Social Connect Poster

1.3 Lightning Talk

Social Connect Lightning Talk

1.4 Project Management

Social Connect Project Management

1.5 Final Demo Video

Social Connect Final Demo Video

2. Requirements

2.1 Key User Stories

User Story	Status
As a creator, I would want to have my accounts remain linked after logging out, so that I don't have to waste time signing into my socials every time I log on	Met
As a creator, I want to see trends in analytics (Likes, shares, new followers, views, watch time) for multiple platforms, so that I can adjust my content accordingly. Stakeholder suggested doing recent 5-10 posts rather than last 7 days. (Charlie)	Met *shallow trench
As a creator, I want my logins to other sites to be stored securely	Met
As a creator, I want analytics and comments to load within 5 seconds	Met
As a creator, I would want the analytics to refresh every 5 minutes, so that the data is always up to date	Met
As a creator, I want to customize the look of my dashboard, so that I can match it to the theme of my brand. Specifically the color scheme according to our interview with a stakeholder	Deferred
As a creator, I want to have a moderator role, so that I can have trusted team members delete bad comments or post for me without having full permission to my accounts. (From Stakeholder)	Removed
As a creator, I want to be able to search comments across platforms for keywords so that I can reply to certain comments easily. Stakeholder wants to filter out negative comments	Deferred

2.2 Requirements Analysis Artifact

Release 1 Tests Social Connect

Release 1 Retrospective Social Connect

Release 1 Documentation Social Connect

3. Scope Adjustments

One of the biggest scope adjustments we made this semester was focusing on the functionality as well as enhancing the user UI. This meant we would not have time to add things such as a customizable experience for the user dashboard. This also meant other features like searching and filtering comments was delayed to ensure we achieved the shallow trench and that our site looked more professional. Doing this we were able to achieve implementing 3 different social media APIs: TikTok, Instagram, and YouTube. This allowed us to focus on getting the most amount of analytics and and posting functionality in one place which was the overall goal when we came up with the idea for Social Connect. One pivot we made was not fully implementing TikTok posting functionality because we needed developer functionality while we only had the sandbox version. We made this decision because of TikTok's requirements for developer access and it was not within our scope of this semester.

4. Risks

Risks

5. Design

5.1 Design Narrative

The main thing that changed in our design is where we were making our API calls from. We changed from making our API calls from our frontend to our backend to increase security and performance. By making our API calls from the backend, our user's social media API tokens never have to touch our frontend which could be intercepted or taken through certain vulnerabilities. It also allows us to multi-thread our calls, increasing performance when we are making so many calls to different platforms.

5.2 Design Diagram(s)

Social Connect Updated Design Diagram

6. Implementation

6.1 Development Environment

Social Connect Tech Stack

6.2 Implementation Challenges

One obstacle we encountered during implementation was dealing with the different formats for each platform. Although we were (mostly) able to get the same information from each platform, the metrics and fields were organized differently. Another problem we ran into was implementing OAuth for TikTok and YouTube. We had issues getting RestTemplate to properly encode our fields and we also had issues getting the result from our callback uri to our frontend so that the user was shown as logged in.

6.3 Code Samples

First obstacle -

    ...(tiktokPage ? tiktokPage.videos.data.videos.map(post => ({
      timestamp: post.create_time * 1000,
      source: 'TikTok',
      caption: post.video_description,
      media_url: post.id,
      media_type: 'VIDEO'
    })) : []),
    ...instaPage.business_discovery.media.data.map(post => ({
      ...post,
      timestamp: post.timestamp,
      source: 'Instagram'
    })),
    ...(youtubePage ? youtubePage.videos.map(post => ({
      timestamp: post.contentDetails.videoPublishedAt,
      source: 'YouTube',
      caption: null,
      media_url: post.contentDetails.videoId,
      media_type: 'VIDEO'
    })) : [])
  ]
  
  combinedPosts.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));

Second obstacle -

            String decodedCode = URLDecoder.decode(code, StandardCharsets.UTF_8.name());
            URIBuilder builder = new URIBuilder(tiktokTokenURL); 
            HttpPost post = new HttpPost(builder.build());

            List<NameValuePair> urlParameters = new ArrayList<>();
            urlParameters.add(new BasicNameValuePair("code", decodedCode));
            urlParameters.add(new BasicNameValuePair("grant_type", "authorization_code"));
            urlParameters.add(new BasicNameValuePair("client_key", tiktokClientKey));
            urlParameters.add(new BasicNameValuePair("client_secret", tiktokClientSecret));
            urlParameters.add(new BasicNameValuePair("redirect_uri", tiktokRedirectURI));

            post.setEntity(new UrlEncodedFormEntity(urlParameters));
            post.setHeader("Content-Type", "application/x-www-form-urlencoded");
            CloseableHttpClient httpclient = HttpClients.createDefault();
            CloseableHttpResponse httpResponse = httpclient.execute(post);

            HttpEntity entity = httpResponse.getEntity();
            String responseString = EntityUtils.toString(entity, StandardCharsets.UTF_8);

6.4 User Interface

UI Screenshots

7. Testing

7.1 Test Scenarios

Release 3 Test Scenaraios

7.2 Alpha Test Results

Release 3 alpha tests

7.3 Known Issues

• YouTube posting doesn't refresh token automatically, if token expired YouTube posting will fail
• Can only post to YouTube successfully when also posting to Instagram due to differences in process flow for posting to Instagram vs YouTube - processed file isn't referenced correctly
• Replying to YouTube comments isn't functional
• Frontend redirect logic for YouTube and TikTok logic is broken - logs in users successfully in backend but causes users to show up as logged out from all platforms when they sign in until they refresh page
• Carousel and photo posting for Instagram don't work

8. Future Plans for the Project

We would like to continue working on the project to go from sandbox mode to a developer version where we can have more than just Joey as a user linking accounts. From there we would like to get as many people using Social Connect, and hopefully can have ads to make some revenue on the site when it is fully polished and deployed to the public. We do not permit future Senior Projects students to continue working on our project.

9. Project Retrospective

9.1 Reflection: Looking back across all sprints this semester, what went well with your project?

We did a good job accomplishing what we set out to do which was creating a social media aggregator. It works fairly well for our use case of posting shorts and was decently reliable but in a future project we might want to expand this to work for more types of media and other use cases besides just short form content. We learned a lot about architecture design and how to set up systems that we could generalize easily which helped us implement other API's extremely fast.

9.2 Curriculum: Which topics and courses were most useful for your senior project?

CSC 2053 was one of the most useful courses we took for this project because of our exposure to React and working with CSS styling was crucial to the success of this project. CSC 4480 was very helpful for working with the mySQL database for our project. Computer Systems II was another helpful course to help implement multithreading to help load the API calls faster. Lastly, a integral course to the success of this project was CSC 4700 because that really helped us learn the Agile process and optimizing our development. One additional topic we recommend is an introductory guide to cloud hosting, so that if people want to host their application they know where to start.

9.3 Advice: In Fall 2025, a new cohort of seniors will begin work on their Senior Projects. What advice do you have for your fellow students to succeed with their senior projects?

One of the biggest pieces of advice we can offer is to use your resources. You have many professors and peers around you who are so open to helping and wanting to see you succeed. Another piece of advice is commit early and often. Don't be afraid to experiment with new technologies. Don't be afraid to tackle a big project - it's your senior project after all.

10. Cybersecurity

A big focus when developing our web application was ensuring the security of our users. Our login system hashes and salts a user's password in our SQL database. They are also required to verify their account before being able to access our platform. Our applications utilizes OAuth logins for TikTok, Youtube, and Instagram. We also implemented a JWT based access and refresh token login system.