Building a Production-Ready Application from Scratch: My 72-Day Journey with $0.00 Cost
Introduction
Writing articles is a new venture for me, but I believe that sharing my experiences can be valuable to others looking to embark on their own project journeys. This introductory article is the first in a series where I’ll delve into technical details related to the architecture and development of my project.
Introducing Myself
Before we dive into the details, allow me to introduce myself. I’m Ali Moussawi, a Lebanese software engineer with over 13 years of experience in the field. My journey began with building static websites, and I’ve evolved to leading a team of experts in the fintech industry. Throughout my career, I’ve gained expertise in a wide range of technologies, from frontend and backend development to hybrid mobile applications.
Motivation
Recently, I decided to deepen my understanding of software architecture. To achieve this, I dedicated myself to completing five courses on Udemy, totaling approximately 300 hours of video content. These courses covered topics related to database engineering, software engineering, and software architecture for large-scale systems, giving me insights into how top-tier companies operate.
This newfound knowledge pushed me to take on a challenge: building a real project with minimal cost. I aimed to create an application with no prior experience, overengineering it to be scalable, maintainable, testable, readable, reliable, durable, and efficient. In essence, I wanted to create a piece of software that could be managed by a large team, used by a vast number of users, and ensure high availability.
Phases of the Project
1. The Idea
The journey began with a simple question: What software could I create that would not only satisfy a personal need but also ignite my creativity? I settled on building an application for securely storing family photos in the cloud. This solution would ensure our cherished memories would remain safe, even if our devices were to fail, and would allow multiple group members to contribute to the same photo album.
2. The Technology Stack
For the frontend, I decided to leverage my strong experience in React, using modern concepts like Hooks and TypeScript. On the backend, I chose Python and Flask, not only because of my familiarity but also due to Python’s popularity, rich ecosystem, and strong community support.
3. UI/UX
Designing the user interface and user experience presented a unique challenge. While I had a vision and workflow sketches, I lacked expertise in design tools like Adobe Illustrator or Photoshop. Instead, I took a hands-on approach, sketching designs on A4 paper and translating them directly into code. I used color psychology to guide my choices, selecting orange to represent creativity, cheerfulness, and attraction. Color palettes were sourced from Color Hunt, and icons were retrieved from The Noun Project in SVG format. Images for the Welcome sliders were found on Freepik in .AI, .eps, and .png formats.
4. Technical Design and Architecture
To meet the challenge of building scalable, maintainable, and efficient software, I designed a monolithic architecture with a novel approach to vertical slicing. This design incorporated abstraction and relied heavily on two key design patterns: Facade and Factory Method.
5. Implementation
I didn’t follow a traditional product design phase, as part of the challenge was to build the project based on a basic idea and design, then iterate. This approach isn’t recommended for real-world projects, but it allowed me to test my problem-solving skills. I initiated both frontend and backend solutions, tackling around 80% of the frontend first.
My development process involved building the authentication part first to enable other features to use it. Then, I implemented the main features of the application, ensuring it worked with “happy path” scenarios. I iterated between backend and frontend development as features were finalized. I thoroughly tested each feature for authorization, basic functionality, complex functionality, and UI considerations.
After completing the initial development, I focused on code cleanup, removing duplicate code, and improving the organization of the codebase. I conducted extensive manual testing on various devices and challenging scenarios. Testing with my wife on our real devices provided valuable insights.
Challenges
While I won’t delve into the specific features of the application in this article, one of the main challenges was implementing a synchronization feature for photos to the cloud. Initially, I underestimated the complexity of this feature — it seemed deceptively simple: retrieve photos if they don’t exist on the device and upload photos to the cloud if they’re not there. However, it turned out to be one of the most complex features I’ve worked on.
The happy path is indeed straightforward, but to enhance the user experience, things get considerably more complicated. Users might decide to log out during the sync, upload or delete photos during synchronization, and determining when to sync and when not to became crucial. Preventing concurrent syncing sessions and handling resynchronization for unsynced items after a session completes presented additional challenges.
I ended up refactoring the implementation twice to accomplish the mission. To ensure a seamless user experience, I had to impose certain restrictions, such as preventing users from deleting albums or logging out during syncing.
Conclusion
I’ve invested 72 days in building this application, and while some aspects of the implementation seemed straightforward, challenges arose, particularly when dealing with functionalities at scale. It’s crucial not to underestimate the complexity of software development, even in seemingly uncomplicated projects.
However, this journey is far from over. After completing usability testing, the next steps involve iterating and enhancing various functionalities, with special attention to improving the synchronization aspect. Additionally, I plan to put the application’s maintainability and flexibility to the test by sharing the codebase with junior developers and inviting them to add new features. This experiment will provide valuable insights into the effectiveness of my new vertical slicing architecture approach.
Stay tuned for more updates as the journey continues.
