Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/shahrozatiq/social-media-app

A social media app front end with nice animations and features.
https://github.com/shahrozatiq/social-media-app

android animated-ui expo expo-app frontend ios javascript mobile-app react-animations react-native react-native-app react-navigation social social-media-app social-media-app-frontend social-media-application social-media-mobile-app socialmediaapp

Last synced: about 1 month ago
JSON representation

A social media app front end with nice animations and features.

Awesome Lists containing this project

README 

        




	Social Media App (Socials) - React Native




https://github.com/user-attachments/assets/8862b1be-b04a-4286-bf58-783840ca72c8





	ScreenShots





	

	




## Discription

Welcome to the frontend repository of our Social Media App, built entirely using React Native. This project aims to provide a seamless, intuitive, and visually appealing mobile experience, featuring a collection of essential social media functionalities. The app is designed with modern animations to enhance user interactions and engagement.



## Features



### 1. **Login Screen**

   - A sleek and user-friendly login interface.

   - Secure authentication with email and password.



### 2. **Signup Screen**

   - Simplified user registration with validation checks.

   - Instant feedback on user actions.



### 3. **Home Screen**

   - A dynamic feed of posts from followed users.

   - Infinite scrolling with animated loading indicators.

   - Like, comment, and share options with interactive UI elements.



### 4. **Explore Screen**

   - Discover new users through an animated layout.

   - Categorized content for easy navigation.



### 5. **Reels Screen**

   - Watch short video clips with seamless playback.

   - Swipe up/down gestures for effortless navigation through reels.

   - Engaging animations that bring the content to life.



### 6. **View Story Screen**

   - Full-screen story viewer with auto-progress and tap-to-skip functionality.

   - Animated transitions between stories.

   - Replay to stories.



### 7. **Add Story Screen**

   - Capture or upload media to share with followers.

   - Add text, stickers, and effects with fluid animations.

   - Preview before posting with animated effects.



### 8. **View User Profile Screen**

   - Detailed user profile with a clean and organized layout.

   - Profile picture, bio, and posts are presented with cool animations.

   - Follow/unfollow functionality with real-time updates.



### 9. **Chat Screen**

   - Real-time messaging with friends and followers.

   - Smooth animations for message sending, receiving, and typing indicators.



### 10. **Search Screen**

   - Discover users and content with an intuitive search interface.

   - Animated search bar and results that appear in real-time.

   - Smooth transitions between content previews and detailed views.



### 11. **Notification Screen**

   - Stay updated with real-time notifications.

   - Animated alerts and badges for new activity.



### 12. **Update User Info Screen**

   - Easily update profile information with a streamlined UI.

   - Real-time feedback for successful updates.



### 13. **Add New Post Screen**

   - Create and share new posts with a simple and elegant UI.

   - Support for text, image, and video posts with preview animations.

   - Animated posting process with feedback on successful uploads.



## Animations & Transitions

This app is not just functional but also focuses on delivering a visually delightful experience through the use of:



- **Smooth Transitions:** Screen transitions are crafted to be smooth and engaging, ensuring a fluid navigation experience.

- **Interactive Animations:** Every interaction, from button presses to screen changes, is complemented by subtle animations that enhance the overall user experience.

- **Real-time Feedback:** User actions are immediately acknowledged with visual cues, making the app feel responsive and alive.



## Installation



Be sure, you have installed all dependencies and applications to run React Native project on your computer : [Getting Started with React Native](https://facebook.github.io/react-native/docs/getting-started).



### Running the project



Clone this repository :



```

git clone https://github.com/ShahrozAtiq/Social-Media-App.git

cd Social-Media-App

```



Install packages :



```

npm install

```



When installation is complete, run the project :



```bash

npx expo start

```



## Contributing



Contributions are welcome! If you have ideas for new features, improvements, or bug fixes, feel free to submit a pull request or open an issue.