My First Fullstack, Open-Source App
A few weeks ago, we talked about the importance of contributing to Open Source Software and how you can get your first PR in First Portfolios: The Good, the Bad, and the WHY GOD WHY? Here’s an update on the project, and don’t forget that YOU can contribute too!
My First Fullstack, Open-Source App
It started as a problem you may have encountered yourself: I knew Open Source contributions are vital to the developer’s path, it adds to one’s technical skills, it’s great practice, it builds one’s network. It sounds really cool, but it’s also overwhelming.
What is a developer to do, but to craft a solution? The moment Codette Club came to be, my full-stack app became ours -and yours-, a welcoming, friendly, step by step guide for everyone with nothing more than HTML+CSS in their arsenal to contribute to Open Source.
The first portfolio website is usually the first big challenge, an almost universally shared experience among web developers. Thanks to our First Portfolios Gallery open source project, it’s easy to see how far you’ve come and having the added input of the work of others makes for an appealing first PR project.
Two major characteristics of this project are, 1.) how easy it is to contribute to it and therefore get experience contributing to an open-source project, 2.) the app is easy to update with new contributions.
I started with a client-side app, front-end JavaScript only. I wanted to try and work around the requirement to build a full-stack app for our purpose since I hoped the result would be a simple web page. However, in order to keep submissions as simple as possible, the app would need to store and read every contributor’s information and update the page to include this. But you can’t read the files with client-side JavaScript!
Everything started to take shape from the idea of the requirement to build a fullstack app for what I had hoped would be a simple web page. I was pretty excited to find a hack that could be achieved by using an Apache server to grab the file names from the DirectoryListings. This feature allows you to request the URL of a directory and returns a page listing links to all the files in that directory. So I had the info, but I still needed to deploy an Apache server to the web to get it working for anyone else. Having no experience with Apache servers, I was back to figuring out the full stack of the app again, and was forced again to reevaluate how I was going to build this thing.
In the meantime, I completed my first backend project on Free Code Camp using express-generator, as and the concepts behind programming with node and express became more accessible to me, it started to make more sense to build this app in the same way.
The first thing that convinced me I could build a fullstack app was the discovery of boilerplate code- this is a game-changer and ultimate timesaver. Learning about express-generator changed my life: install globally and create your new project from the command line!
Once I had the architecture of the app set up, I had to update and remove some of the dependencies that come with the express-generator package. Dealing with npm modules has taken me a long time to understand, and getting everything set up with the correct versions was a challenging crash course in the process. Working on this project really helped me become more comfortable using build tools and the command line in general through repetitive use.
After spending a few minutes getting set up, I was ready to get right to work on the application’s functionality and presentation. Express comes pre-loaded with an HTML templating engine that used to be called Jade, it is now known as Pug. Pug is indent-based, so no pesky closing tags, and it allows you to iterate right in the document- no jQuery spaghetti here! The syntax was difficult for me to grasp at first, but after a few tries to get all my files communicating, and adjusting a few misplaced semicolons, I got the app looking good and functioning correctly!
Building a functioning app is great, but if it lives on your computer, no one else can see it. I’d successfully deployed to Heroku before, so I chose to use the platform again, this time sans tutorial- I’d just built a fullstack app, surely I could handle something as simple as deploying it to the web, right? Wrong! Memorization is overrated, Heroku has fantastic, easy-to-search documentation, don’t risk it if you’re not working 100% from muscle memory! It took me two days to straighten out the mess. But straighten it I did, and now you can see for yourself: The First Portfolio Gallery!
So, pretty cool project, right? Well you can make it even cooler- submit your first portfolio website to the gallery! The repository is right here! If you want to learn more about building your first portfolio web page, check out the FREE courses in the resources section at the bottom of the page!
Resources
Free Courses(that will help you build your first portfolio website!)
Free Code Camp- front end project #2
Wanna contribute? Here’s the Repo
