Git Product home page Git Product logo

snapshot's Introduction

Snapshot

A cross-platform social media app* for the users to upload their snaps, follow other people of their interests, comment on others snaps and like them for the rest of the world to see.

*(currently configured for Android. iOS configuration requires XCode configuration. The code requires no changes in iOS).


Initial Beta Release v0.0.1 can be found here.

Stacks/Libraries used :

  • React Native - v0.66.4
  • React Navigation - v6.0.6
  • React Native Vector Icons - v9.0.0
  • Redux - v4.1.2
  • React Redux - v7.2.6
  • Firebase by Google - v14.2.2
    • Firebase Analytics
    • Firebase Auth
    • Firestore Database
    • Cloud Storage
    • Cloud Functions
  • Node - v16.0.0

Immediate To - Dos :


Setting up the development environment :

  • Fork this repository.
  • Clone the forked repository into your local drive.
  • Navigate to the directory snapshot/frontend.
  • While inside the frontend directory, open a terminal (ensure path points to frontend directory) and run npm install or npm i.
  • Head over to Firebase Console and login to your account.
  • After you have logged in to Firebase, in the Firebase Console, add a project.
  • You will be asked to give a name to your app, then hit Continue.
  • Enable Google Analytics and hit Continue again.
  • Now in the Console, add an Android App.
  • Enter your projects details. The "Android package name" must match the local projects package name which can be found inside of the manifest tag within the /android/app/src/main/AndroidManifest.xml file within the project.
  • The Debug Signing Certificate is optional to use Firebase with the app, but is required for Dynamic Links, Invites and Phone Authentication. To generate a certificate run cd android && ./gradlew signingReport. This generates two variant keys. Copy both 'SHA1' and 'SHA-256' keys that belong to the debugAndroidTest variant key option. Then, those keys can be added to the 'SHA certificate fingerprints' on the app in Firebase console.
  • Download the google-services.json file and place it inside of the project at the following location: /android/app/google-services.json.
  • Go to the Firebase Console once again and select Authentication in the left pane. Go to the Sign-in method tab and enable Email/Password and hit Save.
  • Select Firestore Database from the left pane. Select Create Database and choose start in test mode(Ensure that during the development process, the database always remains in test mode, since it is configured to block database access after 30 days). Choose a location that is nearest to you in the list of locations.
  • Select Storage in the left pane and see if it is showing you the storage bucket or not. If not, then setup the storage bucket.

Running the app in Web, Android or iOS :

  • Open a terminal inside the frontend folder.
  • Run npm run android.
  • If an Android device is connected with USB Debugging enabled, the app will start in the physical device else it will run in the emulator.
  • For setting up React Native or an emulator, follow this guide.

I have also created the Firebase Cloud Functions that is required for updating the Likes count in the app. The code is present in the backend folder, which can be run using npm install followed by firebase deploy in the terminal opened in the backend directory. But for the functions to deploy, you need a Blaze plan of Firebase. Although it won't charge you unless you exceed the quota, it still needs a billing account to provide you the Cloud services for free.



Read the CONTRIBUTING.md and CODE_OF_CONDUCT.md before contributing to this project.


License :

MIT License

Copyright (c) 2022 Subham Karmakar

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.




A huge thanks to Simcoder's Youtube channel which helped me in building the bare bones of this app, upon which the future versions and extra features would be implemented.

snapshot's People

Contributors

subhamkarmakar24 avatar

Stargazers

avatar

Watchers

James Cloos avatar avatar

Forkers

samikshasankar

snapshot's Issues

Pull down to refresh feed and profile

Is your feature request related to a problem? Please describe.
Whenever we want to see the recent posts, or any update in comments by other users, we need to restart the app to see the fresh changes.

Describe the solution you'd like
Implementing pull down to refresh feature to refresh the feed, comments or profile section of the app to refresh manually.

Describe alternatives you've considered
Issue #9 and #3 when resolved will help in refreshing certain parts automatically when the logged in user makes any changes, but when some one else makes changes, the only way to reflect them in the app is through manual refreshing.

Additional context
None

Unmount Camera while coming to AddScreen from SaveScreen

The Camera portion becomes black when coming to the AddScreen from the SaveScreen(i.e., when a Screen is popped from the Stack and ends up in the AddScreen)
Since Expo Camera docs say
Only one Camera preview can be active at any given time. If you have multiple screens in your app, you should unmount Camera components whenever a screen is unfocused.
The Camera needs to be unmounted without any hit on performance or app crash.

Following a user with no posts

Describe the bug
Unhandled promise rejection when following a user with no posts. Also, upon restarting the app, the error persists and no posts load on the feed.

To Reproduce
Steps to reproduce the behavior:

  1. Search for a user with no posts.
  2. Click on "Follow"
  3. See error

Expected behavior
The user can be followed without any error

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

  • Device: All
  • OS: Android
  • Browser: Nil
  • Version: v0.0.1 of the app

Additional context
Add any other context about the problem here.

Theme toggle

Is your feature request related to a problem? Please describe.
A toggle button to enable light theme or dark theme, and also set it to system theme that changes dynamically according to the overall system theme.

Describe the solution you'd like
Settings page to have a theme choose option where it would allow users to set their themes. Also, it must store the chosen theme in cache so that the same theme is rendered the next time the app is opened.

Describe alternatives you've considered
None

Additional context
None

Emoji board

Is your feature request related to a problem? Please describe.
Emoji keyboard

Describe the solution you'd like
A button present beside the text field to show or hide the emoji keyboard.

Describe alternatives you've considered
None

Additional context
None

Delete or Edit Posts, Comments and Profile

Is your feature request related to a problem? Please describe.
At this point of time, there is no way a solution for users to delete or edit their posts or comments or modify any changes to their profile.

Describe the solution you'd like
Edit and Delete buttons beside each post and comment, and Settings section in Profile page to modify their details.

Describe alternatives you've considered
None

Additional context
None

Upgrade Firebase web v8 to v9

Is your feature request related to a problem? Please describe.
Currently the app uses Firebase for Web v8 which imports all the elements that are required when using a particular firebase service. Version 9 improves this by importing only the modules that are actually required in the app thus improving the app performance.

Describe the solution you'd like
Using the Firebase documentation for Web, change the version 8 code to version 9 and make it modular.

Describe alternatives you've considered
None

Additional context
None

Eject from Expo and configure Android and iOS part separately

Describe the bug
Google, Facebook sign-in don't authorize requests coming from the Expo Go app. This prevents the users from signing into the app from any platform that uses Expo Go app(i.e. other than web).

To Reproduce
Steps to reproduce the behavior:

  1. Go to Login/Register page.
  2. Click on 'Google' or 'Facebook'
  3. See error on Terminal.

Expected behavior
Although this is the expected behavior since Firebase documentation says it doesn't support React Native, we can eject from Expo and use bare React Native app for Android(We would obviously need to setup every module from the Android and iOS side of things).

Screenshots
None

Desktop (please complete the following information):

  • OS: iOS or Android
  • Browser: None
  • Version: Not required

Smartphone (please complete the following information):

  • Device: Pixel 4a
  • OS: Android 11
  • Browser: Not required
  • Version: Not required

Additional context
None

Image Compression required before upload

To reduce the upload as well as the download times, the images need to be reduced. Moreover, to ensure users don't upload several MB of images, compression is required.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.