Milligram-Connect Social Media Application

Splash Screen

A splash screen is the initial screen featuring the app's logo or branding that appears when the app is launched, providing a visually engaging introduction as it loads.

Login Screen

The login screen allows existing users to access their accounts, while the signup screen enables new users to create an account by providing their details.

Home Screen

Once logged in, the home screen displays a scrollable feed where users can view all posts, like, comment, share, and save them. Additionally, users can open each post to see detailed information about likes and comments.

Users can comment and share on the posts shown in the images below.

Search Screen

On the Search Screen, users can navigate to the search option in the bottom navbar to find and search for usernames available in the application.

Create Post Screen

Users can access the Create Post screen via the bottom navigation bar, add images from the mobile gallery, write a caption, and post the content.

Notification Screen

Users can navigate to the Notifications screen via the bottom navigation bar to view and open all notifications.

Messaging Screen

Users can navigate to the Messaging screen via the bottom navigation bar, view the list of users, select a user to chat with, and see all messages for that conversation.

To delete user chats, click on the three dots in the top right corner of the screen. This will display the following popup with the delete option.

Settings Screen

After clicking the settings icon in the top right corner, the following settings screen will open. Users can access:

• Account Center
• Saved Posts
• Account Privacy
• Blocked (Not implemented yet)
• Milligram Verification
• Logout
• Delete Account Options

1. Account Center
Upon clicking on the Account Center, the following page will open. Here, users can choose from two additional options:

• Personal Details
• Password and Security

Personal Details
After clicking on the Personal Details option, users will be directed to the Personal Details screen where they can view the email address they used to register and log in to the Milligram Connect application.

Password and security
After clicking on the Password and Security option in the Account Center, users will be directed to the Change Password screen, where they can update their password.

Below
Left Image: Personal Details screen
Right Image: Password and Security screen

2. Saved Posts
Upon clicking the Saved Posts option in Settings, users will be redirected to the Saved Posts screen where they can view posts they have saved from the feed.

3. Account Privacy
Upon clicking the Account Privacy option in Settings, users can choose between two privacy settings:

• Public: All users in the Milligram application can see their profile.
• Private: Only connected people can see their profile.

4. Milligram Verification
Upon clicking the Milligram Verification option in Settings, users will be redirected to the Milligram Verification screen. Here, they will see an option to send a verification email. After selecting this option, a verification email will be sent to their registered email address. The email will contain a URL that users must click to complete the verification process. Once successfully verified, the Milligram Verification screen will display a message saying "Your email ID is verified."

5. Log out
Upon selecting the Log Out option, users will be logged out of the application and redirected to the login screen.

6. Delete your account
Upon selecting the Delete Your Account option, users can permanently delete their account and all associated data from the application.

Profile Screen

Upon clicking the user profile logo image in the top left corner, the profile screen will open.

Edit Profile Screen
Upon clicking the Edit Profile button in the profile screen, users will be redirected to the Edit Profile screen. The screen shown in the left image below will become visible.

Share Profile
Upon clicking on the share icon to the right of the username, users can share their profile URL with any user on other platforms, the screen shown in the right image below will become visible.

Followers & Followings Screen
On the user profile screen, if a user clicks on the "Followers" or "Followings" text, the respective screen will open. Here, users can view the list of followers who follow them and the list of users they are following.

Open Another User's Profile
Upon clicking on any user from the followers or followings lists, the profile screen of that user will open. Users will be able to view the selected user's profile data, as shown in the image below.

Download and Install

The Android version has been released! Click the link below to download and install
Milligram Connect

Tech Stack Used

• React Native CLI
• Firestore and Firebase Database
• Firebase Email Authentication
• Styled-Components for styling