Hey everyone!

I wanted to share a side project I worked on last year and some of what I learned while building it.

The site itself is called “My Name Fairy” https://www.mynamefairy.com. It’s a Tinder for baby names.

r/webdev - Side project I built using Django (a Tinder for baby names), and what I learned along the way

Here’s a summary of the tech I used to build it:

  • Django for BE

  • Nginx for the webserver and serving static assets

  • Postgres for the DB

  • Vue.js in some places (The card swiping page and account page)

  • Plain js in other places

  • Sass for the styles

  • Webpack to build the FE

  • Docker/docker-compose for deployment

  • Deployed on a digital ocean droplet. The Postgres DB is also a managed DB from DO.

  • Amazon CloudFront for a CDN

I mostly started it as a way to learn some new tech (specifically Postgres, Vue, Sass, Webpack, Docker, Nginx and deploying) and it’s been great for that. It’s also been fun to build something from the ground up. I’ve always come into a project that’s already established. Having to make everyone decision from the beginning was empowering and let me play with tech I wouldn’t get to otherwise.

Here are some classes I took:

  • Advanced CSS and Sass by Jonas Schmedtmann. This class is awesome. Seriously, I can’t recommend it enough. It’s super thorough, uses great examples, and Jonas is a really talented teacher. If you want to brush up on CSS and Sass, this is a great way to go.

  • Vue The Complete Guide by Maximilian Schwarzmüller. This class is also really good. It’s not quite as exhaustive as the Advance CSS one above, but it was really helpful in giving me a crash course in Vue for this project.

  • Docker and Kubernetes by Stephen Grider. Similar to the Advanced CSS course, this one is great. It’s super in-depth and Stephen is a really good teacher. I’d used Docker and Kubernetes a bit at work, but this class helped me get a much better handle on it. Related – How Containers Work by Julia Evans also helped me understand what’s going on under the hood when we containerize an application.

And some lessons I learned along the way:

  • Writing all the markup and styles is a great way to practice and to have the most flexibility, but it’s also time consuming. For my next project I’d like to use more templates or FE frameworks to reduce the time I spend on that.

  • Having someone else to work on the project helps a lot. My gf worked on this with me doing the design and all product related decisions which was a huge help. It was also nice in that we could parallelize the work. She could prioritize which feature we’d work on next and create the designs/figure out the user flows, and I could focus on just building the site.

  • Postgres is a cool DB. I’d only used MySQL before, but I really like the data types that Postgres offers. Eg, I use the uuid datatype in a few places. I do find the EXPLAIN to be pretty intense and intimidating, but it also seems more powerful once you understand it.

  • Vue is great. I used React/Redux at a previous company, but like how Vue’s approach to using templates instead of JSX. It feels more light-weight than React and less of a jump from the traditional HTML/CSS/JS approach. I also like that it has a centralized store built in (Vuex), even though I didn’t need that for the project.

  • Setup Django to print your SQL queries! Seriously, this took me way too long to figure out. Yes, you can use Django Debug Toolbar, but that really only works if you’re loading a page in the browser. If you’re just hitting an API with Django Rest Framework or using a script, you won’t see those queries. See here for how to do it.

  • Setting up Webpack is a pain. I probably spent 8 hours on getting it working for both my dev environment and production builds. I used Django Webpack Loader and found this stackoverflow helpful for getting the dev server working. It is powerful, but it’s finicky. Maybe you’ll have more luck than me, but I found using Webpack really frustrating.

  • Heroku is great for getting your project off the ground. Especially early in the project I was learning a ton of new stuff and was grateful I could let heroku just handle the deployments. Eventually I learned how to deploy my project on a digital ocean droplet (which was also a good learning experience), but in the beginning I’d definitely recommend just using Heroku so you can focus on the rest of the project.

  • Using a CDN (like Amazon Cloudfront) is a great way to speed up your site’s response times, especially if you’re running it from a single server. If you’re going this route, also make sure to set-up your FE asset builds so the files have a unique hash in their name so that whenever you make a change you don’t have to worry about purging old files after a deployment.

And here’s few other tools I used:

  • Hotjar for seeing how people were using the site. This tool has been indispensable. We’re just using the free version, but even with the limited recordings we learned so much about how to improve our user flows (and caught a few bugs) just by watching people use the site.

  • dbdiagram.io was great for figuring out the schema for the project.

  • TablePlus for working with the DB. In the past I’ve just used the command line, but having a GUI for looking at/interacting with the DB is really nice. It also helped me coming from MySQL since I was still learning the Postgres syntax and Tableplus helped abstract away those syntax concerns (kind of like Django’s ORM does). It’s a really nice tool.

  • PyCharm as an IDE. I use the JetBrains IDEs at work (mostly using PHPStorm) and I really like them. Maybe it’s just that I know them (which always helps). I know VSCode is free or there’s tricked out vim set-ups you can use, but I’m happy to pay the money for PyCharm. It integrates well with Django and Vue and works well for me.

If you’ve never worked on a side project before (I hadn’t), I’d say definitely do it! It’s rewarding and you learn a lot. If anyone has any questions, happy to provide the answers I can. But seriously, go forth and build!

TLDR; Built a project using Django. Learned a ton. You should do the same! 🙂

Source link

Write A Comment