This is an app for tracking conveyances matters for a legal firm. The app was developed using Django backend powered by Django Rest Framework and and a frontend powered by Vue JS. The live demo is available here. To use the demo app, reach out to me via email and I will send you test credentials.
This app requires the following to run:
- Django 4.0+
- Python 3.9+
- Postgres 12
- Django Rest Framework
- Django Webpack Loader
- Node 16.15.0
- npm 8.5.5
- Vue 3
- Webpack
- Webpack Bundle Tracker
- Heroku account and CLI (for deployment)
- Clone the repo by running this command
git clone [email protected]:amakarudze/conveyances.git
. - Navigate into the project root by running this command
cd conveyances
. - Create a virtualenv and activate it.
- Install pip-tools by running
pip install pip-tools
. - Install requirements by running
pip install -r requirements.txt
. - Navigate into the
frontend
folder by runningcd frontend
. - Install requirements by running
npm install
. - To be able to have hot replacement and see changes made in Vue frontend without loading the server you need to run three console windows. Run the following commands in three separate terminals.
- Open one terminal, navigate to the
frontend
folder and runnpx webpack --config webpack.config.js --watch
. This is for hot module replacement to watch for any changes made to thefrontend
app and load them in the Django app without refreshing or reloading the site. Django Bundle Tracker and Webpack Bundle Tracker handle this hot replacement for us. - Open the second terminal and navigate to the frontend folder and run
npm run serve
. This is for running the Vue app. - Open the third command, activate the virtualenv and run
python manage.py runserver
. This runs the Django web server. - Open web browser and open
http://127.0.0.1:8000
and you will see the Django app running with the Vue frontend.
- Open one terminal, navigate to the
For now the project only has backend unit tests which are run using the coverage run -m pytest
in a terminal with the virtualenv activated.
The app is deployed on Heroku. I usually deploy my apps to PythonAnywhere but since I needed to use Postgres database and PythonAnywhere does not offer Postgres database for free accounts, I had to return to Heroku after a couple of years of not using their service.
To deploy on Heroku:
- Build the frontend by running
npm run build
while in thefrontend
folder. - Navigate to your project root folder. Follow instructions for deploying Python project to Heroku up to the point of creating an app.
- Go to your Heroku dashboard and on the app's settings choose automatic deployment from Github. This will deploy your app from GitHub.
- Add environment variables for your app.
- If the app still doesn't run, open a console on your Heroku app and run the command
heroku ps:scale worker=1
to start a web worker as per instructions here.
To use the app do the following:
- Create a superuser account by running
python manage.py createsuperuser
command. - Spin up the Django webserver by running the
python manage.py runserver
command and visithttp://127.0.0.1:8000
. This should bring you to the login page. - Login with your superuser credentials and you will be able to follow through the Using the app section below.
- To test the app, reach out to me and I will email you test credentials.
- Visit https://conveyances.herokuapp.com/ and login with the credentials provided.
- Follow the instructions in the Using the app below.
After logging in, you should land at this page, which is the Dashboard
and app home, accessed by both the Dashboard
and Conveyances Matter
nav brand.
-
Adding a Bank - The first step is to add banks. This can be done either through the default Django admin or in the app itself. To do this in the app UI, just click on
Add Bank
and the screen below will appear. Enter the bank name and clickAdd
. -
Filtering Banks - Click on
View All Banks
and enter the name of bank in theSearch for bank by name
input box and either pressEnter
key or click thesearch icon
.
-
Adding a Conveyance Matter - Click on
Add Matter
and add the title, select bank, edit the relevant matter(s) you need to add by adding the client name for example for a Transfer for Jane Doe sayJane Doe - Transfer
. This is because the name field for theMatter
model has aunique
constraint. Also click on the select box in the row to indicate that the row should be saved as shown in the screenshot and then click theAdd
button. -
Updating a Conveyance Matter - While on the list of conveyance matters, click on the title of the matter you want to update and edit as necessary. If the stage is done/complete, make sure to select the check box to set it to true. Note - This process is only reversible in the admin section it was set to true by error. However you can edit the text as many times as you want. After updating the fields you wish to update, click the
Update
button to save your changes. -
Filtering/Searching Matters - You can filter by parts of title, say the name of the client or by the bank.
- Filter by name - To filter conveyance matters by title, while on the
Dashboard
, enter a few keywords that make up part of the title in the text input with the placeholder textSearch matter by title...
. The form submits byEnter
keypress or clicking on the button withsearch icon
. - Filter by bank - To filter conveyance matters by bank, enter the name of the bank in the text input with the placeholder text
Filter by bank...
. The form submits byEnter
keypresss or clicking on the button withsearch icon
.
- Filter by name - To filter conveyance matters by title, while on the
Add frontend
unit tests.