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, 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 which I also used for many of my "HTML" elements. Lastly, I made good use of CSS animations 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 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!
Top comments (1)
Wow. I have to admit, this looks, dare I say it, like it has a chance at being somewhat useful.