skjutsgruppen/skjutsgruppen-reactnative

React native app for Skjutsgruppen http://www.skjutsgruppen.nu/

Prerequisites

1. react-native

$ npm install -g react-native-cli

2. For Android

• Download Android SDK from here https://developer.android.com/studio/index.html#command-tools

Install

$ git clone [email protected]:Skjutsgruppen/skjutsgruppen-reactnative.git
$ cd skjutsgruppen
$ yarn install
$ cp .env.example .env .env.production

Update .env config according to your need.

For Android

List all avds

$ cd /path/to/Android/Sdk/tools
$ ./emulator --list-avds

Run app on android emulator

$ ./emulator -avd <ADV_NANE>
$ yarn start
$ yarn android

Upgrade React Native version

Install react-native-git-upgrade package globally

$ npm install -g react-native-git-upgrade
$ react-native-git-upgrade

Style Guide

This project uses Airbnb JavaScript Style Guide So please read and be familiar with their style guide before contributing on this project.

Lint javscript code

Run eslint before you commit changes.

yarn eslint

skjutsgruppen-reactnative's Issues

Implement Feed Filter

User can filter feed by

• everything
• wanted
• offered
• nearBy

Return ride: prefill the information from the original ride but in reverse, and the participant has the possibiliy to change it.

The return ride should have pre-filled information from the original ride. The information can, however, be edited.

Add return and recurring button on trip detail screen

Implement 'Comment' Feature

User should able to add comments on offer and group.

• Add comment from offer detail screen
• Add comment from group detail Screen
• Auto update comment list whenever comment added by another user.

Implement "addOfferCard" feature component

The user will be able to add new Offer through this component. This will use the API developed in https://github.com/Skjutsgruppen/skjutsgruppen-api/issues/3

• create component with all the views
• call graphql API to post the data to the server

Minor UI fixes in old design

Implementation of app notification

Explore https://www.transifex.com/ on integration with react-native app

Explore and document how we can use https://www.transifex.com/ for localisation in our app.

Implement Facebook Login/register

• Login with Facebook
• Register with Facebook
• Registered user can link to Facebook account

Implement Join group feature

• Design UI components for join group screen
• Joint open group and view detail screen
• Request to join close group
• Join request notification for group admin
• Group admin can reject or accept request
• Notify requester for accept or reject action.

Implement new design of "Feeds" and "Feed detail"

• Design new feed card
• Design new feed detail screen

Implement "addGroup" feature

User should be able to add group with the required metadata through this feature, following the designs.

Implement new design for group detail

Conversation on a ride should be in order oldest (on top) to newest (in bottom)

Wrong order of comments in a ride. On a ride the coversation should be in order oldest on top to newest on botton.

Add feed image and map slider in detail screen

Implement "Share" feature

• Copy to clipboard
• Share on social media (facebook, twitter)
• Share to groups
• Share with Friends

Map and blue ball is to close to each other, compare with design (I've added the "first feedback jpg that show this)

Implement new search UI

Replacement of Toast component with Alert and ensuring proper functioning of share and comment options

• Replace all Toast messages with Alerts in all screens and components.
• Ensure proper working of Share and Comment in all cards and screens.

Design rule: you should always see the next card. Issue experienced on a Samsung and a Sony Xperia.

I can't add photos or tag people here? Any suggestions @Anjan and @anjesh ?

Implement Group/Trip map route

There should be Map menu at right side of toolbar on group/trip detail screen. When tap on Map menu user will take to map screen where they can view trip route with start, end and stops markers.

After the app crashes, it promts me to fill in my credentials again.

Blue ball is wrong. It's a specifically made gradient. (I've added the "first feedback jpg that show this)

Setup initial structure

Setup initial react-native structure with redux and graphql client. There should be readme with proper instructions to get started.

Implement "ExploreGroups" feature for group

• The already added groups can be solely viewed in the explore groups section i.e. explore group section lists outs only the groups.

• Implementing search for the groups

Document user registration process flow

User registration process isn't properly documented both in text and design. We need to document various use-cases and see the flow.

1. existing users download the app, (they have already linked their mobile number with their account). What if they login to the system in a mobile whose number is different from their previously registered number? They can login to the app, but now it gets tricky when we auto-sync the contacts.
2. What happens when the user change their sim-card and hence their mobile-number, what should be the course of action? This is similar to the above point 1.

---

Current registration process includes the following metadata

• Firstname
• Lastname
• Email
• Password
• Repeat Password

In our case, there will be one more metadata - mobile number, which will be auto-submitted.

Group feed in group detail page

App assets/icons are not suitable for exporting from .psd file for multiple screen sizes

In .psd files icon layers are in raster format which becomes unusable in app when scaled or transformed. Need all the icons in vector format to be able to export it for multiple screen sizes e.g. @2x and @3x assets.

Error handling continued

Remove header. (I've added the "first feedback jpg that show this)

Implement "userRegistration" for new users

This registration is basic - containing username and password only.

Implement "Search" feature

The "Search" feature searches in overall feeds of groups, offered trips, asked trips and public transports.

Implement Friend Request

• Send friend request
• Notification to become a friend
• Accept friend request
• Notification for accept request

UI fixes of group feed in group detail screen

Implement "User profile"

Implement a feature for viewing own profile and others profile

TODOS

• Design UI for user profile screen

Implement Map

Display following markers on Map

• User's current location
• current active offer
• current active ask

Error handling and error localization

Replacing Photo with Avatar

Implement "userLogin" feature

This include login screen, logout feature and making an API call.

Implement "SyncContacts" feature for Android

When the user registers and logs-in for the first time, her contacts will be synced to the server - that will be used purely to find friend connection with other users. This is only one way sync from mobile to server and not vice-versa.

Once this feature is implemented, we are yet to see whether this sync feature should be made automatic or keep an option to do manual sync with a button.

First time will be auto-sync but we need to see how to do subsequent sync.
Any thoughts? @MattiasJay

Add "Return Trip" feature in Offer and ask

Start from and destination fields should be auto fill for return trip.

• update add offer screen
• update add ask screen
• Update UI

Implement "Ask a ride" feature

A separate setting page implementation

Implement "Messages"

• Design messages screen UI
• new and old notification
• action for notification
• add pagination

Phone verification

Implement "feed" feature for group and offerCard

Once offercard and group are done, these will appear as cards in the feed. These cards are clickable and the user will be able to see the details as per designs.

Reset password implementation

Design login page and user registration page

Designs of

• Login
• User Registration

Explore groups filters implementation

Implement filters for

• Groups near you
• Sorting ascending and descending

Implementing app localization