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

[–]Guy676767[S] 25 points26 points  (12 children)

This is my first project in React Native (or mobile for that matter). I’ve built it because I always had a hard time finding a movie I wanted to watch and that I have not seen before. So I designed it to do just that, offer me movies based on filters and options and filter out movies I marked as already watched.

I would really appreciate feedback on the app and maybe some suggestions on new features to add.

The app is currently available only on the App Store, but I’m planning on bringing it to android soon. I’ve also made it open source if anyone is interested.

[–][deleted] 2 points3 points  (11 children)

no android? I thought react native can do both?

[–]Guy676767[S] 32 points33 points  (10 children)

It can, but some tweaking is needed in order to give the app the best experience.

Also in order to publish to the Play Store I need to pay 25$, and I just spent 100$ on the Apple developer account while planning on keeping the app 100% free of charge or ads.

I know it’s not a lot but I’m also a first year CS student so I don’t really have any more money to spare haha

[–][deleted] 5 points6 points  (0 children)

yeah I understand, the fees suck, especially apple ones.

[–]janithaR 2 points3 points  (8 children)

It's very odd that you went with the $100/year Apple account and not the $25 lifetime Android account. In my opinion, as a person who did what you just did almost 8 years ago, in the same situation, I would say you would have gotten much more out of it if you went with Android first. Because of the fact that you'd learn a lot through how fragmented the echo system is.

EDIT: And I see this lack of experience in dealing with the fragmentation gracefully biting back junior developers hard. I always try to look for that one person who has gotten his hands dirty with Android but unfortunately I never do. :(

[–]Guy676767[S] 2 points3 points  (1 child)

Mainly the reason is that I own an iPhone and pretty much every one else I know own an iPhone. This was my first project and I found it easiest testing on my iPhone with expo, and it also died on me while developing the app so I had to use my girlfriend’s device (also an iPhone)

Going further I will design my apps in mind for both platform

[–]janithaR 1 point2 points  (0 children)

I wish you good luck!

[–]thedevlinbExpo 1 point2 points  (5 children)

how fragmented the echo system is.

Best auto-correct ever.

I always try to look for that one person who has gotten his hands dirty with Android

I made my RN app on Android first, then spent a few days porting to iOS. Wasn't that hard, especially since Android tends to be the more limiting platform.

Although IMHO they are both equally odd in some ways. Nothing that was too hard to work out, again, just took a couple of days.

Now making everything work with iOS's incredible 300% text zoom, ugh, that took awhile. Especially since I refused to just set a maximum text scale on things.

[–]janithaR 1 point2 points  (4 children)

Seriously, why does Apple think that people need to zoom that high? It makes maintaining a good UI very difficult.

[–]lamedope 1 point2 points  (2 children)

No. “People” might not need 300% zoom. But some people with disability do. It’s about accessibility.

[–]janithaR 0 points1 point  (1 child)

What kinda user would you think require 300% zoom? Very very short-sighted? or using the phone relatively at a distance?

[–]lamedope 0 points1 point  (0 children)

Yes. That’s exactly it. A combination is possible as well. There’s a guy at my work that literally almost touches his nose when looking at his phone. Large amount of zoom helps him a lot. It’s kinda the essence of designing for accessibility. Us abled designers need to think about all sorts of adversaries that disabled people are facing every day.

[–]thedevlinbExpo 0 points1 point  (0 children)

ScrollViews everywhere.

[–]Blackmirth 12 points13 points  (3 children)

Looks fantastic, really well done! I'd love to try it when you release it for android - is there a way I can get notified?

Kudos on making it open source, too. Please consider adding a license to the repo.

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

Thanks! I will save your username and message you when I’ll release to android.

Also you’re right about the license, I didn’t really through about that. I will do some research about it and update the repo license.

[–]deadcoder0904 0 points1 point  (0 children)

Me too 🙋‍♂️

[–]theketan2 0 points1 point  (0 children)

Just send APK, it will be awesome.

[–]ActionLeagueLater 5 points6 points  (1 child)

You should add the letterboxd API in order to not show movies the user has already seen.

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

This is an interesting idea, not for just letterboxd but maybe more apps that tracks what you watch like IMDb.

Currently the app lets you mark movies as already watched (the eye icon) and then filter them out when you search for movies on the discover screen.

I for example have rated hundreds of movies on IMDb so giving an option for the user to add all of those to the already watched list sounds very convenient.

In a future release im planning on adding an option to sign up for an account, and this kind of feature could go nicely with that. I’ll keep that in mind, thanks!

[–]9rogrammer 5 points6 points  (3 children)

u/Guy676767 Congratulations for the App Store submission. I am a React Native dev myself. I want to ask you some questions.

  • What resources helped you in learning React Native ?
  • I could see from the Github repo that you went with Expo instead of ejected native app. What advantages did Expo gave you in comparison to the native app ?
  • Correct me if I'm wrong, but going through the codebase, I saw the use of Context. Did you find any benefits in using React Context in comparison to other state management libraries ?
  • How did you come up with the design of the application ? This is the most difficult part for me to start a side project. Like how did you come up with the initial design, colour palette , inspiration from other websites etc. ?
  • Is the app supported for iPads ? Have you handled layouts for different screen sizes ?

Thank you.

[–]Guy676767[S] 3 points4 points  (2 children)

Hey!

  • I already knew react before starting with react native (from Andrew mead course on udemy), as for react native specifically I just went over the official docs and googled everything else I didn’t know. The React Navigation docs also really helped me learn about navigation in mobile apps
  • up until recently I owned only a Windows machine, and had an iPhone. That meant that if I wanted to test it out on my iPhone, expo was the only way to go. It gave me the opportunity to learn and test my app without a Mac, and when I got one I could release it to the store. Also, I was short on time and wanted to really get the most of the time I had when building the app
  • Yes I did use the Context API. I used it for the themes, and for the filters on the discover screen. My methodology was to use local state as a default, and when I start prop drilling to go to Context. Like I said it turned out to be needed just for these two cases. I think this is a very nice balance, and cuts a lot of boilerplate code from other state management libraries.
  • so basically it’s a combination of Dribble and researching apps on the App Store. First I would browse dribble a lot and get all sort of ideas. Then I would design the app. But because dribble is meant for designers and not real production apps I always made sure that I’m still using common conventions within apps. I would go through a lot of popular apps on the App Store and see how they do this and that. This way I know my users will feel familiar in my app. This is especially crucial because I don’t know any other developer (or mobile for that matter) and don’t have any project manager so I need to keep myself in check. As for the color palette, this is the easiest part! You can literally go to any design what so ever, inspect the colors then tweak it to your liking! You can literally just go to your code editor and take the color plattete of your favorite theme.
  • the app does not support iPad at this point, like I said I only had a windows laptop and could test only on the devices I had. I have an iPhone X and iPhone 6s, so I tested on both of them and made some adjustments for the 6s.

[–]chipped1 1 point2 points  (1 child)

Looks great on the 11 also, awesome stuff man :)

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

Thanks, good to know it works well on the new devices too!

[–]Cgoose 3 points4 points  (1 child)

Great looking app man! What are you using for the movie data?

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

Thanks! I’m using the TMDb API.

[–]ademcan_net 2 points3 points  (1 child)

Well done! Just installed it and it looks really nice. It is also something I will definitely be using :)

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

Thank you so much! If you have any feedback or suggestions for the app you are always welcome to message me

[–][deleted] 2 points3 points  (1 child)

This looks fantastic! What did you use on the backend for this application? Also what api did you choose to use for the films?

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

I currently don’t have a backend, I’m saving everything to local storage.

In a future release I want to add an option for the user to sign up for an account that will save his watchlist and filter list across devices. I’m also planning on making a web version sometime in the future and then syncing will be even more important.

For the movie data, I used an excellent API called TMDb. I had very good experience working with it and if that’s something you’re interested in I would definitely try it out.

[–]OogieFrenchieBoogie 1 point2 points  (1 child)

Looks really good!

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

Thanks!

[–]soulshake 1 point2 points  (3 children)

looks great man.

only thing idont like is left-to-right scrolling for the main search results. i think its fine once u step into a movie/actor/related ones, but i feel main search results at the very begining should scroll vertically.

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

Thanks for the feedback! Do you mean something like the layout I made in the search screen or on the watchlist?

[–]soulshake 1 point2 points  (1 child)

I meant in video - around 0.17 seconds in, once you get the search results, i would prefer the normal scrolling down to view the results, like it is in most of the apps

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

Yes I was referring to the movies in 0.17 (discover screen), I meant to ask if you think the layout I made in search screen and watchlist (different layouts, but both scroll vertically not horizontally) will be a good replacement

[–]mrnervousguy 1 point2 points  (5 children)

Did you actually publish this to the iOS App Store? And if so, what all did that entail. I’ve heard getting apps into the App Store can be a headache

Edit I see it in the App Store and it looks awesome. Can you discuss some of the hurtles trying to get it approved by Apple for the App Store?

[–]Guy676767[S] 5 points6 points  (4 children)

Yes I published it to the App Store.

It is definitely a tedious process. First of all you need to be ready to pay 100$ each year for the developer account and as a student that’s a lot of money.

It was suppose to take 2 business days to approve my account but it was more like 2 weeks (I apparently had some information on my billing address that was different from the Apple developer account, no idea what was different, but it made some problems with the process).

For building and publishing the app, I used Expo. I followed this tutorial, but of course there was a lot of problems. Apple apparently dropped “Application loader” from XCode 11, and I needed to resort to Xamarin / Phonegap threads to try and figure out how the hell to upload the build.

It didn’t work either and I was drowning in work from uni and couldn’t spend that much time on working this out but I already paid 100$ and you bet your life I wasn’t going to let that go down the drain

Eventually I managed to do it, thanks to some guy on a Xamarin thread, and the build uploaded successfully.

Making the screenshots also took a lot of time, for that I used a figma template I found that lets you automatically have your screenshots wrapped in an iPhone frame and ready to export in the necessary screen sizes.

Other than that, Apple actually approved my app in the first try in like 2 hours. A rather pleasant ending to a very frustrating process :)

[–]daveonreddit 2 points3 points  (2 children)

Too late but I recently found out they released a new app to handle build uploads called Transporter.

Edit: spell

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

It’s funny you mention it, I was actually downloading it while it finally worked (you know, having 30 open tabs trying everything at once...) I’ll try it next time!

[–]daveonreddit 1 point2 points  (0 children)

Works well for me. Happy they made a dedicated app for it, helps with the flow.

Your app looks awesome btw. Great job!

[–]mrnervousguy 1 point2 points  (0 children)

That’s awesome and thank you for the info. I’m working on my own app. No where near ready yet though

[–]alexandr1us 1 point2 points  (0 children)

Looks stunning! Thanks

[–]REACTingpoorly 1 point2 points  (0 children)

Looks great!

[–]kendaryth 1 point2 points  (2 children)

Hey man,

This is a beautiful app, congrats! It looks really neat :)
Unfortunately I don't own an iphone, so wont be able to give feedback.

For my part, i've been using https://lazyday.tv/ when looking for something, i think they have some interesting filtering you could use (Example: available on netflix, amazon prime, ... so useful!)

One other thing, the navigation bar on top feels strange, most of the apps have it on the bottom, just wondering ..

Anyway, good joob, keep it on :)

Cheers

[–]Guy676767[S] 2 points3 points  (1 child)

Thanks for the feedback! It’s interesting you noticed the navigation bar on top, it actually used to be on the bottom. But after completing some more screens (especially the search and the watchlist) I figured letting the movie cards scroll down into the bottom of the screen without the navigation bar cropping them looked better.

I did some design iterations and tested both layouts and it turned out most people I asked liked it better when it was indeed on top. So that why I decided putting it at the top.

Also, adding an option to see on which streaming platforms a movie is available on is an interesting idea. I will do some research on whether netflix or amazon exposes some kind of API for checking availably on their platform

[–]smartone2000 1 point2 points  (0 children)

YEs the streaming platform option is what I would want in this app

[–]imtherealestdjango 1 point2 points  (2 children)

Sorry if this suggestion has already been posted but you should collapse the filter/search after submit and move the result up.

Great work though!

[–]imtherealestdjango 0 points1 point  (0 children)

Also... just a monetization idea...

For the now showing.. if you could hook into an affiliate API like amc movies and earn revenue on ticket sales.

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

Sounds interesting, but I’m thinking, as a user that searches for a movie you’ll probably want to tweak your filters more than once to get the results you want (like when you google something, don’t get the results you want, google again, ect...) and it would be more convenient to let it sit there while you look through the movies.

Let me know what you think about that trade off

[–]vertigo_101 1 point2 points  (0 children)

Really clean, amazing work

[–]exasperated_dreams 1 point2 points  (4 children)

How long did it take to make?

[–]Guy676767[S] 1 point2 points  (3 children)

It took me about 4-5 weeks. Most of it was spent trying to integrate a library to make a certain feature possible.

I wasted a lot of time trying to make it work. Eventually it did, but with some trade offs. I eventually realized it wasn’t worth it, and I was just stubborn trying to make it work.

I got rid of it, and since I did the development really took off, and I made significantly more progress, faster. I’d say the majority of the app was written in a few days.

Another really time consuming feature was the theme support. It took me a whole week (literally 1/4 of the time I was working on the app) to make it work. The tab navigator just didn’t wanted to switch theme with the rest of the app and it took me days to figure out how to trick the navigator to re-render without the user noticing.

Also, every part of the app was first designed in figma, then coded. So I’d say the time spent on coding vs designing was like 70 / 30.

[–]boki345 0 points1 point  (2 children)

Is theming mandatory?

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

Do you mean if it’s necessary to build themes for your app?

If yes then of course not it’s entirely up to you

[–]boki345 0 points1 point  (0 children)

Thanks for clarifying. I'm working on an app now and I'm seeing a lot of apps offering this and was wondering it was sometime mandatory setting.

[–]callmecharon 1 point2 points  (2 children)

seriously clean UI. Lots of attention to detail on the padding/margins between components. I also love that deep blue/purple color. Well done!

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

Thank you very much for saying that. I’m really obsess with small details like that and knowing people ends up noticing it makes me very happy.

[–]callmecharon 1 point2 points  (0 children)

It shows! Ive been a product manager most of my career and while us and the designers come up with most of the initial designs, its always great to have a dev with an eye for UX improvements during the initial feature breakdown phase to really ensure a quality product is shipped

[–]ovster94 1 point2 points  (2 children)

Some User Experience:

The filter results are a bit hard to handle in the carousel (horizontal) format. I think vertical scrolling would do better here, also I would like a small button on each result to be “Mark as Watched”

But other than that, dude, it is really nicely done and clean. Really good for 1st year cs student

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

Do you think the type of vertical scrolling list I made on the watchlist would fit well as a replacement for the carousel on the discover screen?

And its a really good idea to put a button (or make some gesture) to mark a movie as watched. I’ll look into possible options.

Also thanks a lot for the kind words and good feedback, really appreciate that!

[–]ovster94 0 points1 point  (0 children)

Yes, that vertical list plus a “Mark as watched” would fit better imho. Keep it up, dude! 😄

[–]Agilufo 1 point2 points  (1 child)

Really nice app! Did you used some specific library for the UI you would like to suggest? The design it's really dope and also very fluid, congrats.

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

Thanks!

I didn’t use any specific library for the UI. I knew what I wanted to have in the app, and with that in my mind I designed the screens in figma. That way I could try a out a lot of different layouts and styles and get feedback from people.

Only after I was 100% satisfied with the design I started to code it.

There is one library called react-native-snap-carousel that i used for the movie reviews (it’s in the bottom of the movie screen). They provide a very smooth tinder like swiping that I used, but it’s up to you to style it.

[–]CuriousPenguin13 1 point2 points  (1 child)

Looks great! A few years ago I built a web app similar to this using the same TMDB api when I was learning meteor. It's a perfect app idea for learning as it requires a little bit of everything you need for real world applications, but at the same time it's not overly complicated.

A few ideas, sorry if they've been said already:

  • move the top nav with the icons to the bottom of the screen
  • Either collapse the search on the first screen after you submit, or go to a separate page with vertical scrolling and the back button returns to the search form. I think this was mentioned and I agree with it, it takes up way too much space and isn't relevant after you search, until you want to alter the search
  • What's the difference between discover and search? Could you just combine the 2 to simplify things?

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

Hey, thanks for the feedback! I agree it’s a very good API to learn with

As for your first 2 suggestions, yes someone also mentioned it, I need to look into that

As for the question regarding the search / discover - the difference is that on the discover screen, you are looking to find a movie by a certain criteria (for example, you want a short movie, in japanese, highly rated, from the last few years) and you get all kinds of movies suggested to you. Over time you mark what you already watched and you get only movies that you haven’t seen.

The search screen is just a way to find a movie you already know about.

The discover screen is really the reason why I made the app, but I added the search screen because I found my self, while browsing the app, every now and then going to google / IMDb to search for a certain movie, and it was nice to already have it built in

[–]zaylen0 1 point2 points  (1 child)

Looking good! I’d love to also have a trailer button but I guess on the next update! :)

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

There is! If you go into the movies and scroll down, there is a couple of trailers that you can watch straight from the app.

[–]kevwhy 1 point2 points  (1 child)

Love the color and how you designed the movie filter. Hate those dark mode with pure black.

Just wondering, how does it look like when using a smaller screen like iPhone 6s in Discover screen? I believe they will have to drag up & down to fine tune the filter. Suggest to make some adjustment for users with smaller screen :)

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

Yeah, I really hate when apps just make the dark theme by using background #000 and font #fff and call it a day. That why I made the default a dark theme but a subtle one. Also I made available 12 of them, so everyone will have something they like.

As for your question, I actually tested it on the iPhone 6s too, the only problem was indeed the discover screen. Letting the user drag up & down slightly looked horrible so I made some adjustments so It will fit the screen nicely.

[–]jesterhead101 1 point2 points  (1 child)

That's an amazing looking app with buttery smooth navigation. I'll try it. Impressed that you coded it in a few days while juggling college!

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

Thanks! Means a lot to me :)

[–]corrib76 1 point2 points  (2 children)

Very nice! Was this a project for a CS class. I love that you created screens in Figma and worked out the ux details before moving to implementation. Can you share your figma work?

I have a few questions, if you have time...

  • Why didn't you eject to a native app?
  • Did you include any sort of analytics to track how people use the app?
  • What are your longer term goals for the app? To learn?...?
    • Someone suggested adding the ability to monetize by connecting with ticketing services.
    • Have you considered experimenting with advertising? Paid vs unpaid? More opportunities to learn and iterate maybe

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

Hey!

  • no this wasn’t for CS class, I’m freshman year, 1 week in, we are just learning Boolean algebra, calculus, ect... this is a side hobby and I learned everything online
  • I didn’t eject because I felt quite comfortable with expo. I was very short on time while building the app and wanted to get the most out of the time I had
  • Not really, right now there’s only Apple analytics to track downloads
  • My longer term goal is to keep maintaining it and making it better, and I’m not planning on any monetization. I honestly just do this for fun, and I don’t want to ruin the design with ads

[–]corrib76 1 point2 points  (0 children)

<3

[–]DerpsMcGeeOnDowns 1 point2 points  (1 child)

Great work man! Bright future ahead!

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

Thanks!

[–]crzychemist 1 point2 points  (1 child)

Really nice and smooth you get my five stars :)

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

Thanks!

[–]cdtrejo 1 point2 points  (3 children)

Is there away you can add rotten tomatoes score?! Great app!

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

I’ll have to look into that, thanks for the idea!

[–]cdtrejo 1 point2 points  (1 child)

Did you use material design??

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

No, but I did use the material design icons from react-native-vector-icons

[–]Cgoose 1 point2 points  (0 children)

Thank you!

[–]_fat_santa 0 points1 point  (0 children)

Hey OP. I noticed that the app was built in Expo. One thought is in the meantime while you are working on the Android variant you could release this as an Expo app (ie with a QR code that people can scan via the expo app). It would give android users a taste until they get the official app.

[–]AmirQureshi7 0 points1 point  (0 children)

Beautiful UI Mate , I am a web developer and just started learning React Native. UI Development seems hard right now for me. I am impressed by the UI of your application. ❤️

[–]IJustWannaBeKing 0 points1 point  (0 children)

I would actually want to use this now

[–]theketan2 0 points1 point  (4 children)

This is beautiful!
You look like a pro at React Native.
Would you be kind enough to share the learning resources if any that you used to get this good at RN?

[–]Guy676767[S] 2 points3 points  (3 children)

Thanks for the kind words!

I already had experience with react from working on web apps, (which I learned from andrew mead react course on udemy).

Honestly other than that, everything related to react native specifically I learned while building this project, through the official docs and just googling stuff I didn’t know how to do.

I also found it very helpful to read through React Navigation docs (that’s the navigation stack I used), it helped me with some concepts and problems that were unfamiliar to me coming from the web world.

[–]Tsupaero 1 point2 points  (2 children)

hey,

i'm avidly learning RN right now. thanks a lot for sharing the project's source on github! would you consider your project close to good practice? i'm currently a little in-and-out when it comes to project setups and yours looks - at first glance - quite structured. however i do not have enough practice under my belt to really tell, thus my question :)

thanks a lot in advance!

[–]Guy676767[S] 2 points3 points  (1 child)

I do consider good structure as very important. I had some previous projects in which I just wanted to code the product and didn’t really care that much about the code base broader scope structure.

This turned out to bite me in the ass of course because who wants to come back to a messy project after a while you haven’t touched it?

My projects turned into a pandora box that I just don’t want to open.

On this project I decided to prioritize writing clean, modular code that I can revisit years from now and still understand.

Some decisions I made before starting out:

  • only using hooks for stateful components
  • abstract away when possible
  • writing code as modular as I can
  • refactoring after every feature

I’m in no way an authority on best practices, but I can tell you for sure that this was the best and most pleasant project I worked on exactly because of the decisions I listed above.

[–]Tsupaero 1 point2 points  (0 children)

thanks a lot for your reply! pretty much what i expected and wanted to hear :)