Home > Web Front-end > JS Tutorial > Milligram-Connect Social Media Application

Milligram-Connect Social Media Application

Patricia Arquette
Release: 2024-12-12 13:49:11
Original
865 people have browsed it

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.
Milligram-Connect Social Media Application

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.
Milligram-Connect Social Media Application

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.
Milligram-Connect Social Media Application

Users can comment and share on the posts shown in the images below.
Milligram-Connect Social Media Application

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.
Milligram-Connect Social Media 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.
Milligram-Connect Social Media Application

Notification Screen

Users can navigate to the Notifications screen via the bottom navigation bar to view and open all notifications.
Milligram-Connect Social Media Application

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.
Milligram-Connect Social Media Application
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.
Milligram-Connect Social Media Application

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

Milligram-Connect Social Media Application

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

Milligram-Connect Social Media Application

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

Milligram-Connect Social Media Application

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.
Milligram-Connect Social Media Application

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. Milligram-Connect Social Media Application

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."

Milligram-Connect Social Media Application

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.
Milligram-Connect Social Media Application

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.
Milligram-Connect Social Media Application

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.
Milligram-Connect Social Media Application

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.
Milligram-Connect Social Media Application

Download and Install

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

Tech Stack Used

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

The above is the detailed content of Milligram-Connect Social Media Application. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template