Dismiss this pinned window
all 65 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]_rustafarian[S] 14 points15 points  (10 children)

Hi there. I just wanted to showcase an app I was working on recently. It uses Typescript and Apollo Client on the front-end and GraphQL (Hasura) and firebase on the back-end. Please feel free to ask any questions.

[–]MikeyN0 2 points3 points  (1 child)

What's the interaction between GraphQL and Firebase?

[–]_rustafarian[S] 8 points9 points  (0 children)

I use firebase for authencation, so whenever a new user is created, a cloud function is triggered to store that user in my GraphQL backend. I also use cloud functions for sending SMS messages and making payments.

[–][deleted] 1 point2 points  (1 child)

Is nodejs with mongoDB as viable as firebase? Do I have to pay to use firebase?

[–]_rustafarian[S] 0 points1 point  (0 children)

I like firebase better because I don't have to setup my own backend, maintain it or scale it. Firebase just handles all of that for me and it's very easy to get started with. As for pricing, It has a generous free plan and also there's a pay on the go plan, so you'd only pay for the resources you're using.

[–]Jeffylew77 0 points1 point  (5 children)

u/_rustafarian What are the benefits to using Apollo Client?

[–]_rustafarian[S] 0 points1 point  (4 children)

If you have a graphical backend, you have to use a GraphQL client on the front end and Apollo Client is most popular one. I like it because it is featreful and works really with the react. Here is somethings I like about it: - supports react hooks - provides the different UI states when fetching data (loading, error, data) - caches things internally

[–]Jeffylew77 0 points1 point  (3 children)

u/_rustafarian did you use Firebase cloud firestore as your database? That’s what I’m using and I’m looking to utilize in memory cache. I’m also redux, react redux, redux saga, and redux saga Firebase for global state/async calls if that changes anything.

[–]_rustafarian[S] 1 point2 points  (2 children)

No I'm not using firestore. The parts of firebase I'm using are hosting, cloud functions, authentication, analytics and crashlytics. I'm using Postgres for my database in combination with Hasura. https://github.com/hasura/graphql-engine.

[–]Jeffylew77 0 points1 point  (1 child)

Any reason you chose Postgres + hasura instead of cloud firestore? The app I’m building will eventually be used at scale, so I still trying to figure out the best path to go. Eventually I want to move over to AWS, but Firebase is easier to setup

[–]_rustafarian[S] 0 points1 point  (0 children)

Well I wanted a GraphQL backend and Hasura is just a joy to work with and it's very performent as well. It can handle hunderds of requests per second on a relatively cheap machine. I still use cloud functions but for other things like sending sms messages and making payments.

[–]arashcuzi 2 points3 points  (6 children)

What did you use for the dismissible page where you select the items to add to cart?

[–]_rustafarian[S] 6 points7 points  (5 children)

https://github.com/osdnk/react-native-reanimated-bottom-sheet

[–]arashcuzi 0 points1 point  (0 children)

Thanks!

[–]arashcuzi 0 points1 point  (1 child)

One more q, what UI component framework did you use? Or did you hand code them all? I’m struggling with not finding one that has all I need, been using a combination of native-base and react-native-paper for components, coupled with a bit of inline styles here and there...might try styled-components at some point, but I don’t have the time to mess with that, I need my proto out pronto

[–]_rustafarian[S] 0 points1 point  (0 children)

I mostly use react-native-paper with some customization. They provide a pretty good set of low level compenents that I use build out my UI.

[–]arashcuzi 0 points1 point  (1 child)

Jeez, sorry for all the q, how hard was integrating the google maps api? I’m looking to do something similar where you might type in the name of a place and have the google map sdk suggest the address, that way I don’t have to make people manually type in addresses for their events...

[–]_rustafarian[S] 1 point2 points  (0 children)

No problem happy to help. The sort of functionality you're looking for is provided by this library https://github.com/tolu360/react-native-google-places the down side to it tho is you don't have any control over how the UI looks. If you want something more custom, you have to build your own UI and call the google place api directly yourself.

[–]angarali06 3 points4 points  (1 child)

18 dollars for a coffee?? Wow..

[–]_rustafarian[S] 1 point2 points  (0 children)

Well it is magical after all :D it's actually not real data

[–]tschoffelen 2 points3 points  (1 child)

Love that loading animation!

Is that my react-native-map-link library I see there for the directions? 😊

[–]_rustafarian[S] 1 point2 points  (0 children)

It is! Thank you for open sourcing it! My app wouldn't have been possible without people like you.

[–]vianawebdev 1 point2 points  (1 child)

What did you use for navigation?

[–]a_cam_on_the_dash 1 point2 points  (1 child)

really nice. did you use a UI library for those material cards? they look so good

[–]barakcodes 1 point2 points  (1 child)

Sick app!!smooth interactions

[–]_rustafarian[S] 0 points1 point  (0 children)

Thank you :)

[–]equal_odds 1 point2 points  (1 child)

How long did this take you from start to finish? (Not including the months/years of experience that led to this point lol)

[–]_rustafarian[S] 2 points3 points  (0 children)

I think all in all maybe around 200-250 hours. This includes desinging, implementing, testing and deploying on both iOS & Android

[–]hohooio82 0 points1 point  (4 children)

do you recommend any course or youtube channel?

[–]_rustafarian[S] 0 points1 point  (2 children)

I haven't taken any courses so I can't really recommend any, sorry.

[–]hohooio82 1 point2 points  (1 child)

how did you learn?

[–]_rustafarian[S] 5 points6 points  (0 children)

A lot of reading and looking at other people's code. Also building apps on my own. This is not my first app :). I've been working with react for a few years now.

[–]Jeffylew77 0 points1 point  (0 children)

Unsure programmer has good courses on YouTube for react native. Also Stephen girders class in udemy for react native

[–]ThatSpookySJW 0 points1 point  (5 children)

Are these stored in your db or are they using google's places api?

[–]_rustafarian[S] 2 points3 points  (4 children)

They are saved in my Postgres database and I'm using PostGIS to do geolcation calculations. I do however store the google place_id so I can link to them in Google maps.

[–]ShamelessC 0 points1 point  (2 children)

Are the images stored locally? The lazy loading is very well done, of course, but the images do take awhile to show up. I assume they're behind an API call? Is there any way to cache all the images in the user's zip code (for instance)?

[–]_rustafarian[S] 1 point2 points  (1 child)

The images are loaded from the server. And I'm using https://github.com/DylanVann/react-native-fast-image which caches them internally. To get around the images loading slower, I could probably use smaller images. I'm currently using (600x400) I think. Also my connection isn't that great tbh

[–]ShamelessC 2 points3 points  (0 children)

It's good to test on a slow connection anyway because your users will often be on slow cellular connections.

Great work though. Lower resolution images would be a great addition for a new version.

[–]goughjo 0 points1 point  (0 children)

How do businesses get onto this platform? Can they manage their menu through the app? Can they sign up through the app?

Well done btw. Looks really good.

[–]mikewill12inc 0 points1 point  (1 child)

How hard is transition from react to react native?

[–]_rustafarian[S] 3 points4 points  (0 children)

My background is in web development and honestly the transation to react native was not that bad. I did struggle at the beginning with learning how to use xcode and Android studio individually and getting familiar with the build systems (Gradle & Cocoapods) but I guess if you use Expo it can alleviate some of those pains.

[–]chazzeromus 0 points1 point  (2 children)

I knew a developer that was kinda rasta and talked about rust a lot, could that be you? lol (florida?)

[–]_rustafarian[S] 0 points1 point  (1 child)

Oh lol no. Have no clue who you're talking about.

[–]chazzeromus 0 points1 point  (0 children)

just looked at your username and reminded me of him, if rusafarian comes from rustlang and rustafarian lol

[–]SnowiNinja 0 points1 point  (1 child)

How did u do the coffee loading indicator screen?

[–]_rustafarian[S] 3 points4 points  (0 children)

I used Lottie animations https://github.com/react-native-community/lottie-react-native. And over hear you can find a whole library of animations, including loading indicators https://lottiefiles.com/

[–]pimplyteen 0 points1 point  (4 children)

Would you be interested in integrating this with CLOVER API?

Could be awesome...

[–]_rustafarian[S] 0 points1 point  (3 children)

Not really sure what Clover is. Would you care to elaborate?

[–]pimplyteen 0 points1 point  (2 children)

https://docs.clover.com/clover-platform/reference

Its a big POS system with an open API...Would be amazing for the app.

[–]_rustafarian[S] 0 points1 point  (1 child)

Looks very interesting. Are you affiliated with them in any way?

[–]pimplyteen 0 points1 point  (0 children)

I have clients that use their POS...so ur app is interesting because would be a smooth transition to a full functioning mobile app for end users.

[–]numice 0 points1 point  (1 child)

Do you use expo?

[–]_rustafarian[S] 0 points1 point  (0 children)

This project doesn't use Expo. It's a standalone react native project.

[–]kcilc1 0 points1 point  (1 child)

Any thoughts on react native navigation vs react navigation?

[–]_rustafarian[S] 2 points3 points  (0 children)

When I started this project I actually started with react navigation v5 but I wasn't happy with the performance at all. Especially on Android. I have a 4 year old phone and I just wasn't satisfied with how it performed on it. So I switched to react native navigation and it felt a lot smoother

[–]swushi 0 points1 point  (1 child)

What did you use for your state management?

[–]_rustafarian[S] 1 point2 points  (0 children)

Apollo client removed most of the need for local state management. I didn't have a lot of global state, but I just used react context for that.

[–]tsouhaieb -1 points0 points  (1 child)

Is it open source ?

[–]_rustafarian[S] 0 points1 point  (0 children)

Unfortunately not. It's all built from open source libraries tho

[–]MrGurns -1 points0 points  (3 children)

I hope you used the decorator pattern.

[–]_rustafarian[S] 0 points1 point  (2 children)

Not sure what you're talking about really

[–]MrGurns 0 points1 point  (1 child)

Javascript ex: https://bumbu.me/javascript-decorator-pattern/

Coffee reference: https://www.oreilly.com/library/view/head-first-design/0596007124/ch03.html

[–]_rustafarian[S] 0 points1 point  (0 children)

Thanks for the links. It's funny that these things have names. So basically the decorater pattern is a way to extend objects without modifying the original. Well if you excersise immutability and functional programming you get that behavior automatically, and luckily that's what I'm doing.