/socialApp

Instagram like social media application

Primary LanguageJavaScript

Instagram like social media application

Created this social media application in React Native with pleasant UI where users can Log in/Signup and log out, Post pictures, edit profile, view other user’s profile and posts, like, comment on user’s posts, and save posts. The purpose of creating this project was to sharpen up my UI/UX as well as programming skills in JavaScript and react native


🌟 About the Project

πŸ“· Demo video of the application

AppWalkThrough.mp4

πŸ‘Ύ Tools, Technologies, APIs, and Services used:

  • Created application using Expo CLI and leveraged Expo Libraries such as expo-camera, expo-image-picker, expo-permissions, and expo-location for basic features of the application like, clicking pictures, selecting images from system storage, getting user location, and checking various system permissions.
  • react-navigation and its components such as bottom-tabs, material-top-tab-navigation, and native-stack to create navigation flow within the application.
  • react-native-elements and react-native-paper to create various UI components
  • Firebase for back-end needs, google cloud storage for storage purposes, and Firebase Auth for authentication purposes.
  • Redux for storing and persisting data

🎯 Features

  • User singin/ signup to the application using their email id
  • Uers can post pictures in the application
  • Users can view, like and save other user's posts
  • users can view other user's profile by searching their name

Additional steps required to make this project work for you.

To clone and run this application, you'll need Git, Node.js (which comes with npm), Android Studio(if you want to run on android), Xcode(if you want to run on iOS) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/udkhatri/SocialShare.git
# Go into the repository
$ cd SocialShare

Go to firebase console and create a new project Go to project setting and copy the Firebase configuration code (firebaseConfig) Follow below file structure to create a new file named firebaeConfig.js

.
β”œβ”€β”€ ...
β”œβ”€β”€ components                  # Open component folder
β”‚   β”œβ”€β”€ Main                    # open main folder
β”‚   β”œβ”€β”€ firebaseConfig.js       # create this new file
└── ...

After creating this file add below lines to the file

export const firebaseConfig = {
  // paste the copied code from the firebae console
  ...
  ...
};

Open terminal at the root folder and type bellow command in terminal

npm install
expo start

you will see a QR code in your terminal scan that from your device and app will be runnning to your phone

You may also like...