Let’s Build a Web App! A blog series by someone starting their web dev journey
Hi!
I am a student in my second year of study at Holberton School, a 2-year project & peer learning based program for full-stack software engineering.
I initially planned to do the low-level programming specialization @ Holberton, but I’ve since decided to switch things up. I’ll be embarking on a course of independent study to build 2 web apps in the next 7 months under the watchful eyes of my father hens Julien Barbier & Salva Guillaume.
If it interests you, follow my weekly posts to hear all about it. ✿(b~‿◕)b
The apps
kusamochi.me
The first ‘app’ will be a purely selfish project, my personal art website kusamochi.me. kusamochi.me will actually be a refactoring of a website I built in the past with vanilla HTML, CSS and Javascript, only this time, I’ll be building it with React, Expressjs, Wordpress REST api, and MySQL. I plan to split up the site into microservices hosted in a Docker swarm on Digital Ocean droplets. The timeline for the project is 1 month.
second app (name not yet decided, hehe)
The second app will be a reading and publishing platform for web comics, manga, and manhwa that lets readers and creators interact.
Ideally there will be parts to the site that let you write and follow reviews, see the profiles of translation groups, see the profiles of authors, subscribe, and so on. But the MVP will consist of a homepage, a seamless login process, user profiles, a reading platform, and a database of metadata about manga and web comics as a whole. The reader will allow you to record what you’ve read into your personal db, which you can find at your user profile.
It’s a big project. If you’re familiar with the manga/web comic reading scene, think of it as a mashup of baka-updates, MyAnimeList, and Naver, but with a community-oriented focus. I’ll have to tightly regulate the time I have to do it, which is 6 months :).
Like kusamochi.me, the front-end will also be React, but the backend will be Django cms and Django instead of Wordpress. A relational database like PostgresSQL probably makes the most sense. Depending on how many free credits I have (l o l), I’ll either be hosting on Digital Ocean or Amazon EC2, but again, I’ll most likely be using Docker swarm for service isolation, redundancy, and deployment.
Things are not written in stone
obviously, and I’ll probably adjust my plans and decisions as I learn more about web dev technology. ✨
The structure
Each week I plan to spend 1–2 days researching my task for that week. The next 3–5 days will be spent executing. At the end of the week, I’ll posting a quick 1–2 minute write-up on my progress, covering the following points:
- What did I set out to do this week?
- What did I end up getting done this week?
- Summary of what was difficult or went well / a thing I might try differently next time
- One cool thing I learned about
The first example
WITHOUT further ado, here’s my writeup for this week!
What did I set out to do this week?
- Present my plan to Guillaume
- Find mentors for my projects
- Come up with a 4 week map of tasks
- Do some wireframing
- Come up with architectural diagrams for kusamochi.me
- Set up my development environment with all the tools I need to work on kusamochi.me
- Get the framework for kusamochi.me up and running (one ‘server’ with ssh access, Wordpress running with PHP/MySQL, a simple Expressjs frontend which makes a successful call to the Wordpress api, firewalls, locked down root access).
What did I end up getting done this week?
Planning, planning, planning, research, research, research.
More to the point, I presented my plan to Guillaume (and got the okay, thank you!!!), asked Marie to reach out to a few potential mentors, came up with the 4 week map, diagrammed a little for kusamochi.me, decided on using DO for hosting, spun up my first 2, set up ssh access, and wrote a Dockerfile to run a simple Express js frontend.
I also spent a day adjusting the git history of my config file repo and writing a bash script to simultaneously make commits to the public and private remotes on Github (or only the private). Was this absolutely necessary? Probably not.
Summary of what was difficult or went well / a thing I might try differently next time
Although I hoped to keep the research phase to the first two days, I really found myself doing research throughout, and on questions I didn’t always anticipate (check out this link if you’re interested in my keyword searches. YES, I archive all my keyword searches!). This is natural for the beginning of the project, but may be tricky to not do for the rest of the project as well. Making sure my plan is concrete now and clearing questions up quickly by consulting peers & mentors will help the issue. (Thanks steven garcia for being my sound board this week, and helping me settle on using Docker!)
I was also surprised by how much I was still unclear about at every step of determining the architecture and CI/CD process for kusamochi.me. I’m happy I’ve pinned things down a bit, but some times I don’t have a full picture of what can be accomplished by a tool until I try it out.
One cool thing I learned about
You can deploy a new version of an image to Docker swarm in a rolling update. If you have multiple replicas of the service you’re deploying, this means your service won’t go down even as you’re making the switch to your new code. COOL!
In conclusion
That’s all. This blog post was extra long because I did some introduction to the projects as a whole, but hopefully in the future it will be more concise.
P.S.
ISO mentors
If you’ve read this much, you’re probably unduly interested in what I’m doing. You could deepen your strange interest by volunteering to mentor me in any area of what I’m learning: CI/CD with Docker, React, Django, web performance, building web apps in general. It can be as simple as replying to one email a week about an approach I have in mind. If you’re at all interested, don’t be shy, I will totally accept any help I can get. 😂
