In the beginning
which was November 2022, I was watching Netflix and scrolling through my phone looking for an affordable programming school in Kenya, little did I know that 12 months later, I would be on the cusp of completing my ALX foundations and embarking on 4-months of frontend specialization. To mark the end of 9 months of foundations, everyone is required to do a portfolio project.
Teamwork makes the dream work.
But not always. In my time at ALX, I have encountered around 7 projects where collaboration was mandatory. Of these 7, 3 times I paired with very amazing people who showed up every day and put in the work. The other times, I ended up doing the project on my own because my partners simply didn't show up, were unresponsive, or showed up last minute and tried to undo everything I had done.
For these reasons, my first decision about the portfolio project was that I going to do it alone. I didn't know what to build or what language and framework to use but I knew I was going to do it alone.
Getting started
Was a bit difficult, I had a hard time deciding what to do, and which language and framework to use. Because I love frontend, I wanted to do a project that would help improve my skills and showcase everything I have been learning on the side. And since we have learned a lot of backend at ALX I also wanted to test everything I had learned by building the whole backend by myself.
I contemplated using the MERN stack which meant learning a lot of new things within a short period of time but after consulting with my mentor, who said that it was not impossible but it was going to be very hard, we decided the best approach was to use everything I had learned at ALX so far. So I settled on Flask for my backend with a mission to master the micro-framework. And even though I know a bit about Bootstrap, I decided not to use any frontend framework because I wanted to dedicate my time to solidifying my understanding of HTML, CSS, and JavaScript.”
Introducing Echoes
Which was born out of the chaotic brainstorming phase where I contemplated building a blog website just for myself but my mentor said that would be too easy and not challenging enough. Hence the birth of Echoes, a blog platform whose purpose is to create a beautiful space where users can seamlessly share their thoughts, connect, and build a vibrant community. It's not just another blog platform; it's a canvas for tales waiting to be told. Echoes was crafted for anyone with a story to share or a curious mind to explore.
And now the code
Which presented another classic dilemma: frontend or backend first? Although Jinja templates have grown on me now, I disliked them from the moment I laid my eyes on them. I didn't like the syntax and I found them hard to style. Because of this, I opted to kickstart my project by building the static pages first. I did a lot of research on YouTube, Canva, and color-hunt, and looked at websites trying to find the perfect color palette. Echoes, as it stands is a blend of inspiration from Egator, my wonderful friend Sebastian and of course Canva.
With the static pages in place, the visual representation laid the groundwork for a streamlined backend development process. I used SQLite for my database. I started by whiteboarding my tables and all their relationships and then I created all my database models in one file, models.py. From here the process was pretty straightforward, create a form for user input in forms.py, create a route (and logic) for it in routes.py, and then add jinja to the corresponding HTML template.
Deploying
Was the next step. Having configured everything locally and Flask running seamlessly on localhost the next step was to buy a Digital Ocean droplet, which thanks to the GitHub student pack was technically free. I bought the droplet and got an IP address. I also got a free domain name echoesblog.tech from .tech, courtesy of the GitHub student pack, and added the A records with my server's IP address.
I SSH'd into my server, created a less privileged user, git-cloned echoes repository, created a virtual environment, installed all the required dependencies, configured the application, and ran Flask to ensure everything was working as it should. I also installed, configured, setup MSQL, and did a db upgrade to change my database from SQLite to MYSQL. (It was recommended)
The last step was installing and configuring Nginx and Gunicorn servers which I did using Digital Ocean tutorials. I also installed a UFW firewall and an SSL certificate from Certbot. With these last steps, Echoes was now live, and my users, which are mostly me and my cat, only needed a URL to access it.
Are pictures really necessary?
Is what I was asking myself after 4 days of trying to do file upload using Flask and terribly failing again and again. Within those four days, I had gone through flask photo upload documentation a million times, read so many articles and books, and watched a lot of YouTube tutorials, but no matter what I tried, things would work and then suddenly stop working. I had written and rewritten my Python code so many times I could literally feel myself going crazy. I finally decided to ask my mentor for help (who at this point might have been a little bit tired of me but too polite to say it) and half an hour into the Zoom call he realized the problem wasn't my Python code but my jinja logic. He helped me set the right conditions and everything started working as it should. I was so relieved and I will forever be grateful for his help.
Localhost doesn't sound so bad
It only works on my computer is what I was contemplating telling my friends and family when they asked to see my website. This is after three days of trying to configure my server but I kept getting error 403 forbidden on all my static files. I tried to change my location blocks on nginx as StackOverflow suggested and when that didn't work I changed file permission as chatGPT suggested but this made matters worse and I ended with error 502 bad gateway. No matter what I tried, the bad gateway error would not resolve.
The thought of doing my presentation on localhost and/or not being able to share my precious URL with my friends and family, made me a little sick so in my last attempt, I decided to destroy the server (maybe a little bit too dramatic), got a new server and restarted the whole deployment process. This time everything worked!
What's next?
Echoes is a versatile blog platform designed to facilitate user interaction through seamless sign-up, sign-in, and blog post sharing. The primary objective was to build a dynamic community where users can update profiles, follow each other, and engage in meaningful discussions. So far, it has an awesome logout experience, you don't have to sign up to read the blog posts. Users who want to post content, can sign up, sign in, update their profiles, post content, follow, and unfollow each other. I was able to implement 90% of my MVP and the next step will be to implement a search function, add a comments section, and enable users to like or favorite each others' posts.
Adding an admin dashboard, enabling the sharing of posts to other social media apps, and fixing sending emails to users are also on top of the list.
$ whoami
A full-stack software engineering student at ALX-Africa with a love and passion for front-end development. To mark the end of my nine months at ALX, which is also the end of foundations, I built Echoes, which is more than a blog platform; it's a testament to the collaborative spirit of the coding community and the endless possibilities that unfold when passion meets technology.
This journey has taught me the power of persistence and the joy of conquering challenges. I've emerged with a refined skill set, a deep appreciation for Flask, and a determination to continue exploring the vast landscapes of software engineering.
Looking ahead, I'll carry the Echoes experience into my future projects, informed by the lessons learned in architecture, technical challenges, and the joy of building a community platform.