Git Product home page Git Product logo

droidconke2022reactnative's Introduction

droidconKE Android App

Android app for the first ever Android Developer conference-droidcon in Nairobi 2018

This project is the Android app for the conference. The app supports devices running Android 5.0+, and is optimized for phones and tablets of all shapes and sizes.

Source

The source code in this repository reflects the app as of droidconKE 2018.

Features

The app displays a list of conference events - sessions, office hours, app reviews, codelabs, etc. - Users can see details about events.

The app also displays a map of the venue and shows informational pages to guide attendees during the conference.

Schedule screenshot

Development Environment

The app is written in Java and Kotlin and uses the Gradle build system.

To build the app, use the gradlew build command or use "Import Project" in Android Studio. A canary or stable version >= 3.2 of Android Studio is required and may be downloaded here.

Architecture

The architecture is built around Android Architecture Components.

We followed the recommendations laid out in the Guide to App Architecture when deciding on the architecture for the app. We kept logic away from Activities and Fragments and moved it to ViewModels. We observed data using LiveData

We used a Repository layer for handling data operations.droidconKE's data comes from a few different sources - user data is stored in Cloud Firestore (either remotely or in a local cache for offline use), user preferences and settings are stored in SharedPreferences, conference data is stored remotely and is fetched and stored in memory for the app to use, etc. - and the repository modules are responsible for handling all data operations and abstracting the data sources from the rest of the app (we liked using Firestore, but if we wanted to swap it out for a different data source in the future, our architecture allows us to do so in a clean way).

Firebase

The app makes considerable use of the following Firebase components:

  • Cloud Firestore is our source for all conference and user data. Firestore gave us automatic sync and also seamlessly managed offline functionality for us.
  • Crashlytics allowed us to detect bugs and catch errors.
  • Firebase Cloud Messaging let us inform the app about changes to conference data on our server.
  • Remote Config helped us manage in-app constants.
  • Firebase Authentification helped us to provide easy and secure authentification using email.

[ ๐Ÿšง Work in progress ๐Ÿ‘ทโ€โ™€๏ธโ›๐Ÿ‘ท๐Ÿ”ง๏ธ ๐Ÿšง ]

  • Rewriting .droidconKE app in Kotlin and taking advantage of kotlin features like coroutines,kotlin android extensions etc
  • Version 2.0 features writeup(UI Improvements, Event Reservation Feature,Starring Session Feature etc)
  • CI/CD Setup
  • Offline First Architecture Improvements

License

MIT License

Copyright (c) 2018 droidConKE

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.

droidconke2022reactnative's People

Contributors

antosan avatar brianwachira avatar deromuli avatar devkiratu avatar makunomark avatar mathewthegreat avatar mog-rn avatar orama254 avatar wafulasam avatar wangerekaharun avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

droidconke2022reactnative's Issues

ApiV2Error: Entity Not Authorized.

Describe the bug
I seem to be unable to start the server and run the app on iOS expo go app. I am able to run clone and install dependencies. After running npm run ios this is the outcome:

image

Notice the errors ApiV2Error: Entity Not Authorized. in red on VSCode console. These come up after pressing try again on the emulator.

To Reproduce
Steps to reproduce the behavior:

  1. Open emulator
  2. Install project dependencies npm i
  3. Start server npm run ios

Expected behavior
I expected to see the app on the emulator.

Screenshots
image

Desktop (please complete the following information):

  • Node: 14.7.0

Smartphone (please complete the following information):

  • Emulator
  • iPhone14
  • iOS
  • Expo Go

Additional context
n/a

Extract the code for Oganized By Section into a Reusable Component

Is your feature request related to a problem? Please describe.
The Organized By section is similar across different screens. This will result in repetition of code, violating the DRY principle

Describe the solution you'd like
Extract the code into a reusable component, such that any change or improvement will be done from one place

Describe alternatives you've considered
N/A

Additional context
N/A

Add Expo Preview Deploys

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

I have gotten used to Vercel PR deploy previews and the quality of life improvements that they bring to the development process. It would be nice to have PR deploy previews added to the project to be able to see the current state of the app with the changes in the PR before merging the PR.

I previously discussed this with the project maintainers.

Describe the solution you'd like

Implement GitHub Actions that will deploy a preview app to Expo on every PR and comment on the PR with a QR code that can be scanned with the Expo Go app.

Describe alternatives you've considered

N/A

Additional context

On every PR we will get a QR code like the one below that can be scanned on the Expo Go app.

image

Functionality ( DARK MODE )- Set up Dark Mode

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

  • Set up dark mode theming as per design

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Feat- Set up share feed to social media functionality

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

  • When an attendee taps share, it should share to the respective social media platforms ( twitter, WhatsApp, facebook and telegram )

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Add src directory to hold app logic

Is your feature request related to a problem? Please describe.
This feature request does not originate from a problem (just yet). We already set up a folder structure in a previous PR - it's elegant. It currently looks like this:

image

As we add more and more modules, this is bound to grow and may make our root component hard to understand.

Describe the solution you'd like
IMO, introduction of a src/, where our app structure live in, may make the root folder a little easier to understand.
image

Describe alternatives you've considered
n/a

Additional context
n/a

Header component content shifts off screen

Describe the bug
When the app is run on an android device, in the logged in state, the profile picture component of the header is slightly pushed off-screen

To Reproduce
Steps to reproduce the behavior:

  1. Run the app locally and scan the QR code using your android device. You can also scan the Development app QR code available on the README.md file of this repository.
  2. On the home screen, press LOG IN followed by GO TO TABS button
  3. You will notice the profile picture component/icon is slightly off screen, when on the Home tab

Expected behavior
The header component should be inside the screen with a uniform horizontal margin. See the design mockup below:

Screenshot 2022-10-10 at 10-10-13 Mobile

Screenshots
Below is the screenshot showing the error

Screenshot 2022-10-10 at 10-17-41 WhatsApp Image 2022-10-10 at 10 14 48 jpeg (JPEG Image 606 ร— 1280 pixels) โ€” Scaled (55%)

Desktop (please complete the following information):
N/A

Smartphone (please complete the following information):

  • Device: [OPPO A12, model CPH2083]
  • OS: [Android 9, ColorOS version 6.1.2]

Additional context
N/A

Unable to resolve "../assets/img/confetti.png" from "src/screens/HomeScreenNotLoggedIn.tsx"

Describe the bug
A clear and concise description of what the bug is.

  • When I run npm run start, I get the error Unable to resolve "../assets/img/confetti.png" from "src/screens/HomeScreenNotLoggedIn.tsx"
    To Reproduce
    Steps to reproduce the behavior:
  1. Clone the project.
  2. Run npm install to install project dependencies.
  3. Run npm run start to start the project
  4. Scan the QR code with your device to run the app on your mobile phone.

Expected behavior
A clear and concise description of what you expected to happen.

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

  • The app should run without any errors
    Desktop (please complete the following information):
  • OS: Ubuntu 22.04.1 LTS (Jammy Jellyfish)
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: Samsung A30s
  • OS: Android 11
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Screenshot from 2022-10-11 15-01-23

Create filter sessions modal

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

  • Create filter session modal as per design
    image

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Network requests

Is your feature request related to a problem? Please describe.
Need to set up a way to make network requests to query for data from the rest api.

Describe the solution you'd like
An instance of a network library that is set up to be easy to get started with network requests

Describe alternatives you've considered
n/a

Additional context
n/a

[Feature] State: Add and test out redux for async actions

Is your feature request related to a problem? Please describe.
There's an existing setup of redux but it's simple and tested for synchronous scenarios.

Describe the solution you'd like
Using react-toolkit, please add support for async operations. For a high level guide, check out this blog.

Describe alternatives you've considered
n/a

Additional context
n/a

Unable to resolve "../screens/FeedBackScreen" from "src/navigation/MainStackNavigator.tsx"

Describe the bug
A clear and concise description of what the bug is.

  • When I run npm run start, I get the error Unable to resolve "../screens/FeedBackScreen" from "src/navigation/MainStackNavigator.tsx"

To Reproduce
Steps to reproduce the behavior:

  1. Clone the project.
  2. Run npm install to install project dependencies.
  3. Run npm run start to start the project
  4. Scan the QR code with your device to run the app on your mobile phone.

Expected behavior
A clear and concise description of what you expected to happen.

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

  • The app should run without any errors
    Desktop (please complete the following information):
  • OS: Ubuntu 22.04.1 LTS (Jammy Jellyfish)
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: Samsung A30s
  • OS: Android 11
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Screenshot from 2022-10-12 16-31-38

Extract Header Component into a Resuable Component

Is your feature request related to a problem? Please describe.
The header component is similar across different screens. This will result in repetition of code, violating the DRY principle

Describe the solution you'd like
Extract the code into a reusable component, such that any change or improvement will be done from one place

Describe alternatives you've considered
N/A

Additional context
N/A

Functionality - Set up saved sessions functionality

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[Bug] : Unable to resolve "expo-splash-screen"

Describe the bug
On running npm run start and building on android, the app build fails with an error

Unable to resolve "expo-splash-screen" from "src/hooks/useCachedResources.ts"

To Reproduce
Steps to reproduce the behaviour:

  1. In the project run npm run start
  2. Open the app on an emulator or scan the QR code
  3. Wait for the app to build.

Expected behaviour
A clear and concise description of what you expected to happen.

  • The app should build successfully with no errors.

Screenshots
If applicable, add screenshots to help explain your problem.
photo_2022-09-27_11-20-44
Screenshot from 2022-09-27 11-15-00

Desktop (please complete the following information):

  • OS: [Ubuntu 22.04]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. Samsung A307FN/DS]
  • OS: [Android 11]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

[intergration] : storybook

  • Integrate the storybook with the app in a way that contributors can build and test UI components isolated from the business logic and context of the app.
  • It will allow you to test whatever you are building on the browser, independently from the app logic.

Additional context
You can check out Storybook's + React Native walkthrough from their docs

Functionality - Set up filter sessions functionality

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Set up Authentication flow

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

  • Set up Google Authentication flow

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Extract the Sponsors Section Code into a Reusable Component

Is your feature request related to a problem? Please describe.
The Sponsors section is similar across different screens. This will result in repetition of code, violating the DRY principle

Describe the solution you'd like
Extract the code into a reusable component. This will make the code more maintainable as changes relating to sponsors will be made from one place in the code base.

Describe alternatives you've considered
N/A

Additional context
N/A

Unrecognized font family 'Rubik-Light'

Describe the bug
The red error box appears every first time the Droidcon logo appears on the header. We seem to be missing the font in the assets folder

To Reproduce
Steps to reproduce the behavior:

  1. Run app on emulator
  2. See error

Expected behavior
The error box doesnt appear and the logo has the right font

Screenshots
image

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: iPhone 14
  • OS: iOS 16
  • Browser: expo
  • Version [e.g. 22]

Additional context
N/A

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.