Skip to content

Home

Jump to bottom
Alekhyagnv edited this page Apr 20, 2022 · 24 revisions

Welcome to the Gator-News wiki!

Project Idea:

This is a course project for Software Engineering (CEN5035). This project aims to build a Full Stack Web Application known as Gator News. This is a platform where students at the University of Florida can interact with each other as well as know about ongoing events, activities that are taking place as part of the Campus. Students are free to follow each other and share stories and posts related to the University.

Tech Stack Used:

  • Front End - React
  • Back End - GoLang
  • Databases - MongoDB

Useful links of the project

Sprint-I Project Accomplishments:

Frontend Demo: https://youtu.be/Gzo_MphEFjE

Backend Demo: https://youtu.be/aLl1goWGH6w

Backend:

  1. Created a database on MongoDB and established the connection in the backend

  2. Hosted the backend APIs on https://gatornews.herokuapp.com/

  3. Created user model that contains the user information

  4. Built Registration API which takes email and password to get the user started to use the application. The data is then stored in users collection in gatorNews DB

  5. Login API was created which would take email and password. The credentials are validated with the login credentials stored in the Database. A JWT (JSON Web Token) is generated which is valid through the session

  6. User profile can be retrieved by calling View Profile API which takes JWT and User ID. The user profile is output as a JSON object with all the non-empty fields populated

  7. A user's profile can be modified with a call to Modify Profile API with JWT and user updated profile as a JSON object in the HTTP body

  8. The logged-in user can post a message (news or gossip). Post API can be used to post a message with an Authorized JWT and HTTP body with "message" property.

Frontend:

  1. Created User Login and Registration System

  2. Added Validation For Login and Registration using API Endpoints Created from the Backend to check User successful registration and login.

  3. Added Logout Functionality using Token System against the Server

  4. Added Routing Mechanism for responsive UI and to shift between frames efficiently

  5. Designed and Created Pages and Routes for User Profile

  6. Developed Hooks to retrieve User Information from Auth and User IDs

  7. Incorporated Buzz Functionality as part of the application for Registered Gators to Post information on the Feed.

  8. Designed a Modal for obtaining the Tweets of the User and displaying them as part of their Profile Feed.

APIs' demonstration in Postman

Gator-News APIs

Sprint II Project Accomplishments:

Frontend Demo: https://youtu.be/5fnr_Sdbr-U

Backend Demo: https://youtu.be/PWXH4vVxg20

Backend Documentation

Backend:

  1. Wrote unit test cases for the following packages:
    • bd
    • jwt
    • models
    • routers
    • middlew
  2. Built readPosts API which takes id and page as parameters to return all the posts on the user's feed.
  3. To generate a build after every merge or commit to main branch an action was created with the code in go-build.yml
  4. The unit test cases written for the backend in Golang are located under Gator-News/UnitTests and to run the test cases after every commit to the main branch an action was created with the code in go-test.yml

Documentation of API Services:

Registration API 
{
  "name": "Test",
  "lastname": "User",
  "email": "testuser@se.com",
  "password": "123456"
 }
  • OUTPUT
  "Status : 201 Created"
Login API 
  { 
        "email": "testuser@se.com", 
        "password": "123456" 
   }
  • OUTPUT
  "Status : 201 Created"
  {
  "Token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2MjIwMzM4YzlmMTg1MzQxY2U4YTdkOTMiLCJiaW9ncmFwaHkiOiIiLCJiaXJ0aGRhdGUiOiIyMDIyLTAzLTA0VDAxOjA3OjI1LjEyM1oiLCJlbWFpbCI6InRlc3R1c2VyQHNlLmNvbSIsImV4cCI6MTY0NjQ0Mjc0NiwibGFzdG5hbWUiOiJVc2VyIiwibG9jYXRpb24iOiIiLCJuYW1lIjoiVGVzdCIsIndlYnNpdGUiOiIifQ.7tD_XrxyEOLUkZXN-T4Az0yYTuzCW4bomwxouzRXsQM"
  }
viewProfile API 
  "Status : 201 Created"
  {"id":"6220338c9f185341ce8a7d93","name":"Test","lastname":"User","BirthDate":"2022-03-04T01:07:25.123Z","email":"testuser@se.com"}
modifyProfile API 
     { 
          "name":"Test" , 
          "lastname": "User", 
          "birthDate": "1995-02-23T00:00:00Z", 
          "location": "Gainesville",
          "biography": "I am MS CS student", 
          "website": "https://github.com/SaiKumarMalve/Gator-News"
      }
  • OUTPUT
  "Status : 201 Created"
Post API 
     { 
          "message":"This is the Demo for testing purpose"
     }
  • OUTPUT
  "Status : 201 Created"
readPosts API 
  "Status : 201 Created"
 [ {
     "_id": "622167e0a389bd529161b5db",
     "userID": "6220338c9f185341ce8a7d93",
     "message": "Test User Message",
     "date": "2022-03-04T01:14:08.847Z"
 },
 {
     "_id": "622167cceaa1be5c027fd250",
     "userID": "6220338c9f185341ce8a7d93",
     "message": "This is the Demo for testing purpose",
     "date": "2022-03-04T01:13:48.978Z"
 } ]

Front End Sprint 2

  • Created a Modal to display Tweets by User under their Profile Page

  • Added Pagination Mechanism under Basic Modal Component to Structure Tweets made using Buzz along with specific details (I.e username, time, tweet content)

  • Invoking the /readPosts API to fetch all the tweets sent by logged-In user

  • Validation based on API Endpoint Payload and displaying appropriate Alert text for User Logged In Session

Documentation for Cypress Testing

  • Incorporated Cypress framework for Automation Testing to write tests for web development in React

    Login Form 
    Login_Cypress_Test.js:
- Contains tests to check User Login based on REST API Endpoint status codes using demo credentials
    Registration Form 
    Registration_Cypress_Testing.js 
- Contains tests with New User details which triggers the /register endpoint on submission. Checks if Registration is Successful with status code =“2XX” 	       or Failed with status code = “4XX” || “5XX”
    User Profile 
    Buzz_Cypress_Testing.js 
- Validates if the Tweet Entered by User on Buzz Form Submission has invoked the “/post” Endpoint API successfully making the User Tweet Payload       	     displayed as part of Profile along with previous entered ones using “/readPosts” API endpoints ok successful hits.

Unit Testing using JEST for Front End

  • Implemented Unit Test Cases using Jest for testing JavaScript code written as part of React framework .

  • Test Cases are written for each of the below Components to test their functionality which is written as part of the “*.js” files as part of /sec/components/…”$ComponentName.test.js”

  • Jest Unit test cases:

    • Left Menu : Testing functions for Left Menu based on Individual links for Home, Users, Profile, Logout and Buzz
    • ListTweets : Testing Functions for User Profile including Personal Details, Tweet data and Time zone to be displayed based on successful tweet submissions
    • Modal : Contains two files one for BasicModal and TweetModal containing Unit Test Functions for Testing Functionalities on User Page. Testing Buzz Functionalities along with API Endpoints for sending and loading tweets as part of Profile Page
    • SignInForm : Contains Unit Tests to check Successful Login based on correct credentials and vice versa
    • SignUpForm : Contains Unit Tests to check Successful Registration based on proper validation cases for User name and email entered by the user
    • User : Contains two files one for BannerInfo and InfoUser.
      • The Unit Test Cases part of Banner Info checks for the functionality of Individual Components such as “Edit Profile” and “Follow”. It also includes cases to check if the images for profile have been loaded successfully or not
      • InfoUser Unit Test cases contains User Profile details Validation

Sprint III Project Accomplishments:

Frontend Demo: https://www.youtube.com/watch?v=4HhCG85Rz2M

Backend Demo: https://youtu.be/WQyZxikPB5g

Backend:

  1. Built removePosts API which takes id as parameter to delete all the user's posts.
  2. highRelationship API was created to register a relationship between the users. In order to achieve this, We have a created "Relationship.go" model which records the relationship of one user with another.
  3. In order to delete the relationship between the users, we have created lowRelationship API. Using this, we delete the relationship in the database.
  4. userList API is used for retrieving the list of users in the database.This basically depends on 3 parameters - (type,page,search). If type is follow, it generates the list of users that the logged in user follows. If the type is new, it generates a list of all the new users. We can also search for a particular user by specifying search parameter.
  5. readFollowersPosts API returns the posts of all the followers of the current user. It takes page as a parameter.
  6. consultRelation API takes id(User ID) as a parameter. The API checks if the current user and the user whose id is provided are related (following) or not.
  7. uploadAvatar and uploadBanner APIs take an image as input in the HTTP request body. It sets the current user's profile picture and display picture.
  8. getAvatar and getBanner APIs take id as a parameter and returns the Avatar or Banner of the user whose id is provided

Frontend:

  1. Created Config Modal and Structure for Edit Profile under User Modal for Profile User to Update their Personal Information Content on Website.

  2. Invoked REST API calls for /getAvatar which sends the avatar as a Http Response and /getBanner which sends the banner as part of the Http Response

  3. Updating User Information in Backend using above REST Endpoints to fetch latest details on successful form submission.

  4. Created a Follow Modal for managing follow and unfollow requests made by website users to interact with each other.

  5. Introduced 4 major Endpoints

    /consultRelation 
       consultRelation API
   - To check the relationship between two users which sets a base relation for the follow/unfollow Modal
    /highRelationship 
       highRelationship API
   - For Establishing a relationship between two users. This is a follow request API for users to be connected with each other and to be part of network
    /lowRelationship 
       lowRelationship API
   - To disconnect the relationship between users. To Unfollow each other
    /userList 
       userList API
   - To read list of users in the database.

  6. Created a Routing System for Structuring the Users Page

  7. Rendering All the followed Users which are part of the User Connection.

  8. Introduced Pagination Mechanism where each User Profile is displayed under Users Tab in a more visual way.

  9. Incorporated Error404 Page for users to get redirected when they navigate to any URL which is outside the website.

Sprint IV:

Frontend Demo: https://youtu.be/tiwc3ZI5bq8

Cypress Testing Demo: https://youtu.be/rK9bnIE48us

Backend Demo:https://youtu.be/j7ms-XshKEM

Unit test cases Demo: https://youtu.be/lFgySreRFD0

Project Description: Gator News is a Full Stack Web Application. It is a social networking web application which lets users to share posts/news, view news/posts, and user profiles. This is a platform where students at University of Florida can interact with each other as well as know about on-going events, activities which are taking place as part of the Campus. Students are free to follow each other and share stories and posts related to the University.

For the frontend we have used React JS for building interactive User Interfaces based on UI components and for the Backend Golang has been used, a statically typed, compiled programming.

Below are the numerous functionalities incorporated within this web application.

  1. User Profile: Everyone who registers on the website can create and customize their profile which contains their avatar, personal information and personal feed along with time posted which they can always view.
  2. Follower System: User can follow and un-follow other users registered as part of app. Users are free to view list of other registered users whom they follow.
  3. Tweet System: Users can share posts as part of text|stories|embed videos|GIFs|other content using the Buzz feature.
  4. Search Users: Added a Search filter under Users Menu to optimize search for a specific user.

Project Accomplishments:
Backend:

  1. We have deployed our app to Heroku.
  2. We have linked our github repository with Heroku. Heroku has been configured to build and deploy the backend API whenever the main branch changes.
  3. We have added unit test cases for few functionalities.

Frontend:

  1. Have written Unit Test Cases using JEST for all the un-covered and newly developed components and pages.
  2. Did Cypress Testing for the new features that have been added.
  3. Did Styling changes to enhance the look and feel of User Interfaces.
  4. Resolved Bug's for the features which were not working.
  5. Have made few REST Endpoint changes to host the application.

Deploying to Heroku

$ heroku create
$ git push heroku main
$ heroku open

Deploy

Postman Documentation https://documenter.getpostman.com/view/19235697/UVktqZ3q
API Testing using Postman:

  1. Go to your workspace in Postman.
  2. Click on the + symbol to open a new tab.
  3. Enter the API Endpoint where it says, “Enter request URL” and select the method (action type GET, POST, etc.) for that request as shown below. For a post method, you can also specify the body of the request in any of the formats listed.
  4. Click on the Send button.

Link to API Documentation: https://uflorida-my.sharepoint.com/:w:/g/personal/saikumar_malve_ufl_edu/Ec3aXKEQioVDtZ4B1u-44EEBdyqKsbeOWPcsdxbbxFbiOA?e=fvYtN5

Link to Project board:
   Sprint 1: https://github.com/users/SaiKumarMalve/projects/1
   Sprint 2: https://github.com/SaiKumarMalve/Gator-News/projects/1
   Sprint 3: https://github.com/SaiKumarMalve/Gator-News/projects/2
   Sprint 4: https://github.com/SaiKumarMalve/Gator-News/projects/3
Link to Sprint4 deliverables:  https://github.com/SaiKumarMalve/Gator-News/projects/3#column-18361635
Web URL (Bonus): https://saikumarmalve.github.io/Gator-News/

Steps for running the project:

  1. Install the node modules using "npm install" command.
  2. To start the project , type "yarn start".
  3. For testing unit test cases, "npm test" command is required.
  4. For cypress testing, change test field in package.json to cypress open.

Team Members

  1. Frontend
  • Jayanth Atcha
  • Tejaswini Kumkum
  1. Backend
  • Sai Kumar Malve
  • Alekhya Gollamudi
Clone this wiki locally