Introduction
A common mistake anyone new to building web projects encounters is opening a code editor immediately after a project idea comes to mind. Without a strategy, you will likely get confused about where to start, how to start, and how to finish building the project. It is like writing a technical article without an outline; you will easily run out of gas while at it.
Even if you are not new to building projects, after reading this article, you will know how to plan a project and how having a project plan helps you simplify the development process, add features easily, and expand your project.
Develop a Strategy.
Have you ever been in a fix while trying to build a web project? Or did it ever seem like you were trying to bite off more than you could chew while building the project?
Strategically planning a project involves breaking the project into tiny bits that reduce the complexity of building that project and give you a clear picture of what you are to build and how you are to build it.
Every project in a standard organization goes through an elaborate planning phase to bring the project to fruition. There are some common roles involved in building a web project which include; a project manager, product designer, and developers.
When building your project, you are likely to be a lone worker, which means you have to embody all the features of a standard team(a project manager, a designer, and a developer) while building your project so that can be very daunting.
However, creating a strategy and following a process gives you a sense of direction and a clear path to build your project.
Adopting the art of project planning helps you break away from tutorial hell. Breaking away from tutorial hell is challenging for most people because most tutors only show you how a project is built and don’t take you through the thought process. Having a project plan guides your thought process and prevents your mind from being all over the place. With a project plan, you are more focused on how to implement a particular feature than on how to build the entire application right off the bat.
The basic steps involved in planning a web project
There are various methods of planning a project. The most basic involves the following steps:
- User story
- Project architecture
- Development phase
The User story helps you determine the intended features of the app, the Project architecture creates a design of how those features will be implemented, and the Development phase is the final step where you build the project base of the project architecture.
As a case study, you will learn the thought process and project plan for building the client side of an expense tracker. However, the strategy and process can guide you in planning any application you want to build.
User story
This is an informal description of a web app's functionalities from an end user’s perspective. It is a high-level overview of the application that describes how the application will deliver a particular value to users. Thinking about the app from an end user's point of view helps you determine the features you need to implement to make the app work as intended.
A common format for writing the user story is; As a user[description of user], I want[functionalities] so that[benefits].
For an expense tracker, the user is regarded as anyone who wants to manage their finance and signs up on the app.
Hence the following are samples of user stories:
- As a user, I want to log my weekly or monthly budget so I don’t spend above my budget.
- As a user, I want to log in any expense I make with a description and date to keep track of the money leaving my account and its use
- As a user, I want to see all my expenses incurred in a week, month, or year.
- As a user, I want to see what is left of my budget and my total expenses.
- As a user, I want to be able to search for any expense incurred using the description as a keyword.
By analyzing the user stories, you can determine the web app's features.
A flow chart is imperative to demonstrate how these features interact, what actions a user can perform on the app, and the process it leads to. A flowchart helps you visualize the different actions a user can perform and how the app responds to those actions. It gives you a pictorial view of what you intend to build.
The image below is a flowchart of the expense tracker app created using the laid-out features.
Worthy of note at this point is that you might not have all the features of the final application in mind, so after setting down the template, you are likely to revisit these sections of the project plan as more ideas come to mind. It is expected that the flowchart changes throughout the development process, It is not cast in stone.
Project Architecture
Project architecture demonstrates the structure and organization of a project. It serves as a roadmap that helps you build and maintain the code efficiently.
In the traditional sense, architecture refers to creating a design for a building or structure. Most structures erected always have an architectural design that describes the pattern of that building and guides how it should be built. Project architecture in web development is no different.
The project architecture gives you a picture of how the various components of the app interact. It guides the development process and shows how the different logic that forms the app is implemented.
For a real-world project with a standard team, project architecture can go far deeper and more complex than what is explained here; what you will read about is adapted to building small-to-medium projects.
There are various types of project architecture or ways to organize your code. The common types are;
- 3-tier architecture: This is the classical type of project architecture where the application is divided into three layers; the presentation layer, which is responsible for rendering the user interface, and the application layer, which handles the business logic or core functionalities of the app. It can be regarded as the brain of the application because it acts as a liaison between the presentation layer and the data layer, which is responsible for storing and retrieving data.
- MVC architecture: This is a more recent and widely used approach to project architecture. It also divides the application into three components: model, view, and controller (MVC). The model represents data handling, the view displays the data, and the controller handles user input and updates the model.
These types are best demonstrated using full-stack applications, where the view is handled by the front end and the data layer by the back end.
However, when building a small-medium project, you can follow a customized approach or adapt any type to fit the project. The main aim is to give your project a structure upon which you can develop the functionalities.
A good architecture involves breaking your project into components and building your application component by component. Thus a good architecture for the expense tracker app can be designed in the manner below;
Data management
One of the most important aspects of any architecture is to decide where and how to store the data because data is the most fundamental part of any application. From the user stories, you can see that the expenses and budget data entered by the user into the app need to be stored. The implementation of how the data is stored and retrieved will depend on the programming language, but with JavaScript, the logic that can be applied here is that data is collected from the user and kept in an object or array. In a real-world application for the persistence of such data, they are stored in a database. However, you can keep the data in a localStorage for a simple frontend app.
The UI component
If you do not already have a mockup design for the app, here is the place to describe how the UI will be displayed, that is, the overall layout of the expense tracker, such as a tab component for switching between periods or categories of expense, forms for login and registration, call to action buttons e.t.c
The controller or application layer defines how an application handles data received and events, such as submits and clicks in a 3-tier architecture. However, You can derive several components from this layer such as Expense management, Budget management and User management, all these can also be divided into further sub-components.
Expense management
- Expense creation defines the logic for collecting expense data from the user and adding it to the storage. In this component, you will be thinking of creating a function that gets attached to a submit button or an
addExpensebutton. - Expense retrieval defines the logic for retrieving and displaying a user’s expense history depending on the timeframe chosen by the user, typically a filter method is created here. Another filtering method is also pertinent for a search feature where the user search for an expense base on a category such as “food”, “grocery”, e.t.c
- expense modification: This component defines the logic that enables the user to edit or delete existing expense entries
Budget Management:
- Budget creation: This component defines the logic for collecting a budget amount from the user, storing it in the array or object, and displaying that to the user.
- Budget tracking: This component defines the logic for displaying the budget and calculating what is left after deducting the expense incurred.
User management:
User authentication: This component handles user registration and login, two functions can be created here, a function that stores the user’s data after registration and a function that checks if the data entered by the user during login can be found in the storage.
The beauty of this approach is that as more features come to mind, you can easily create a component that handles that feature.
here are various benefits as to why you should design a code/project architecture; There include;
- Modularity: Having a project architecture promotes modular programming, which is the separation of the app's functionalities into somewhat independent components/modules. With the division of the app into parts, you build your app by developing each component which is composed of everything(the logic) required to execute an aspect of functionality. This makes the code easier to read, debug and reuse.
- Extensibility: A good architecture allows adding new features or integrating with external systems without requiring significant modifications to the existing codebase. For the expense tracker app, if you wish to include payment gateways to facilitate direct expense tracking from bank accounts or credit cards, you can develop a component on the payment gateway and connect it to other components, such as budget management and expense tracking.
- Scalability: A well-architected system allows for future growth and expansion by providing flexibility to add or modify components without affecting the entire system. Without a project architecture, you will likely overhaul your entire codebase to scale a project.
Development phase
With the project architecture well-designed, it becomes easier to build the application's codebase and implement all the logic created. You have a clearer picture and an understanding of what you're to build, and it becomes easier to fix any issue that may arise while building. It is important to reiterate at this point that project plans are not cast in stone. While building you might discover you need to modify the project plan, either add or remove something from it, so do not fret about making it perfect before you start writing your code.
Conclusion
While building powerful projects that showcase your abilities and make you employable, it is necessary to showcase your approach or project plan. Following a strategy shows your ability to think critically and systematically; that way, anyone viewing your portfolio can appreciate your holistic ability to create digital solutions for a problem.
An important takeaway from this article is to divide your project into small chunks and components that reduce the complexity of building the project.
Top comments (2)
Nice article.
Thank you.