Ninny Code! A Flask App to Help You Share Your Friend Code
Tags: python, flask, react
Published: 2020-05-01 15:39:06

I made my very first Python app using Flask! Ninny Code! helps Nintendo Switch owners easily share their friend code with their friends. Instead of sending my friends this code: 6480-2137-4914, I can just send them to http://ninnycode.com/mark!

###Deploying Woes###

It took all of last month for me to learn Flask enough to make this simple app. I actually remade it three times because of so many hurdles I ended up having to jump through. The first was `BrowserRouter` isn't support with GitHub Pages. My only options were to use `HashRouter` or host my front end elsewhere. Since HashRouter literally appends a # to your URL (ninnycode.com/#/mark), I went with the later and went with Heroku. This was another entire problem because, without [a bit of configuration](https://blog.learningdollars.com/2019/11/29/how-to-serve-a-reactapp-with-a-flask-server/), Flask won't serve up your React files.

So I went through the tutorial and realized that it configures your React a lot! I had to develop in the production environment so I would have to run `npm run build` instead of `npm start` which adds several seconds to the process. But the worst was since I was in a production environment, I couldn't use the `debugger` or see any error messages. One time, I made the small and unfortunate mistake of calling my props that had a value of `null`. So, when I ran the build, instead of showing me an error of what was going wrong, I was greeted with a white, empty page. That was an hour-or-so of frustration!

My third and final iteration was I just host the front end and back end in separate repositories and Heroku dynos. If I had started with this I would have been done a week earlier. Deployment seems to not be my thing!

###Flask###

For such a simple app I decided not to use any authentication. Instead, what I decided to do, was give them a randomly generated 4 character update code where they can change their details. For instance, my profile is ninnycode.com/mark, but my update page can be found at ninnycode.com/mark/update_code. From there, users can change their friend code, update code, avatar, or delete their account entirely. 

###React###

React is always so fun for me to play with. Whenever I get the backend done for any app, I always can't wait to jump into the front end. When I get stuck with an issue in Flask or especially deploying, it's always such a chore to figure out. I decided to use React Hooks since it's been the hot thing to use lately. Do you know what else has been hot? [Styled Components](https://styled-components.com/) which I also used for many of my "HTML" elements. Lastly, I made good use of [CSS animations](https://daneden.github.io/animate.css/) to add that bit of flair for users to experience. My personal favorite is the switch joy-cons snapping in place. I can almost hear the... click!

The repo [is public](https://github.com/superhackerboy/ninnycode-f) if you want to check it out. I want to make a few more updates before I can call this project completely done. I'm already thinking about my next project and how I want to learn Django for it. Maybe instead of Styled Components, I can use Tailwind? Who knows but I'll share it whenever it's done!