Home
1.1 Purpose
Mepo is a web based application that allows users to upload images or texts as posts. Then, user can categorize posts with similar contents into an album. For example, if user posted pictures and text quotes from high school, user can put all of them into an album that named High School to organize them better. The purpose of this project is to create a more personalized and organized social media platform that combine the key elements of Instagram, Twitter, Pinterest. The name Mepo is inspired by Memory Repository which allow user to put any sort of posts into a repository/album that has similar contents.
1.2 Scope
This web application is for anyone to share their memories through different types of posts and organize them in the way they like. Different types of image formats and text entries can be uploaded to the web application as posts. Users would have to create an account to access all functionalities including uploading images, text entry and even view other users' profile. The user would be prompted to an account creation page at first, the format of emails and password must be validated and unique in the database. For each posts the users can input the title, description and also tags.
1.3 Definitions
User - Someone that can upload images and text as post. Also, user can categorize the posts into album.
Album - A file to put all posts that have similar contents
1.4 Story Cards
[Story Card 1] - Account Registration
Description - User creates account either with email and password or can create one with a google account with google authentication through a login form.
Test Cases: Mock Tests cases for user Auth
1. Unique ID for each user
2. Valid Password
3. Valid Email
4. Register with Google Page
5. Try to register user email only
6. Try to register with password only
7. Try to register with duplicate email and password
8. Show error messages for above cases
Notes: User info or Google info are being stored in MongoDB
[Story Card 2] - Edit Post
Description - User should be able to change the title, description, and tags of the post or delete post
Test Cases:
1. Click Edit Post
2. Modify the description, or tags, or title
3. Click Save
4. Refresh the page
5. See updated description or tags or title on the post
6. Delete the post should delete the post from database
Notes: Depends on the Create Post function
[Story Card 3] - Create Post
Description - User should be able to click a button to add a post. This post could be uploaded as a plain text, image with text, or just a plain image. When making the posts the user could add tags. Once the post is listed they should have a distinct time stamp.
Test Cases:
1. Upload images (png, jpeg, etc)
2. Give error if image posted unsuccessfully
3. Upload plain text and plain text with image
4. Once upload the posts should be in the correct file that was selected to go in
Notes: The function depends on if there is a file created to be posted in. The size of each posts should be fixed based on the types of format (Images or text entry)
[Story Card 4] - Files / Album
Description - Before users post the images, they need to choose which file / album to put the images or create a new file / album. Users can sort the images based on the timestamp or the title of the post. These files / album could be set to private or public for privacy.
Test Cases:
1. Create file/album
2. Remove files/album
3. Able to store the images
4. Sort the images by timestamps
5. Sort the images by title
6. Test if other profiles could see files if they are private
Notes:
[Story Card 5] - Comments
Description - Users able to leave comments on the posts. After users post their comments, they can edit the comments
Test Cases: Widget Tests
1. Post comments
2. Display username in each comment
3. Edit the comment
4. Comments can not exceed a certain limit
Notes:
[Story Card 6] - Login / Google Authentication
Description - Users have a choice of logging into an account using their own email address and password or by using Google authentication.
Test Cases: Mock Test for Google Auth
1. Correctness of email format
2. Checking the existence of account
3. Using the correct password for each distinct email account
4. Reload the page each time wrong credentials are entered
5. User profile must be loaded up to date each time
Notes:
[Story Card 7] - Tags
Description - Users can tag their locations or use a prefix like "#" add the tags to their post. This can allow other users to search the posts with the same tags
Test Cases:
1. Set a prefix for the tags
2. Location choice is per the author's preference
Notes:
[Story Card 8] - Like mechanism
Description - Users will be able to like posts and the counter of these likes will be stored dynamically
Test Cases: Widget Test
1. Like counter = 0 for new posts
2. Counter increases by one with each click
3. Only users with an account can like posts
Notes: Like mechanism can be triggered by double tapping the post
[Story Card 9] - Timestamp
Description - Users will be able to see when a post was created as when a post is created a timestamp will be displayed.
Test Cases:
1. Each post timestamp should be unique to each post
2. Timestamp is date specific
3. Ensure correct date is displayed
Notes: Timestamps help with sorting by chronological order
[Story Card 10] - Upload Image
Description - Users will have ability to upload images to create a post
Test Cases:
1. Upload image
2. Unsuccessful image upload
3. Accept different image formats
Notes:
[Story Card 11] - Integration testing
Description - Use Integration testing to make sure login and like comment features work as intended
Notes:
2.1 Components
There will be two main components that build Mepo. The client is the software that provides the Web Service. The next component is database, also known as the server side that will be tied to the client that could accessed through a network establishment. The two components will be communicating with each other by projecting data files to the client from our database. This action can be done through the clients user interface.
2.2 The Client
Client in this project will be the application itself that communicates with the database. User will be allowed to upload pictures or text entry when they create a post. Each post will be categorized into albums. The client can update the information of the post including title, description, or tags by clicking Edit Post button.
2.3 The Database
The database will be made with Firebase that contains image, text entry. In addition, basic user info will also be stored in the database to display it on the User Interface. Editing post or profile info will update the information on database.
3.1 UI Requirements
UI Requirements: Login, Sign Up, Home Page, Mepo Profile/Create Mepos, Posts Page, Create Albums, Create Posts(images and blogs), Like Posts, Comment, Tag
ID: UIR1 - Login/Landing Page
-
Description: - Here The user is prompted with a sign-up page where they can submit login information such as name, email, and passcode. User could also login using Google login. This user data will be stored in the database.
-
Rationale: - Registers the user to use the services and features Mepo provides
-
Dependency: N/A
ID: UIR2 - Sign Up
-
Description: - This page asks for the users Username, Email, password, and small bio to create and start their profile. Once the user signs up for Mepo then they have a saved account that allows them to login and use Mepo's services and features.
-
Rationale: - To create a Mepo user that could login and keep their information.
-
Dependancy: UIR1
ID: UIR3 - Home Page
-
Description: - This is the main page that displays posts that are created. Users are able to interact with this page to view, like, and comment on other users posts. The user is also able to go on their profile page from here.
-
Rationale: - To view other users posts and interact with the posts and reach other functionalities of Mepo.
-
Dependency: - UIR1, UIR2
ID: UIR4 - Mepo Profile Page
-
Description: - User profiles shows users individual files/repos to give them an opportunity to view them as well as gives the user an option to create another one. The user could also navigate back to the home page to view their feed.
-
Rationale: - To view the contents of user repos and give user a chance to create more.
-
Dependency: UIR3
ID: UIR5 - Upload Post Page
-
Description: - Once the user clicks on the specific file/repo the user can then view the corresponding content that belongs within it. The user has an option to click and edit the post or add another post to the file. User can go home or back to profile page from here.
-
Rationale: - To view users posts, edit posts, or create post.
-
Dependancy: UIR4
ID: UIR6 - Create Post
-
Description: - Page is accessible from the posts page. Here the title of the file is displayed. The user can include a title for the post, a description, tags, and to upload an optional picture. The profile page and home page is accessible from here.
-
Rationale: - To create a new post by filling out certain fields and posting it under the specified file.
-
Dependancy: - UIR4, UIR5
ID: UIR7 - Comments
-
Description: - Once user clicks the comment button under another users post a text box appears to add your comment. The user then clicks posts to upload the comment under the image.
-
Rationale: - To comment under other users posts to be viewed by other users
-
Dependancy: UIR3, UIR4, UIR6
ID: UIR8 - Search/Explore page
-
Description: - Users are allowed to search or explore posts uploaded by other users. Users have the option to follow other users through explore page.
-
Rationale: - Allow users to explore posts uploaded by other users
-
Dependancy: UIR3, UIR4
ID: UIR9 - Notification page
-
Description: - Users get notifications when they have new follower and like or comments on their posts.
-
Rationale: - Act as notification center for user on different activities
-
Dependancy: UIR3, UIR4
3.2 Functional Requirements
ID: FR1
Upload Image
-
Description : User will be able to upload image as post on this platform. Images uploaded will be stored in our database
-
Dependencies: FR5
ID: FR2
Firebase
-
Description : The database that store the all the information including user credential and user uploads.
-
Dependencies: N/A
ID: FR3
Registration-
Description : User creates an account by registering with email address and create the password for the account. The credential will be stored in our database.
-
Dependencies: FR2
ID: FR4
Create File-
Description : User can create a file and place multiple posts to categorize posts that have related topic
-
Dependencies : FR2
ID: FR5
Create Posts-
Description : User can create post by uploading image and add description to the post, then post it to share with other users.
-
Dependencies : FR2
ID: FR6
Timestamp-
Description : Each uploaded post will have unique time stamp that record the time and date each post is uploaded. User will be able to sort the posts by timestamp (Newest to Oldest / Oldest to Newest)
-
Dependencies: FR5
ID: FR7
Edit Posts-
Description : User can edit the posts after they created one. There are multiple functions for edit posts including modifying the title, or description, or tags of the posts. Or even deleting the post.
-
Dependencies: FR2
ID: FR8
Tags-
Description: User can include multiple tags on the post that are related to the post.
-
Dependencies: FR5
ID: FR9
Comments-
Description : User can comment on posts of other users. The comments along with the timestamp of the comment will be stored in database. The comment and the username of the user that post the comment along with the timestamp will be retrieved from the database and displayed to the public.
-
Dependencies : FR2
ID: FR10
Like Counter-
Description : Each post has a like counter that count the number of likes each post have. Whenever user like or unlike the post, the count will store in the database. Total number of likes will be retrieved from the database and displayed publicly on the post.
-
Dependencies : FR2
3.3 Non-Functional Requirements
ID: NFR1
Responsive Web Design-
Description : The layout of a web page should be different and compact when the size of windows has increased or decreased.
-
Rationale : The size of windows would be resized, so responsiveness of the web page should be carefully designed to show all necessary functions and information of the web page regardless of the size of windows.
ID: NFR2
Account Security-
Description : Passwords and accounts must be validated through the database, the format of emails should also be checked and verified.
-
Rationale : If the security check is not valid, functions of the web application cannot be accessed
ID: NFR3
Network/Database connectivity-
Description : Creating a pipeline/route that connects the UI to the database.
-
Rationale : If there is no efficient connection between the two there is no way to store user data as well as be able to process the backend code from the UI.
Class diagram
Sequence diagram
Use Case diagram
