July 29, 2021
As most developers have experienced, building a side project can be a tough task alongside your normal work. We often start projects and do not follow them through until the end.
This is not all bad as we learn along the way, however, we all want to get our projects out into the world.
I believe in systems that we can follow through until the end. With systems, we can fully understand what needs to be completed and tackle items in logical steps.
This will not only make our development process smoother but also increase the likelihood of getting our project released.
These are the steps that I am following in the development of my next side project:
Flow charts help you visualize users interactions throughout your application. This gets the idea of how a user will use your application out of your head and onto a visual chart.
With a flow chart, you can refine the process of how a user will use your app and get these out the way early on in the process. The last thing we want is to start coding or designing without a clear idea of the application flow!
With the flow chart giving you clarity on how the user will interact with your application, it is time to write your database models. This will be the foundation that you can base your design on.
By getting this step out the way early, you will have a base understanding of what is needed and can tweak it appropriately during the design phase of your app. This is key to get complete before writing any application code as it will greatly speed up the development process and lead to fewer mistakes.
For this step I use the tool: DB Diagram
Designs systems are key to designing applications quickly and effectively. Before even starting to think about your UI, you want to have the basic components covered.
What you include in your design system is highly dependent on the app you are building. Some apps will require cards and tables while some won't. Having the basics covered ensures that when you design your UI's, you can focus on the big picture instead of the small details of components.
I use Figma for design and I can easily create components for my design system. Give it a search online if you want more information.
With your flow chart and design system ready, you are now able to design your application! This will be a page-by-page process based on your flow chart. You can use the components in your design system as puzzle pieces to build your app.
I did not use a design system for the first few times I was practicing design. Once I integrated it into my workflow I was amazed at how quickly I was able to build a UI!
Hooray! You are finally ready to start coding. First, before getting into the nitty-gritty of the functionality, you will want to spend some time setting up your UI components from your design system.
Getting this over with early on will allow you to solely focus on the important functionality of your application later. Also, once you have your design system coded, you can reuse it throughout projects for quicker development speed!
This is the final part before your app is ready to be released. You will be setting up your database models from your DB Diagram and code all features that your app has!
This process will be greatly sped up by all the preliminary work you did beforehand.
This is a general system that I will be following for the release of my next side-project. It is not a finite way to build apps and all the steps do not necessarily have to be completed in that order. This can be tweaked in any way that will prove beneficial for the development of your application.
I hope there were some parts that apply to your and the application(s) that you are building.
If you are interesting in hearing more from me and following my journey, I will be documenting it on Twitter.