DEV Community

loading...

- Cyber Muse - Music submission app has been released! (Personal Development)

cyber_muse profile image Takeo ・3 min read

Introduction

I developed a music submission app!

Website: https://cyber-muse.com

Apple Store: https://apps.apple.com/app/id1511131064

Google Play:https://play.google.com/store/apps/details?id=com.front_music

We use React and React Native as our development languages.

I have done everything from development to operation on my own.

Impressions about React & React Native

It's been about a year since I started writing React, and it was my part-time job that inspired me to learn React. Before that, I wasn't really interested in front-end stuff, and I wrote a lot of Python. My part-time job was mainly in React (JS), so I started learning it after I got an interview. The frequency of my part-time job was about 8 hours a day, twice a week.

React.

React is very easy to write in my opinion. Personally, I didn't like to write js in script in html or in a js file independent of UI. Isn't it hard to see?
If there's one thing you can stumble upon in React, it's the concept of state.
It's hard to understand the concept around hooks. I'm not sure if there is a better article in Japanese on this subject.
You can read it here: https://iqkui.com/ja/a-complete-guide-to-useeffect/
The other thing is an exception, but it's file uploader-related. There is no file uploader that can be used for GraphQL, which connects the back-end and front-end. I don't think it's a good idea to upload files through GraphQL in the first place. In the back end, I used Prisma or [Docker](https:// I've been using Prisma or Docker on the backend, so what's the point?
I won't write about the backend in this article because I don't want to write about it.
I'm going to write React Native as well, after getting used to React.

React Native.

I think the most difficult part of React Native is the preparation before writing the code. If you don't know the settings of Xcode or Pod for iOS, the build will fail. My part-time job was operating an app, so I had to build something that was already completed. The build time was about 5 to 10 minutes. So if you're not used to it, you might fail to build it when you're not close to it. If you're not used to it, you might fail to build and get stuck in the middle.
 So, in the beginning of my mobile app development, I had a lot of problems, but now that I'm able to develop both iOS and Android apps, I feel it's OK.
 Yes, this is the advantage of React Native, in my opinion. If I wanted to develop iOS and Android in a native language, I'd have to learn both swift and java; with React Native, there's almost no need to tinker with the UI, although there are certainly some differences. All you have to do is learn how to build and release. The only thing I'd like to mention is that it's time to manipulate files within the app. Selecting and uploading photos. What's the bug if you don't know, huh? The last thing I'll say about React Native's UI. 

In the last section, I'll talk about React Native's UI, which has a lot of open source components that are useful. It's a good idea to avoid using github releases whose latest version is two years old. The other thing I really appreciate about css flex is that it's very useful. The key words are flexDirection, justifyContent, and alignItems. If you have these three, the screen will be neatly arranged.

This is my honest opinion about React Native.

About website animation.

In fact, we recently updated our website to incorporate animation.
You can check it out at https://cyber-muse.com
All animations on this website use the module react-spring.
You can find it here: https://www.react-spring.io/
I would like to introduce this module as if you could add scrolling control to it to create at least one website of my own.

At the end

With React and React Native you can create websites and apps like this! I hope it will be helpful to you.

Website: https://cyber-muse.com
Apple Store: https://apps.apple.com/app/id1511131064
Google Play: https://play.google.com/store/apps/details?id=com.front_music

Translated with www.DeepL.com/Translator (free version)

Discussion

pic
Editor guide