zywangdylan/pennstagram

CIS557 Web Development

Overview 💻

Pennstagram is a photo sharing social networking MERN app created in 2022. This app allows users to upload posts publicly or keep the posts only visible to themselves. As a social networking app, Pennstagram also allows users to browse other users' profile contents, like and comment photos and mention other users in a post. Users can follow/unfollow other users and they can get personal follower suggestions according to our recommendation rules. Session management and Security setting are also considered in our app.

Important Features

✅ User registration ✅ Login/Auth ✅ Session management ✅ Security: account lockout policy ✅ @mentions in comments

✅ Create post/Photo upload ✅ Editing/Deleting Posts (photo) & Comments ✅ Activity feed ✅ Photo likes & unliking

✅ Follow/unfollow users ✅ Follower suggestions ✅ Live updates ✅infinite scroll ✅ Privacy / Visibility control on photos

Deployment

Heroku: https://pennstagram.herokuapp.com/

App Screenshots

Contributors 🏠

This is a CIS5570 course project finished by Jiahao He, Renyu Liu and Bingqing Fan.

Team Agreement 📄

1. Don’t be afraid of saying I don’t know and communicate on time.
2. It is OK to disagree with each other.
3. The project should be divided into three parts, ensuring that everyone is in charge of 30%.
4. Be careful to review and add comments. Commit frequently.
5. Meet at Tuesday every week on time.
6. Try at first, and then peer programming. If it does not work, finally reach out to TA and PM.
7. When emergency comes, plan ahead or exchange parts with others (let others know in advance).
8. Work as a team.

UI Design 🎨

Wireframes

• Check the wireframes for all the pages in the link below. https://www.figma.com/file/hcvBmBlkprIlLE2zYBkVXh/Wireframes?node-id=509%3A23

Prototype

• Successful registration (include the homepage). https://www.figma.com/file/1mJ5ntXHg8miUl6NgVg1bv/User-Story?node-id=0%3A1

• Login -> homepage -> Profile page. https://www.figma.com/file/1mJ5ntXHg8miUl6NgVg1bv/User-Story?node-id=1%3A2

• Login -> homepage -> upload a photo or a video. https://www.figma.com/file/hTUCqSL5pm1C2beY54iVTI/P3?node-id=52%3A7

• Login -> homepage -> find and follow a user -> see their activity/posts on the main activity page. https://www.figma.com/file/hcvBmBlkprIlLE2zYBkVXh/Wireframes?node-id=557%3A29

Rest API Design 🌐

We use the MVC (Model-View-Controller) Restful architecture. Our interactive documentation of the Rest API is in the link below.

https://app.swaggerhub.com/apis/cis557group32/Pennstagram/1.2.0