Web app to host affiliate programs

This is an unfinished project.

It was intended to be an affiliate program management tool. A company would be able to launch an affiliate program using this service, which would in turn generate affiliate links for partners, track clicks, track conversions and feature automated payouts. The project proved to be too complex for me to develop on my own.

Tech Stack

• Django, DRF
• React, React Router, ShadcnUI
• PostgreSQL
• Celery, RabbitMQ
• Docker
• mkcert

What I managed to implement

• Most of the backend logic that handles the affiliate link clicks, conversions, payout calculation, etc.
• A backend that tracks clicks on affiliate links.
• A JS frontend pixel for tracking user actions and conversions.
• A simple JWT authentication system on the backend.
• Developed from scratch a routing and refresh/access authentication layer on the frontend using React features.
• A dev environment nearly identical to production. The docker-compose file and nginx.conf are carefully configured to create a prod-like environment (e.g. the project uses mkcert, meaning even in dev, all web resources are accessed through https://p.local instead of http://localhost to account both for SSL and 2+ level domains in dev, which avoids, for example, issues with cookies between dev and prod).

Frontend demo

This is a fully functional dashboard. All elements in the picture are usable:

Fully functional login page:

Authentication flow

• A new user enters their email address.
• An email is sent to that address containing an activation link (with a JWT in a query param).
• Once the account is activated via this link, (or an existing user logs in via the login page), the server:
  • sets a refresh token in an HTTP-only cookie,
  • sends an access token with its expiration timestamp in the response body. The expiration timestamp is used to schedule a hit to the refresh endpoint a few seconds before expiration. Both of these fields are stored in an app-wide Auth React Context.
• Routes are protected on the frontend using React Router.
  • If a user tries to access a protected route without an access token in Auth, they will get redirected to the login page.
  • If an access token errors or is expired, the refresh endpoint is called (with the refresh token in the HTTP-only cookie). If the server responds saying the refresh is expired, the user is redirected to the login page. Otherwise, the Auth context is updated with the newly received access token data.

Run locally

The project wasn't meant for others to use so this process may be somewhat cumbersome.

• Edit /etc/hosts to resolve p.local into 127.0.0.1.
• Set up mkcert:
  • Install package: sudo apt install mkcert.
  • Install the CA in you system mkcert -install.
  • Go to your web browser of choice for development and add mkcert as a trusted certificate authority. To find where you mkcert certificate root file is, run mkcert -CAROOT.
  • In ~/.mkcert, run mkcert p.local *.p.local google.p.local apple.p.local localhost 127.0.0.1 (apple and google are there to test with subdomains like apple.p.local).
  • Go to src/docker-compose.yaml and under nginx.volumes edit the 2 volume mount paths that reference the files the previous step generated. They must be absolute paths referencing your equivalent of ~/.mkcert/....
• cd src
• Set up the infrastructure: docker compose up -d.
• Test it works by going to https://p.local/login or https://p.local/dashboard in the web browser you added mkcert.