#webapplication
Trainers App
Fully functional Front-end and Backend Web Application. Learn & Connect with experts that you need.
#webapplication
Trainers App
Fully functional Front-end and Backend Web Application. Learn & Connect with experts that you need.
Technical documentation describes the feature set and the system behind Appify’s Trainers App Web Application. It is intended for use by the project manager, technical lead, and the rest of the team to help guide the development process. With it we could not only estimate the time and cost of the project, but also stay close to the agreed brief with the clients during the development, making sure we deliver on schedule and on budget.
It includes main components of all website features, UI/UX design, and actual development of the MVP project: product scope and website complexity.
Using the Agile Scrum Methodology the team followed through all iterations in the scheduled time. This methodology relies on incremental development, and promotes effective communication between the team members and the client.
Applying the method of “sizing“ and using the Fibonacci scale, the team broke down the whole project into manageable tasks. Our project consisted of 6 two-week sprints, and each of them consisted of 50 story points on average.
Afterwards, we grouped the user stories together and divided them into 5 epics. Alongside the epics, we managed tasks that were regarded as a foundation for development, including setting up the app architecture, managing content creation with the client and setting up for the deployment of the application, among other tasks.
Daily meetings of 15 minutes on average were rudimentary for the internal team every morning to be able to keep up-to-date on the tasks finished the day before, plans for that day and possible blockers.
In addition to the internal meeting, in the mornings we would also check in with the client to fill them in on our progress, as well as receive some important information from them.
Design meetings were regularly held in the beginning stages, as well as throughout the development process, to make sure we were on the same page as the client.
Showcase meetings - at the end of each sprint, our client, project manager and technical lead would set aside a time for an hour long meeting in which we showcased our progress. These meetings were not only important to keep the client up-to-date, but also to build trust and good communication between everyone involved in the project.
Sprint planning - After each of the sprints, the internal team would look at the remaining user stories and tasks, count the story points left to complete and divide them into manageable increments for the next two-week period.
An hour of sprint planning meeting was always followed by a sprint review. We shared everything we thought was an issue in the last sprint and could be improved in the next one. This approach enhanced our workflow.
As in any project, changes are not a rare occurrence and they are oftentimes welcome. However, if a client doesn't have a technical background, they might ask for some alterations which can turn out to be foundational. These changes would require a structural modification and therefore couldn`t be applied. Nonetheless, we always tried to find the alternative ways to approach every inquiry from the client.
The biggest issue with modifying the initial structure of the web application according to the clients` inputs later in the development, is the so-called „triple constraint“. This model represents the dependency level of three points: budget, cost, scope. If one of the three points ”suffers“, the two others will directly be affected. Project manager and the tech lead had to understand how to assess the possible alteration while communicating with the client, present it to the team and together reach a decision on which action to take.
UML Diagrams and the user flow:
Unified Modelling Language Diagram, short UML Diagram, is a digital modelling scheme that represents
the flow of the app,
which the team used to visually outline all actions each of the 4 user groups can take in this app.
This is a very concise representation of the web app, which allows designers, developers, and the
rest of the team to have
a very clear and easily accessible referral scheme. The actions are separated by user type and show
all the options each group has in a very abstract way.
Database modeling:
We created a logical structure of the database including the relationships and restrictions of the
entities.
For example, the connection between the course and the users - what is the relationship between the course entity and the user entity. This method has proven to be very useful as we could not only refer to it whenever needed, but also make later decisions on whether to implement a new feature or not.
Technologies used for backend development:
The API was written in Typescript using Node.js environment and Express.js framework. We followed SOLID principles and custom onion architectural approach in writing reliable code.
Database of our choice was MongoDB and Mongoose object modeling. To keep track of all the model relationships, we have made several diagrams in various tools, and to keep track of all the requests that were created, we used Postman collections.
Technologies used for frontend development:
The website was made with React.JS library, and we used Redux library for managing and handling a couple of different user entities, as well as Bootstrap as our main UI library.
Features are implemented with REST API.
We used MERN stack for this app, and special attention was given to the mobile version of the website.
Since we worked in agile methodology, we added several changes both in
wireframes
and visual design guide during the process of developement. However, looking at the bigger
picture,
this method saved us a lot of time both for designers and developers.
After developers implemented design on the actual website, we ran tests and did the design review. The designer then communicated with the developers how to adjusted the fixes accordingly and the project was completed.
The website was made with React.JS library, and we used Redux
library
for managing and handling a couple
of different user entities, as well as Bootstrap as our main UI library.
We implemented the features using REST API and MERN stack.
We made one website, one URL, but 3 different versions of the
website, which depend on the user identity/user type.
In accordance with different user identities we have made different features.
Commonality for all users types is the process of authorization. Registration differs from user
type to
user type,
and some users have to submit more details upon registration. After finishing the registration
process,
and logging in
as a specific user type, users have access to specific pages and set of actions and features.
By creating two seperate design files, we made a system which
provides the developers with outlines to code according to. This way, developers didn't have to wait for
the completion of the visual design in order to start building the app.
In the file for visual design, the developers could easily extract files they needed (such as for a look of a specific button), and download all assets that exist in design for this app.
We made an intuitive web-based platform in its MVP phase, which the clients and the development team love.
The consumers now have a place where they can easily find and apply for any course or training job they are interested in.
Our client has the possibility to communicate with the consumers through the review system, allowing them to implement customers wishes in the next stage of development.
