Sprint 4 Final product Description
A simple social media web app where users can register accounts with their information and login using the same credentials, having real-time chatting between multiple users who joined the same session "localhost 3000", post text "tweets" for all other users to view. Additionally, an error message will appear when the login credentials don't match, status messages will show up when a user joins or leaves the chatting session, a simple embed Twitter widget is added under post page, and a simple suport chat demo is added. Users can navigate between pages using the navigation button on the top left corner.
How to run & install modules
1.For frontend: run "npm install" for react packages and "npm start" to start the application; Before running, install module "react-twitter-embed", and "react-chat-engine".\ 2.For backend: run "go build main" and "go run main.go" for the two backend under folder "backend" and "backend-Chat" seperatly. NOTE that we have two backend folders, need to run both folder seperatly with different terminals at the same time to make our web app work!
project strutures and folders
"Frontend" folder contains everything for our frontend, "backend" contains everything for backend, and "backend-Chat" contains the seperate backend needed in order to make our real-time chatting work on the app.
Final Project demo
link: https://youtu.be/j_HJzqQ3_Tc
Final FrontEnd Cypress Test
Sprint 4 Final step of the Front End Testing and some more functionality without backend and better way to interact with react-chat-engine
Contributor: Fugang Deng\ Framework: react\ Link to the API: https://chatengine.io/ \ There still some arrangement to add user to chat to make the support chat perfect, so there will be people to put cutomer and customer service into the chat, so that they can talk together into the support page.\ Files and folders added or modified under "Frontend" folder.\ How to run: Frontend: run "npm install" for react packages and "npm start" to start the application; Before running, install module "react-twitter-embed" and "react-chat-engine" and "react-axios". When you do the cypress test, you should do npm test in the new terminal Contributon for this sprint:Test the support chat I did and all the other frontend. I have the cypress files with 15 test cases. I implemented the search user and get all the frineds name function with mock data in the serach and users path.
Sprint 4 BackEnd implemented public chat and "personal information" functionality partly
Contributor: Yuhan Jin\ Framework: gin\ Folder: backend/sprint4\ How to run: 1. run "go run main.go" Features:Since the real-time chat room built-in sprint2 does not depend on the GIN framework, the adjustment has been adjusted in sprint4. When users log in to their accounts, they can send messages in a chat room. Everyone who logs in to their account can read the message. Modify the user's personal information and replace the avatar (image upload). However, this part of the function is not fully integrated with the front and back ends, and only functional codes are retained.\ Contribution for sprint4: Optimize previous features. Implement features which allow users talk in public chat room. personal information code-snipt.
Sprint 4 BackEnd implemented account setting, public chat, and "post" funtionality
Contributor: Dafei Du\ Framework: gin\ Folder: backend/sprint4\ How to run: 1. run "go run main.go"\ Features: Users can register, login, logout account. After loging in their account, they can send message in a chat room. Every one who login their account can read the message. Users can also create a post, edit a post and delete a post. Other can read all posts or find specific one post by searching id.\
Contribution for sprint4: Optimize previous features. Implement features which allow users talk in public chat room. Combine all these sprints together. Adding api documentation.
Sprint 4 Final step of the web app, FrontEnd added "Post" page, and combined all functionalities with backend
Contributor: Yuhao Shi\ Contributions: added "post" page where users can post or view all user's tweets, combined everything between frontend and backend (register/login, posts, chats) to make our final product work, also added additional feature- an embed Twitter widget.\ Framework: react\ Files and folders added or modified under "Frontend" folder.\ How to run: 1. Frontend: run "npm install" for react packages and "npm start" to start the application; 2. run "go build main" and "go run main.go" for the two backend under folder "backend" and "backend-Chat" seperatly. 3. Before running, install module "react-twitter-embed" and "react-chat-engine".
Funtionalities for this sprint: Added "post" page where users can post their tweets on the web for others to view. Combined frontend and backend with functionalities including login/register, post and view tweets, and real-time chatting between multiple users. Users can now register and login with the same username and password, post any texts on the web page for all other users to see, and have real-time public chatting with any user who joined the session while seeing their login and logout status. Also added additional feature: a simple embed Twitter Widget with tweet feed directly from UF's Twitter account.
Sprint 3 Frontend Real Time Public Chat with mutiple clients
Contributor: Yuhao Shi\ Framework: react\ Temporary backend: Go\ Files and folders for this functionality: "Frontend" & "backend-Chat" under "main-branch"\ How to run: run "npm install" for react packages and "npm start" to start the application; run "go build main" for the temporary backend. (Also Showcased in the demo video).\ Funtionalities for this Sprint: Real-time Public Chat between multiple users was implemented, users will be able to send and read text massages in real time under "Messages" page. Everyone who joined the local host address "8080" will be able to see the chat history. Notifications will also be seen when new users joined or left the channel. The Frontend was modified so that it will send message data and recieve data from WebSockets. To implement these, I wrote a seperate backend under "backend-Chat" folder because our previous backend was not really capable of combining it with the frontend, so another backend needs to be written from scratch for the real time chatting to work. We will modify the backend even more in the future for this functionality. (To see exactly how it works, a demo video is provided as "Sprint3-Frontend Chat.mp4").
Sprint 3 Frontend Support Chat and Support Page
Contributor: Fugang Deng\ Framework: react\ Package: axios, cypress , cypress testing library, ant-design, react-chat-engine\ Function: At the bottom-right of the website, there is a chatbot image surronding with bule color, once you move the mouse over, it will show "Support Chat Here!!!" and the bule side will disappear. Then, click that, there will be the UI show up to let you enter the email. Once, you enter the email, the chat window will show up and you can chat.\ Testing: The cypress testing require npm install cypress and npm install --save-dev cypress @testing-library/cypress, and put import '@testing-library/cypress/add-commands' in the cypress/support/command.js. I changed to 'test' in package.json to 'cypress open'. Once you do npm start, then open a new terminal type npm test. The cypress interface will show up and double the homepage.js, the test will begin. All the test codes are in the homepage.js in cypress/intergartion. You will see an error on the second test because we need backend to send something to do the fetch, other than that, all the test are good. For, the new functionality I did not write the code for the purpose of testing, so cypress cannot find the exact location of to hover and click, so more test details will show in the Sprint3SupportChat vedio. \ HowToRun: First, you should only put the files in the FrontEnd in one project. Then install these 3 packages as following:\ npm i axios\ npm install react-chat-engine --save\ npm i @ant-design/icons\ Finally, put npm run in the terminal.\ This specific functionality is placed in the branch "main-branch/FrontEnd"
Sprint 3 Backend
Contributor: Dafei Du\ Framework: Gin\ Folders:\ backend/sprint3 Features:\ In this sprint, users can create posts, list posts, update posts and delete posts. Add more unit tests for this functionality.
- create posts: users need input their name and some content to create a post
- list posts: users can view all posts, or search exactly one post by searching post id
- update posts: users can edits their posts
- delete posts: users can delete their posts
The previous functionalities are also optimized. How To Run: go run main.go (to see more details, please check sprint3-backend-demo.mov in backend/sprint3 folder.)
Contributor: Yuhan Jin\ Framework: Gin\ Features:
1.Modify the function of sprint2, follow the GIN framework in sprint1\
2.add the function of post in sprint3,Realize the user's dynamic update function (CURD)\
3.add Friends list viewing , adding new friend functions (only part of the code has been completed)
Sprint 2 Backend
Contributor: Yuhan Jin\ Framework: Gin\ Features:The backend implements the function of real-time communication, creating a chat room that includes the following functions：
1.Broadcast function of users going online :When a user goes online, it will broadcast to all online users that they are online.
2.Online users' query：We can obtain the currently online users list through the query command.
3.Force users to go offline when timeout： When the user does not do any operation within the specified time, the program will force the users to go offline.
4.private and public chat：The private chat function is a point-to-point message transmission; only the two parties can see the content, while the public chat is visible to everyone.
Sprint 2 Backend
Contributor: Dafei Du\ Framework: Gin\ Features: public chat, private chat, update username, log out, API documentation\ Functions:
-
public chat: users can chat to everyone. Any online users can receive the message.
-
private chat: users can choose any online user to chat. They can send messages to each other. Others cannot see the messages.
-
update username: Users do not have their name at the beginning. They should update their username. After done that, they have unique name. This means other users cannot use the same username.
-
logout: If users do not want to chat, they can log out the account the quit the chat room. The status of the1. user will changed to inactive.
-
In addition, I built a client to facilitate operation and combined with sprint1 and sprint2 together.
-
API documentatio is implemented. It contains in backend folder called api.yaml. It can be viewed in swagger.io.
Sprint 2 Frontend UI design & combine frontend and backend
Contributor: Yuhao Shi\ What's working: Based on the first draft, a chat page was added to display real time message textting. After navigating the page to "message" in taskbar, there are three components on the page including a friends list on the left, real time chatting box and a message input box in the middle, and a list of current online friends on the right. I also combined frontend and backend successfully by posting and retriving data between server and database through our local host API. Users now are able to register their account and login with their registered email and password. When clicking on the login button, users will be redirected to a page where a message will be displayed based on whether they are authenticated or not.
Everything we worked on for Frontend were placed under "main-branch" and folder "FrontEnd".
IMPORTANT: as of right now, it seems like we are not able to access API and retrieve data from MySQL database on WINDOWS machines. But everything works perfectly fine on MacOS. It might seems to be an unsolved issue from the database. We might have to change the databse to something else in future sprints.
Sprint 2 Frontend Taskbar and Cypress Unit Testing
Contributor: Fugang Deng\ Framework: react\ Package: react-icon, react-router-dom, cypress , cypress testing library, bootstrap, react-bootstrap\ Function: At the top-left of the website, there is a three white bars, once you click that, the taskbar will show, show websites just simple titles, still need future implementation. I also help to combine the UI of Home, Login, Register and HomePost of my task bar.\ Testing: The cypress testing require npm install cypress and npm install --save-dev cypress @testing-library/cypress, and put import '@testing-library/cypress/add-commands' in the cypress/support/command.js. I changed to 'test' in package.json to 'cypress open'. Once you do npm start, then open a new terminal type npm test. The cypress interface will show up and double the homepage.js, the test will begin. All the test codes are in the homepage.js in cypress/intergartion. You will see an error on the second test because we need backend to send something to do the fetch, other than that, all the test are good. \ Components: Taskbar\ This specific functionality is placed in the branch "main-branch/FrontEnd"
Frontend UI design
Contributor: Yuhao Shi\ What's working: This first draft implementation includes UI design and layout for Home Page, Login Page, Register Page, a global "taskbar" on top to redirect between pages, and a draft page after login. Users can sign up for a new account and then use the credentials to login. Each page is linked through React Route, however, the database that stores user credentials and server API that transfer information between registered users and login still need more work to collaborate with the backend.
The structure uses React Router to navigate between pages.
The implementation is placed in the branch "frontend #1".
Demo for the UI is uploaded in the branch seperately
Sprint 1 Backend Tasktracker
Programming Language: Golang\ Framework: Gin\ Database: mySQL\ Package: jwt-go, cors, gin-gonic/gin, go-sql-driver/mysql, golang.org/x/crypto/bcrypt\ Function: regitser, login, logout\ Test:Postman
Backend
What's working: User authentication (JWT), Login, and Logout functions are implemented, and MySQL is used as the database based on the GIN framework. The next step will focus on the user's information sections: following, followers, Avatar, Comment，Post，Repost.
The implementation is placed in the branch "Sprint1-backend".
Backend Code Contributions：
Dafei Du: datasource, domain, serveices, main.go, video\ Yuhan Jin：app, controller, utils
Getting Started with Create React App
This project was bootstrapped with Create React App.
Available Scripts
In the project directory, you can run:
npm start
Runs the app in the development mode.\ Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.\ You may also see any lint errors in the console.
npm test
Launches the test runner in the interactive watch mode.\ See the section about running tests for more information.
npm run build
Builds the app for production to the build folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\ Your app is ready to be deployed!
See the section about deployment for more information.
npm run eject
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
Learn More
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
Code Splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
Analyzing the Bundle Size
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
Making a Progressive Web App
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
Advanced Configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
Deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
npm run build fails to minify
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify