Simple To-DoWebApp Development Using Python-Django-React-Docker Tech Stack

mandgenikhil/to-do-app

Hello all,

This is my first blog on medium, so please forgive me if I had any mistakes with my typo and the other aspects.

The reason behind writing this blog is to share the steps of how to build a full stack web-app using Python-Django web framework with React JS for front-end development and in the end, using Docker we can containerize the whole application into single deployment.

I know most of you will face some issues in order to understand few technical lingo’s. but ill try to make this very easy to know.

Technical Overview of Web-App

Requirements

1. Python-Django
2. Node-NPM and React JS
3. Docker
4. Docker-Compose

Steps

1. Create REST API’s Using Python-Django web framework

This is the first and initial step for developing our To-Do web-app. We need to have Python (≥3.6) along with Django(3.0.8) installed on our local machine.

Then for our web-app authentication, we have used Django, rest_framework.authtoken along with rest_auth. for more details you can refer to this GitHub repository.

After completing this setup, we need to create a model ToDo (table) for storing and having CRUD operations from front-end.

To-Do Model

Then, for developing CRUD operations, we have used the following list of API’s

1. api/v1/to_do (GET API)
2. api/v1/edit_to_do (POST API)
3. api/v1/delete_to_do (POST API)
4. api/v1/save_to_do (POST API)

As URL’s are self explanatory, each API’s are performing the required task of listing to-do’s,saving, editing and deleting.

Note:- I have integrated the rest_framework with rest_auth, so that we have our two API’s for user registration and user login.

Once the operational code changes you have added in views.py file of respective url’s view. we are good to go with our REST API’s. As I have mentioned earlier, for your reference you can go through the code details in my GitHub repository.

2. Create Front-End Using React JS

For accessing the web-app we have defined our login page, as follows.

To-Do Login Page

I have defined this login page details in my GitHub repository, please have a look. For this web page development I have used Bulma CSS and node sass.

For making an user login validation, I have used the “rest-auth/login/” REST API call, with valid inputs such as “username” and “password” from this web page.

After successful login, you will able to view the following page,

Default landing page

You can add your To-Do in the text box mentioned below and click on “save” to store the information in database. once you saved your To-Do, you will be able to view something like this,

Save To-Do

You can delete the respective To-Do by clicking small “x” icon to the right most place. Also you can edit the To-Do with clicking the edit icon to the right.Once you click on edit icon of To-Do you will be able to view the following modal.

Edit To-Do

Once you type the required text in the edit text box, after clicking save button, your changes will be reflected directly.

All these save,delete,edit,view operations are performed using REST API’s defined earlier in our Python-Django To-Do App.

The React-Js build is under “template” folder of the project, We have used the React-JS build(using “npm run build” command for creating prod ready build) as Python template for rendering it into a single Django web-app.

3. Dockerize Entire Web-App

After completing the development, our web-app is ready to be Dockerize and hosted in any environment.For that you need to create DockerFile as follows,

DockerFile

Along with that, we have used Docker-Compose in order to host the docker image in our local machine.

Docker-Compose

Once you are ready with these file changes you can run your application successfully.

I hope this will guide you for developing and setting up your web-app along with containerize using Docker.

Thank You!!!