Stack Organizer
Purpose of The Project
I built Stack Organizer because I realized I kept getting lost in multiple Stack Overflow tabs for different or the same questions every time I was working on a project.
You search for one question and find a solution, but that solution leads to another question, then that leads to another, then another...
That's why I decided to solve this problem by building an organizing app that allows you to save your desired solutions inside a dedicated project or categorized nested folders that you can come back to any moment.
Tech Stack
Features
Authentication
Custom File System
CRUD Operations
Search with Stack Overflow API
My Process
Planning
My first step was researching how real world projects are built from start to finish. As this was my first big project, I needed to learn a lot about how to plan a project.
Without even touching any code, I started brainstorming what features I need for the Minimum Viable Product and researched how it can be built.
After figuring out the MVP, I wanted to use an Agile methodology to manage the project, so decided to go with Kanban because it would be better for a single person project. I used Trello to create the Kanban board. Then broke down the MVP to small managable tasks backed up by user stories.
Designing
I started designing process with a quick draft with mobile first approach, kept everything as minimal as possible to fit the MVP. After deciding the initial mobile layout, I moved on to desktop layout.
Then I tried few variations of colors for the website and settled with the current blue and white combo.
Building
Started building the app according to task order on Kanban board. As I already knew what each component would look like thanks to design phase, they were easy to build with React and Sass.
However, there were a lot of things that needed to work together besides presentational components. So when I started implementing stuff like Redux, Firebase and Automated Testing on top of them, I've encountered a bunch of mind numbing bugs. But thanks to my Googling and problem solving skills I was able to crush them in the end.
Building process was also a learning process for me. There were a lot of stuff I didn't know how to do and a lot of bugs I haven't encountered before. So most of my time was also spent on learning new things, trying different approaches, making lots of mistakes along the way but eventually learning from them.
Problems I have Faced
File System
Even though I made a proper plan before writing any code, I highly underestimated how complicated the file system was.
As I dived into implementation in the "Save As" modal first and succesfully implemented project selection, I got completely stuck with the folder selection. Since it needed to have nested folders, it couldn't just be a dropdown selection. And because I had a very specific design for it, I couldn't find any third party library that fits my needs.
After researching how to properly store nested data in redux and database, learning more about normalized data and bunch of trial and errors. I finally managed to make it work.
Deleting a folder was also a challenge because it was also supposed to delete any nested folder inside it. After some brainstorming I wrote a recursive function that looks for every single sub folder inside the folder and deletes them.
While it was a tough challenge, I really enjoyed getting my hands dirty with something like this, it was a great learning experience.
Firebase
Even though I've used Firebase in my other projects before, none of those projects scale was as big as this one. So I spent few days how to properly integrate Firebase with Automated Testing and Redux.
After dealing with bunch of small bugs, I eventually set up Firebase Emulators for Automated Testing to mock Firebase services in tests.
What I have Learned
This whole project was a challenge on another level but also a great opportunity to improve my knowledge, because stepping out of my comfort zone and diving right into something new is the best way for me to learn something.
I've learned how to manage complex states with Redux and how to store data efficiently in database to work with.
Greatly improved my knowledge on Automated Testing.
Got the grasp of managing a bigger scale project from start to finish.
And found out Stack Organizer is actually useful, because I kept getting lost inside multiple Stack Overflow tabs and wished I had built it sooner.