Photo by Farzad on Unsplash
Photo by Farzad on Unsplash

5 Easy steps to plan a full stack web application with django

sriram
sriram
May 29

As a web developer I know how hard it is to create a web application without planning particularly if you want to build a fullstack application. Don't worry I am with you. If you are stuck building an application with django you can either put it in the comment or contact me from instagram or e-mail. I am the founder of this website πŸ˜ƒπŸ˜„. This website is built with django, postgressql, and some APIs, free cloud storage and more. In this post I will share my experience in building this application within a month. Introduction is over πŸ˜‚ let me get into the topic. 

So without further delay let's get started

Hey hey Hey if you like darkmode click on the more icon on the left and click full screen icon to get the best experience.

1. Know what you are going to build.

Without knowing the moto, benefits that your application is going to provide you can't build a better application. Have a rough sketch of your application grab a pencil. Have a clear plan of how user's gonna benefit from it or its a fun application just go ahead . If you have a partner talk to him or if you are a single man army doing the project like me just let the ideas flow. Think the amazing features you are gonna add. Try to feel it that's where the motivation comes. Feel your end results in your heart but not in your mind. Even if the application is not a great success no problem you would've gained experience with it. I failed a lot creating this application had lots of error especially when launching to a cloud server had tough times. I worked my ass of to reach here. 

Facebook is not the first application I created.
-- Mark Zuckerberg

2. Have UI/UX design 

If you can get help from a designer go ahead or don't worry there are lots of resource on the internet to choose a design. As a web developer choosing the right  design is the tough job πŸ˜„. Here are few links to resources. 

  1. Dribbble.com
  2. ui_gradient in instagram
  3. twineuidesign in instagram

In dribbble.com you can search for designs and download them. Sometimes taking a print out might be helpful. Be sure to write down the colours they use. Sometimes designs can be found in google search.  Search some videos on Youtube about UI inspiration this will really help especially videos with background music 🎢.


3. Start creating your front end.

If you have a front end developer as a partner just leave the job to him. Else follow along

Note : you can put this step at last the reason I have given this as a third step because in my experience creating front end first helps me bringing new ideas to the application. This idea can come while you are creating UI/UX also. So it's completely your wish to do front end at the last or now. Also note that while you are working with backend you can choose to use this frontend or a simple template. If you are quite experienced with creating a good API to communicate with backend I would recommend you to use this frontend to create the working of backend instead of using a simple template because it reduces lot of time. I had done this way to create this website in 1 month.

First do the structure part with html and css. After if the page contains animation finish it. We shall see the communication with backend later so currently don't touch upon AJAX or XML. Have a separate Javascript file for those animations and a separate file for communicating with backend. If you want to call an animation while you send a request or something just call the function that triggers the animation. This ensures that when your application is scaling up it helps developers to work with animation and endpoints separately. 

NOTE : If your application is not just for practice or fun please take time creating the best possible UI. Users are gonna see the front end buddy 😎.

True πŸ˜‰πŸ˜‚πŸ€£
True πŸ˜‰πŸ˜‚πŸ€£

I have made that please no one make don't leave frontend let's see later. The first time you create give the best output. I have left some videos below on awesome animations. 


Login page animation. 

3d nav bar animation. 

If you wanna use someone work ask them telling that I will attribute or just ask them to use without attribution.

I asked True coder youtube channel for using his work for this login signup page.

 
 

4. Coming to the database part. 

I love programming in backend so much especially with django and postgressql. Oh I actually don't need to work with postgressql or any other database as django takes care πŸ€£πŸ€£πŸ˜‚. Yeah that reduces so much work. It takes care from writing queries to creating tables to protecting from SQL injection. What we actually need to do is plan the database. Planning database is also a crucial part very crucial part. You should plan accordingly with high effeciency and less storage. There should never be duplicates of information ie.. same data on more coloum . Use relationships to avoid having same data. Research as far as you could to provide the best structure to the database. I have searched a lot in Google to create the best structure to store likes data and comments data.

The fun part is I literally lost my life for creating comments section. Because the comment contains comment reply that reply contains another reply that reply contains like.

This is how I implemented comments

I have created a 2 tables with one comment and another comment reply and had a self relationship for further reply to "comment reply". The main comment had one coloum having a foreign key with blog post id and and another coloum with user id and another coloum for date. So each time a comment is added a new object is created. To implement this I have searched around 30 websites.

Watch this below video helped me a lot.


Designing and planning a database

Tools to plan database

  1. sqldbm.com (free for one project)
  2. dbdiagram.io (if you want SQL from database  or like to write SQL query to create database)
  3. dbschema ( paid + free trial )

TIP : search google the design you want for your application for example of you are creating a social media app search "database design for  likes" and "database design for  comments" etc.., . And also do a overall search "database design for social media"

5. Making the application πŸ‘¨β€πŸ’»πŸ‘¨β€πŸ’»πŸ‘¨β€πŸ’»

This is the part I like the most where we code to communicate with backend, frontend, APIs and what not.

Why I told to create the front end first ?

Ans : You could come to know all the features you are gonna add to your application. So you can create your models very clearly with  django.

 Create more functions in views.py

At the start you may feel like writing a function in views.py for a specific request to a URL with all task stuffed inside the function itself. Let's see an example if you are building a an authentication app ( talking about just an app in Django ) in that app you are creating a function for handling sign up let's say you want to clean the data like cleaning username by removing spaces, commas or anything, validating password strength etc..,  What you will likely  do in views.py is like the below code

The above code is bad because of 2 reasons 

  1. If the application scales the developers cannot work with cleaning the data and getting the data separately. It becomes a mess if you want to add features. For example you collect email and want to send verification for that email the code gets bigger and eventually it will become unmaintainable code.
  2. If you want to clean sign up data somewhere for a different request you should copy and paste the code which violates DRY principle ( Don't repeat yourself ).

How to write proper code in views.py?

  1. Create more functions with specific work.
  2. Use django's inbuilt decorators, validators etc
  3. Don't trust user data in POST. clean it accordingly before you save in database

Soon I will be posting on the topic how to code like pro in django so make sure you enable post notification in settings. I will cover topics from writing cleaner code to best practices to creating application faster with in built django decorators, validators, function etc.., Stay tuned for that ✌️.

Thug 😎
Thug 😎

Using APIs

There are lot of APIs available on the internet to make your web application more powerful for example if you want to send mail for user verification you can use Google SMTP,  For tracking users usage in your application itself you can use google analytics, for storage you can use Cloudinary, for  football scores you can use football API and more and more. Here is the list of full amazing APIs.

Using open source libraries

Try out different open source code so that you actually don't need to code the internet is filled with lots of open source codes. It's  due to developers like you and me willing to write open source codes to help community and develop their skills.

End message πŸ˜ƒ:

I thought of creating Django series from basics to using interesting APIs to hosting your application to handling error and what not. I also thought of putting post on building fun applications. In the next part I will guide you through setting the best full stack development environment with visual studio code and some extensions to increase your productivity.

Stay tuned ✌️.

If you like the post hit the like button and activate post notifications from settings so you will never miss a post. If you have any doubts be sure to put it in the comment section I am happy to help you. Thanks for reading. If you'd like to help me through donating click on the more icon > donate button to donate.

Love from Sri ram -- founder of platiplus.com

External link :-


Today's deal from platiplus

More from the author

Photo by Farzad on Unsplash

5 Easy steps to plan a full stack web application with django

Comments (1)

Add a Comment

Reply