This is my solution for a coding challenge with the following instructions:
Implement a web application that allows users to store, and later retrieve, files at a specified URL.
The application should be composed of two distinct components - frontend JavaScript application, and a backend API.
The backend can be written in a Python-based web framework of your choice (Django is our preference).
The backend should act as a JSON API which provides endpoints for the frontend to upload and retrieve files.
The frontend can be written in any modern JavaScript framework of your choice (Angular is our preference).
The test solution should include clear instructions on how to build and run both components.
For my solution, I chose the instruction's desired frameworks: Angular and Django.
The backend is a simple implementation of a pyhton backend using Django framework with Authentication capabilities, using the 'Bearer token' method to keep track of authentication credentials throughout the application, and a 'File' model, containing the necessary implementations to handle uploading, listing, downloading and deleting files.
For keeping track of the files, I chose to use PostgreSQL via Docker to simplify the API setup and add robustness to it, but it can be very simply exchanged with any other DB or even SQLite for simplicity.
The API was also configured minimally for handling CORS and exposing headers, and for request pagination when listing the user's files.
Further instructions about the backend can be found in the backend's specific README file (django-backend/README.md)
The frontend was designed using Angular v19.2.3 and TypeScript, and a very simple approach of managing relevant states inside the services created and also using the browser's local storage for persistent sessions. The frontend consists of two pages, Login and Home.
The login page has the capability of handling user creation as well as logging in.
The home page has sections for uploading a new file, and a table that shows the user's uploaded files and has the actions of downloading or deleting each file. The table loads files according to the API's pagination and if more files are available, a button can be used to load more items.
Further instructions about the frontend can be found in the frontend's specific README file (angular-frontend/README.md)