TaxGlobe Website (Design Document)

◴ 17 May 2023 | ☕ 10 mins

Github Source Code

🗨️ Overview

TaxGlobe is a website designed for Chartered Accountants (CAs) and CA students. This website allows users to share their thoughts, follow each other, and purchase software or books. This document details how the entire website was built from scratch using Laravel.

Software Stack
FrontendLivewire, TailwindCSS, AlpineJS
ServersideLaravel
DatabaseMariaDB
Versioning/ManagementGit and GitHub
Package ManagementComposer
ServerNginx
Hardware Stack
CPU1 vCPU
RAM1 GB DDR4
Storage40 GB NVME SSD
OSUbuntu 20.04

🛡️ Why this stack?

Before I start describing the application and process, Here is the reason why all the above choices in the stack were made.

đź“ť Goals and Guidelines

Before even any part of the code started I flushed out all the requirements over long calls during which I not only gave examples of how features could be implemented but actively helped Taxglobe to convey their full requirements to me. During this, I noted down all the details, and I made a proper draft of all the requirements You can take a look at the bottom of Readme.md on GitHub.

  1. Social Media: tax globe wanted a Social media experience similar to LinkedIn where you can create, share posts, and write microblogs too. You should also be able to connect to different people.
  2. Shop: TaxGLobe sells many books and software. The shop section would host these physical and virtual products. Users can purchase them and pay for them online, download/print invoices, etc.
  3. Admin Panel: This will help Taxglobe to manage and monitor the entire website activity. This includes users registering to the website, moderating posts, adding products to the shop, updating shop orders, analytics, and more.

🛠️ Architectural Strategy

Diagram1

Most of the application follows the above architecture.

  1. When a person visits the website, index.php loads the Laravel application which in turn loads the Application Router (This is handled by Laravel itself so I won’t go into detail here)

  2. For every route, there is a Component Controller Class that handles it. Router’s job is to hand over the Request to this Component Controller.

    1. You can also specify middleware that intercepts these flows, common middleware in this application was the auth middleware as the name suggests it checks whether or not the user is authenticated if not then redirects them back to the login screen
    2. Any number of middleware could be chained and for taxglobe I used a few of these throughout the application to intercept between some routes

  3. Controller Receives Request object alongside anything the URL path might consist like id, slug, etc. as a parameter.

    1. Dependency Injection provided by laravel is heavily used in this as in the controller if you specify the type of data you want to receive Laravel would construct that object and pass it to the Controller. In the following example you can see I only specified route would have a path param named post and Laravel’s Dependency Injection automatically fetches the correct post by id from the database and passes it to Component because of the type hint provided.

      # Router
Route::get('posts/{post}', SocialMedia\PostComponent::class)

# Controller
public function (Request $request, Post $post) { }

  4. The component holds the actual logic. Most of the time I needed to get some extra data from the database and transform it or just needed to render a view.

    1. Getting data or Updating data was easily handled using Models, Models a representation of data in the database as an Object form.
    2. Rather than writing frisky SQL queries Eloquent ORM was used in defining these models, alongside any relations they have to easily work with the database.
    3. To have authorization on data Laravel Guards are used.
    4. For more complex authorization needs Models can have Policies attached to them. Where middleware helps in authenticating the user, Model Policies help authorize users for action on the model, Ex User might be logged in (which is authentication) but they cannot edit someone else’s post (This is authorization).

  5. At last, the Application renders the view, which where mostly written using Laravel’s Component, or Livewire components.

    1. Laravel ia s server rendered framework which means a full page refresh is needed to act, this might not be desirable in a situation like liking the post in the n social media section. Here comes Livewire which bridges the gap and can directly call PHP code from the front end.
    2. Obviously, this is still using javascript inside of it, but that is the javascript(one less language) I do not have to write and maintain.
    3. This provides not only the benefit of having extremely fast server-rendered pages using Blade but all of them rich UI actions using Livewire to do action usually achieved using AJAX and javascript.

You can clearly see how I architected the entire application using tried and tested MVC patterns. This helped to organize the code way better than doing it from scratch.

đźšš Deployment & Maintenance

During the entire process, I maintained constant contact with the TaxGlobe team to receive feedback on the progress. The project was completed down to the smallest details and received 100% positive feedback.