Follow bloggers, like articles, comment your thoughts—share with the world!
A social networking website where users can upload and share whatever is worth posting through blogs.
Powered by Python's Flask framework and PostgreSQL. Deployed on the Heroku cloud platform and Fly.io.
Visit the website here.
- User account creation and login system
- Commenting system
- Following system
- Liking system
- Image uploading from your computer
- Dynamic editing/deletion of posts
The website's production environment runs on Heroku with a connection to a PostgreSQL instance running on Fly.io. The development environment switches to a local SQLite database found locally in the repo.
Data coming in from the client via AJAX or otherwise are passed through Flask POST routes where it is (hopefully) cleansed and inserted into the relational database.
In order for the following/follower system to work, the tables are related through many-to-many relationships using an association table from SQLAlchemy, an ORM. Other tables such as user posts employ a one-to-many relationship, since a user can have many posts.
Some JavaScript magic was at work so when a user hits like on a post, the page does not have to refresh to update the DOM, but instead sends an AJAX request so it updates dynamically.
The code also integrates with AWS s3 services using the SDK boto3 library. Images uploaded for a blog post are stored in s3 buckets and subsequently edited or deleted as needed.
Hours and hours upon hours of bugfixing and reading documentation/tutorials. Also it was frustrating at times trying to implement features on your own without straight up following a tutorial verbatim, but they were valuable learning experiences.
Combining the TinyMCE WYSIWYG editor with the s3 bucket by far was the most time-consuming process, but it eventually worked out in the end.
I'm not the greatest frontend UI designer so tinkering with the CSS and Javascript took quite a while compared to how much I worked in the Flask and SQL backend.
This was my biggest project so far (more to come) and I've learned a ton about how web development works especially in backend technologies. CS50x gave me just enough foundation in Flask and SQL to jumpstart my own working website and allowed me to expand my skillset outside of the course's curriculum.
There were some features such as categorizing and tagging posts that due to potential scope creep I had to remove and set aside for maybe as "future" updates. They were nice to have but weren't necessary for a fully-functioning blogging website in my opinion, especially since this is just an intro to computer science course.
I started this project last year but because of motivation issues and a general lack of time due to school, it prevented me from finishing this project as fast as I wanted it to. But I sat down one day, decided to finally push through it and get the course over with, and finished it.
If I had to redo everything I did and make a brand new website (and I currently am), I would make sure to employ better web design principles, write cleaner and more concise code, use more flask extensions than reinvent the wheel, make wireframes/prototypes and also database schema for the pre-production phase, and set clear goals for the website to prevent scope creep.
If it weren't for the course I would not have been the programmer I am today and I am grateful for that.
This project would not have existed without the knowledge and education provided by CS50x, Michael Grinberg, Tech With Tim, and more.
For the CS50x 2022 final project. View my demo here.