Link Sharing App

Intro

This is another challenge from Frontend Mentor. It's an application to manage your profiles from various platforms in one place and share the links with someone else. The challenge homepage can be found here.

I chose this challenge as I thought it was a good example of an app that could combine Django and React really well, but not in the more traditional headless way with a separate React frontend and a Django API. Here, only a specific view within the Django application loads React, and this allows this particular view to be highly interactive in a way that would be quite challenging using just Django and pure client side JavaScript.

This setup also allows the application to leverage all the advantages of Django where needed (such as authentication and server side rendering), but also allows for a highly interactive UI as well where required. I added a basic marketing page to further show how this particular combination can work very well - traditional React front ends can often suffer from not having a static, server rendered landing page to crawl, but this is trivial in Django.

As with the Notes App, this app uses Tailwind, SQLite and is running inside Docker on a Digital Ocean VPS under its own subdomain. The app can be found here, and the repo is here.

App Features

• Session based authentication
• Registration of new users
• Creating, editing and deleting of social platform links
• Regexes to enforce suitability of social platform links
• Drag and drop reordering of social platform links
• Live mobile preview of current profile
• Profile editing of name, email and profile picture
• Marketing page
• Publicly available and shareable social links page
• Preview of shareable social links page

App Screenshots

Database Schema

This application has a very simple database schema as it was more about the combination of Django and React than any serious data handling.