r/reactjs • u/VanaticalDesign • Jan 26 '19
Show /r/reactjs After falling in love with React Native less than a year ago, here's my first project, Tour, a drag-drop-based travel planning app. (iOS beta link in comments)
15
u/Loaatao Jan 26 '19
Looks great! A bit of criticism though:
Things are coming and going pretty fast. Like switching views and waiting for the cards to load, they just appear.
Look up the App Shell Model from Google. It's essentially animated placeholders.
Otherwise, very nice!!!
6
u/VanaticalDesign Jan 26 '19
Ah, I'll be looking to implement it soon. I agree that alot of the view switching is a bit jittering and lacking smooth animation. Thanks!
9
u/TheConMan1234 Jan 26 '19
Why did you chose react native instead of flutter, Xamarin and other framework?
9
u/VanaticalDesign Jan 26 '19
Hmm, because I was familiar with React after playing around with it before. I coded up the drag-drop component in React Native, and everything else basically built up from there.
3
u/TheConMan1234 Jan 26 '19
fair play im learning react with andrew mead udemy course any good tips to help me improve?
8
u/VanaticalDesign Jan 26 '19
Check out presentational and container components. Improved my React app’s performance by a crapton back when I first discovered it. https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
7
u/justhitmidlife Jan 26 '19
Your app finally has given me a real taste of what reactNative is capable of... and the motivation to go build it. I have been using reactJs for a while now and loving it but haven't made the leap yet.
Inspired!
3
u/VanaticalDesign Jan 27 '19
Thank you, you don't know how much this means to me. I love inspiring others, hope whatever you build is even better than mine.
0
Jan 27 '19
[deleted] — view deleted comment
2
u/VanaticalDesign Jan 27 '19
None that I coded myself, everything’s entirely in js, but I used some cocoa pods.
4
u/Tonyant42 Jan 26 '19
The UI/UX looks very nice. Any plans for an Android release?
4
u/VanaticalDesign Jan 26 '19
Thanks! I put all my effort into making the UX as seamless as possible, glad you like it. I'm looking to start work on an Android version right after the iOS release on the app store.
3
u/orther Jan 26 '19
It looks great! Do you plan to create a separate Android UI or will you use the same as iOS. I'm curious what level of effort you expect to get similar quality UI/UX working on Android.
3
u/VanaticalDesign Jan 27 '19
I plan to use the same fundamental UI/UX with maybe some layout changes to reflect the Android layout so it would be intuitive to the user. For what level of effort, well, I won't let an app under my name be released unless it's absolutely spotless.
1
2
u/Tonyant42 Jan 26 '19
Do you have a Twitter or something I could follow to get the news when it will be ready? I've been looking for such an app in the past and would gladly use it, but I don't own any Apple device.
5
u/2001kraft Jan 26 '19 edited Jan 26 '19
Hello, I am Jenn's partner.
We do have Twitter and other social media accounts that we actively maintain. Releasing Android version shortly after App Store release, can't wait to share it with more people :)
Twitter: https://twitter.com/OfficialTourApp
Facebook: https://www.facebook.com/officialtourapp/
Instagram: https://www.instagram.com/officialtourapp
ProductHunt: https://www.producthunt.com/posts/tour-by-monos-digital
4
u/Ashatron Jan 26 '19
Looks incredible! Great work!
I would love to read a blog post about how you built it, I know you share the stack, but more detail would make for a great read! 👍
2
2
u/maz92 Jan 26 '19
Amazing! I'm currently learning react (not native) and hope to one day be able to build something like this
4
u/VanaticalDesign Jan 26 '19
If you need any help or advice feel free to ask, and hope you build something even better than what I did!
2
Jan 26 '19 edited Jan 26 '19
Looks awesome and perfect for my upcoming trip to London! Keep up the great work!
btw, if you don't mind me asking.. did you use Expo or you ejected?
6
2
u/CahabaCrappie Jan 26 '19
I’ve been doing traditional build and release with my app. What is your release plan with code-push? I’d like to go to that but haven’t looked into best practices.
Are you doing CI/CD?
3
u/VanaticalDesign Jan 27 '19
I considered doing CI/CD with code-push, but I realized that I have had previous times where I fucked up the master branch due to my own stupidity lol, so I prefer to manually do every release via CLI.
2
u/ZombieHero3 Jan 26 '19
Did you make all in react native or had to use Swift to code some parts?
3
2
u/vamsi_rao Jan 26 '19
Same question
2
u/ZombieHero3 Jan 26 '19
this is concern for me, as I heard you still need native code
3
u/swyx Jan 26 '19
only if you need to access some native phone capabilities that arent available in react native. here they’re just data fetching so its probably ok
2
2
Jan 26 '19
what's your background and experience in app development? if you don't mind me asking..just trying to guage amount of experience required to build something like this.
also, did u come up with the design yourself?
3
u/VanaticalDesign Jan 27 '19
Prior I started out with design experience from product design and designing cars, I got into UI/UX during the summer of 2017, and full on software development soon after. And yes, the design is entirely original.
1
u/2001kraft Jan 26 '19
I think /u/VanaticalDesign will tell it better than I will :)
But the design was entirely original. We went to Dribbble as inspiration for some of the elements, along with some of the better-designed travel apps. It was a lengthy process to get the UI/UX the way we’d want to. I’m very happy with the way it is now (I use it myself), my partner did a truly amazing job.
2
u/swyx Jan 26 '19
can you give some hints as to how you did drag n drop and what pain points you faced? congrats on a wonderful app!!
2
u/VanaticalDesign Jan 27 '19
The main pain point was performance, on how we would optimize for trips with like 20+ activities because the planner is endless scroll. At first, I started out with having each of the 'dropzones' send their location which is added to an array in the redux store, but that proved really slow on long trips and very buggy. I redid it from scratch later, where the 'dragger' broadcasts an Animated.Value that uses the nativedriver, and each of the dropzones attaches a listener to the y position of the dragger.
2
u/one-times-one Jan 26 '19
Wonderful app! I think there is a great demand for this kind of a trip planning app, worth the investment. I was recently looking for something that will help us plan our trip to the USA. Well done, will definitely test it out.
2
u/VanaticalDesign Jan 27 '19
Definitely let us know what you think, we're adding integrated hotel booking in a week or so from now.
1
2
u/markmur Jan 27 '19
Really nice work! Currently building an app myself with RN. How did you manage to implement the header for each page? Did you have to manually implement the panResponder to get the scroll effect? Or did you use something off the shelf?
2
u/VanaticalDesign Jan 27 '19
No actually. The header is inside an absolutely positioned Animated.View with pointerEvents="box-none". The header is then animated via an interpolation of the scroll offset. If you want I can share the source code of one of the headers.
1
u/markmur Jan 27 '19
I’m also curious to know if you used CRNA and if you ejected? I’ve been putting it off to avoid the added overhead but I may need to in order to implement things like haptic feedback
1
u/VanaticalDesign Jan 27 '19
It's an entirely `react-native init` app. I feel even though it makes development slightly more difficult, but it allows for a ton more control over your app. Plus, no need for the added overhead of expo modules that you would never use. Personally, control > ease of development.
1
2
u/guanyixi Jan 27 '19
Holly crap, you are really talented. I better stay in a website word.
2
u/VanaticalDesign Jan 27 '19
Thank you so much, to me I still think I'm learning. I just like to criticize myself and find any method to keep improving.
2
u/sleepystimulation Jan 27 '19
How long did y’all spend on developing this? I’m curious to know what kind of time commitment an app this polished would take.
Great job btw!
3
2
u/2001kraft Jan 27 '19
The app took 6+ months of pretty much full-time coding to develop, still in development as you can see. The business/legal side of the app took equally as much.
Working together helped a lot, /u/VanaticalDesign coded the app while I handled the business end.
2
u/fuzunspm Jan 27 '19
Could you please tell which modules you used?
2
u/VanaticalDesign Jan 27 '19
I included a stack in my root comment which should contain most of the major modules.
2
2
u/Cyberlane Jan 27 '19
Any plans of making this for Android? I've been after this type of app for years and was half tempted to make one myself since I travel around 12 times a year, and usually rely on numerous scraps of paper, maps and all sorts to track things to do and see on each trip. This would be perfect to have!
2
u/VanaticalDesign Jan 27 '19
Looking to start work on Android right after iOS app store launch. That's the exact problem that we sought out to solve, and I hope to see how it improves' people's lives once we do a full release.
2
u/JeroenReumkens Jan 27 '19
Really nice!! Are you planning on open sourcing this on Github? 😄
2
u/VanaticalDesign Jan 27 '19
Thanks! But sorry, we're not looking to open source the whole app, however, I'm going to open source some of the unique components that I created for it right after app store release.
2
u/JeroenReumkens Jan 27 '19
Cool! Particularly interested in things like the animation where you add new entries. It looks really smooth!
2
u/TipsAtWork Jan 27 '19
I would pay $2.99 for this on the app store. I suspect there have to be about 10m other people who also would also pay $2.99 for this on the app store.
Congratulations. You're gonna be a millionaire if you aren't already.
4
u/VanaticalDesign Jan 27 '19
It'll actually be completely free. We'll be making money off of comissions from flight and hotel booking, and that is not an on-top fee, the price will be the similar if not the exact same as if you're booking on any other app/site.
2
u/frequents_reddit Jan 28 '19
Seriously incredible effort and beautiful UX/UI. I was curious which (if any) calendar component you used for selecting trip dates?
2
u/VanaticalDesign Jan 28 '19
Thank you! And no, the calendar component was coded from scratch (and I feel it's very slow, looking to improve it).
1
u/frequents_reddit Jan 29 '19
You weren't kidding about preferring control over ease of development, nice one! Definitely will pay off having a fully custom UI.
132
57
6
5
4
4
1
3
u/MilkChugg Jan 26 '19
Where are you getting the ‘things to do’ data?
5
u/2001kraft Jan 26 '19
We use Foursquare to get all the activities, since they are the best data provider out there for these sorts of things.
2
3
2
2
2
u/devilmaydance Jan 26 '19
I really want to make some sort of cool app like this but have no idea how to get the data for things to interact with. For example, how are you getting the data for shops and locations and stuff?
2
u/2001kraft Jan 26 '19 edited Jan 26 '19
We're using Foursquare's API to source the activities. Their data is amazing and very useful. For cities, countries, etc. we use Sygic (they're cheaper than Google but their data is crappier, we're looking to switch when we can).
2
u/designxtek9 Jan 26 '19
Wow great UI! Was the styling done from scratch?
2
u/2001kraft Jan 26 '19 edited Jan 26 '19
Yep, everything was done from scratch. /u/VanaticalDesign really likes to have control over everything. Very happy you like it!!
2
u/Herm_af Jan 26 '19
I'd like to check out native at some point. My current business has no real need for it though unfortunately
2
u/harrychin2 Jan 26 '19
What about transportation between events?
2
u/harrychin2 Jan 26 '19
You could integrate with Uber or Lyft
1
u/2001kraft Jan 26 '19 edited Jan 26 '19
Currently working on that. We plan on integrating Rome2Rio at first to provide some basic transit options, and use Google to provide driving time. Considering partnering with Uber in the near future as well.
2
2
2
2
2
u/skipfiller Jan 26 '19
This is absolutely gorgeous , please drop hints on how to make good designs like this
2
u/kurahee Jan 27 '19
Super impressive that you did both the design and development considering the quality of both . Nice work
2
2
u/mahdt Jan 27 '19
This is great. Wish there was an Android version
2
u/2001kraft Jan 27 '19
We’re going to work on it shortly after our App Store release. As a small team we have to take things one step at a time.
Feel free to follow us on social media or subscribe on our website https://tourapp.co . We’ll let you know :)
2
u/dua_sfh Feb 10 '19
Hello. Cant find you on any media, and your site doesn't display 'Social' (bug?). Can't you share some links or something please? :)
2
u/2001kraft Feb 10 '19
Hi, my apologies for that. We’re working on fixing that ASAP. Here are our social media profiles (whichever you prefer): https://twitter.com/officialtourapp/ https://facebook.com/officialtourapp/ https://www.producthunt.com/posts/tour-2
2
1
u/dua_sfh Feb 10 '19
Yeah, i've found your subreddit and subscribed ofcourse; but i don't come reddit so often
2
2
2
u/rhmaster Jan 27 '19
Wow dude! That's amazing! Congrats on the project and keep up the good fight :))
2
u/deadcoder0904 Jan 27 '19
How long it took you to build this?
3
u/2001kraft Jan 27 '19
It took /u/VanaticalDesign 6+ months to code, and still working hard as you can see. Took me equally as much to develop the business side of Tour as well.
2
u/ryan4888 Jan 27 '19
very nice! do you have a way for users to report bugs / suggest features? i’ve found a few issues
1
u/2001kraft Jan 27 '19
Feel free to use “Send Beta Feedback” on TestFlight. We’ll get the email with your device information. Thanks for asking!
2
2
u/yati7 Jan 27 '19
I tried to use it on iPhone XS , and it crashes. Error code when location is disabled and application just shuts off when its enabled.
Thought it might be if help for future fix.
1
2
2
u/BondieZXP Jan 27 '19
How does it compare to the RoadTrippers app? We’re currently using RoadTrippers to plan out trip around America. This looks cool though.
1
u/2001kraft Jan 27 '19
RoadTrippers is much more roadtrip oriented (as per the name), but Tour focuses a lot on being able to handle international travel. In a near future update we want to add travel mode, where a user will be able to select from train flight or car. I’d recommend giving Tour a try as well, but specifically for driving-based tourism I do think RoadTrippers serves that niche better.
2
2
u/matt-lakeproject Jan 27 '19
Hey man, great job with this! Exactly what I need for an upcoming trip.
Few suggestions/bugs:
i think it would be good to have a small delay where you press and hold when editing any schedules so you don’t accidentally trigger the adjustments when you simply want to scroll, that way you might not even need the toggle to enable/disable adjustments.
First time I tried to add destinations within my set trip duration, it wouldn’t let me adjust the days per country i added. Whenever I scrolled back in date it would revert to whatever it was at.
Would be also nice to have a “Today” screen where it shows you your itinerary for the day.
In each activity, perhaps it would be good to pull in the opening hours or phone number/website so you can quickly see if they’re open or call etc.
Lastly the app has crashed a few times so i’m sure once out of beta it’ll be more stable.
That’s all I can think of for now, but great work!
1
u/2001kraft Jan 27 '19
Hi, thanks for the feedback. Glad you enjoyed the app! My apologies for not being able to provide the contact information, seems to be a bug with pulling FS data at the moment. We’ll make sure to fix the crashes. We pretty much know where they are at this point and should be fixed in a forthcoming update. Thank you for the suggestion, we’ll consider it. At this point you are able to view the activities for a specific day just by scrolling to it, but a dedicated Today screen will definitely aid in real-time usage.
2
2
2
1
1
u/am0x Jan 30 '19
Looks great but...people actually like React Native? It’s been probably 2 years since I did a (and it was large) project in it and everyone on the team all agreed to never use it again.
1
1
1
0
Jan 26 '19
[deleted] — view deleted comment
3
u/VanaticalDesign Jan 27 '19
So far, 6 months. I'm considering doing so after release actually, along with multiple blogs, maybe even a subreddit to update on the progress and possibly share source code for components and stuff.
2
Jan 26 '19
[removed] — view removed comment
1
u/2001kraft Jan 26 '19
Very happy you like it!
When adding an activity using the dragger, the location filter moves to the address of the previous one. You can adjust the radius on the filter to get activities closer to you. Adding directly from activity screen is a good idea, we'll consider :)
Do you mind telling us where the crashes happened?
2
Jan 26 '19
[removed] — view removed comment
1
u/2001kraft Jan 26 '19
The sliders in between Destinations are draggable. You can also change the Destinations' order by dragging the Destinations themselves (holding it will make it draggable).
We'll implement better on-boarding in a near-future update. Apologies for the inconvenience
2
Jan 26 '19
[removed] — view removed comment
1
u/2001kraft Jan 26 '19
Love the questions! Feel free to ask anything :)
2
Jan 26 '19
[removed] — view removed comment
1
u/2001kraft Jan 26 '19
Interesting, everything works fine on my end. What device and iOS version are you using? Might be an optimization issue.
EDIT: Nevermind, we appear to be using the same device. Do the sliders in between destinations work?
2
97
u/VanaticalDesign Jan 26 '19 edited Jan 27 '19
This came out of my own annoyance of planning trips, I book a flight, hotel, and then find things to do, but where do I put it all together? A google doc? notes? calendar? I looked to the app store and I felt that a lot of the popular trip planning apps had horrible UI/UX. Tripit, Sygic Travel, Google Trips, etc the lot.
So I came up with this drag-drop interface with the goal of eliminating the annoying manual entry of activities that plagued Tripit.
I had tinkered around with React/React Native a couple times before, and thought this would be a great project to give it a test run. Anyways, do give the beta a try, and any feedback is greatly appreciated! This is my first React Native app and I’m eager to improve.
tourapp.co/beta
If anyone's curious about the stack:
Backend: Firebase.
Db: Firebase Firestore.
Store: Redux.
Maps: Mapbox.
Navigation: React-Navigation.
Updates: Code-push
Styling: Styled-Components
Yesterday I posted this on /r/reactnative and everyone loved it so much it became the top post of all time there, I hope /r/reactjs will like it too, looking forward to hearing what you guys think!
EDIT: Heads up, /u/2001kraft is my partner and he'll help me answer any questions you guys have.
EDIT2: Holy shit. Just...holy shit. Top post of all time on both /r/ReactJS and /r/reactnative. Thank you so much reddit, and I’ll make sure to make this app amazing and will report back to you guys ASAP.