The pizza-maker is a small web application created using:
- in the front-end: Bootstrap 4 and Angular 5
- in the back-end: Django 2.0 and the Django Rest Framework
The pizza-maker is meant as a simple working example of this stack.
These installation instructions work on Ubuntu.
The pizza-maker requires the following:
- Python 3 (already installed on Ubuntu)
- Django and the Django Rest Framework
Here's how to install these requirements:
sudo apt install npm sudo apt install python3-pip sudo pip3 install --upgrade django sudo pip3 install --upgrade djangorestframework
Then, clone this repository:
git clone https://github.com/marios-zindilis/pizza-maker.git
To prepare the front-end, change to the
front-end directory, and install the
cd front-end npm install
To prepare the back-end, change to the
back-end directory, create the
database, and initialize it with the sample data:
cd ../back-end ./manage.py makemigrations pizza_maker ./manage.py migrate ./manage.py loaddata fixture.json
At this point, you build the front-end into the back-end
cd ../front-end ng build --output-path ../back-end/pizza_maker/static/ --output-hashing none
Finally, you can run the application:
cd ../back-end ./manage.py runserver
You should now be able to access your application at the URL which is output
manage.py. By default that is:
The API is browsable at:
The application should work fine, but it's only a simple proof-of-concept app. Here are some ideas if you want to work on improving it:
- The "Edit" button under each pizza links to the Django admin. Perhaps you can make it disappear unless the user is logged in.
- The API has full CRUD functionality, but the application only reads from it. Perhaps you want to add features to add toppings and pizzas, edit them and delete them.
- Customize the title with https://angular.io/guide/set-document-title
- I'm using a couple of property methods on the models to resolve the foreign keys to objects. I'm pretty sure that I can do that with the Django Rest Framework, but I didn't look into it too much.
Coding for Entrepreneurs has two fantastic series of videos on Youtube, one on TypeScript and one on Angular. Both have been extremely valuable resources for me. For convenience, I created a list of these videos here.
They also have a series of videos on their website on combining Django and Angular. Half of the latter is available for free after registration (also free).
Credits for the pizza pictures:
- Margherita: https://www.flickr.com/photos/jeffreyww/14703152728
- Hawaiian: https://www.flickr.com/photos/yutakaseki/24318211034
- Vegetarian: https://www.flickr.com/photos/franciscodaum/4027043834
- Pepperoni: https://www.flickr.com/photos/ilove9and23/12992694503
- Chicken: https://www.flickr.com/photos/yutakaseki/33828862802
The pizza list design is a modified version of the Album example from the Bootstrap documentation.