A web application (also called a “web app”) is a software application that is accessed over the internet using a web browser. Web applications are typically built using a combination of server-side and client-side technologies.
Server-side technologies (Backend), such as PHP, Python, or Java, are used to build the back-end logic of the application and handle tasks such as storing and retrieving data from a database, processing user requests, and generating dynamic content.
Client-side technologies (Frontend), such as HTML, CSS, and JavaScript, are used to build the user interface of the application and handle tasks such as rendering the user interface, handling user input, and making requests to the server.
Web applications are accessed via a web browser, and they can be used on any device with a web browser and an internet connection, including desktop computers, laptops, tablets, and smartphones.
The cost of building a web application can vary significantly depending on a number of factors, such as the scope of the project, the complexity of the features, the number of developers working on the project, and the amount of time it takes to build.
In general, the cost of building a web application can range from a few hundred dollars to several thousand dollars or more. Factors that can influence the cost include the following:
- Scope: The more features and functionality that are included in the application, the more expensive it will be to build.
- Design: The cost of design can vary significantly depending on the complexity of the interface and the amount of custom design work required.
- Development: The cost of development will depend on the number of developers working on the project, their level of experience, and the amount of time it takes to build the application.
- Testing: Testing and quality assurance can be a significant part of the development process, and the cost of testing will depend on the complexity of the application and the amount of testing required.
- Deployment: The cost of hosting and maintaining the application once it is live can vary depending on the hosting platform and the resources needed to run the application.
It’s a good idea to get estimates from multiple developers or development agencies before deciding on a budget for your project. This will help you get a better understanding of the costs involved and ensure that you have a realistic budget in place.
Throughout my 3.5 years long career as a Software Engineer, I’ve worked on around 30 projects. Almost every single one of those was a web application.
I’ve worked with technologies like Python (Django, FastAPI, Flask), Java (Spring Boot), Ruby (Rails), PHP (Core for WordPress backend) for the backend part, and JavaScript (React, Vanilla, JQuery) for the front end part.
As a Database Management System, I’ve used PostgreSQL, Firebase, MySQL, and Elasticsearch.
I consider myself a pretty decent Software Engineer. I don’t get stuck up too long on a problem, I have a clear understanding of the business logic and I can translate it into code in pretty much no time.
I like to dive deep into coding. I may not be the best at following rules and guidelines, but I usually deliver nicely optimized solutions that do their job, and I deliver those in a pretty short time.
On one of my projects (actually my first for my first employer), I developed 70% of the backend of the app in like 7 days (it was the second or third week since I started working there). We ended up being like 3 months before the delivery date, which resulted in my employer increasing my salary by +40%.
But enough about me, because there is some artificially created developer that lives on cutting-edge infrastructure, he does not get tired and can write code in seconds. Its name is ChatGPT. I am not going to talk about ChatGPT, everyone knows it.
So, what I did was I asked ChatGPT to create me a To-Do application. The reason there is “$1000” in the title is because that is how much an intern can make (for like 6 to 10 months) in companies in my country.
And usually, if there is not a project where they can jump, we give them some simple apps to develop for the first 2 to 3 weeks after they join the company.
With that out of the way let’s see what ChatGPT did.
The Question: Can you build a simple to-do application using Django, SQLite, and React? Add code examples.
“Sure! Here is an example of how you could build a simple to-do application using Django, SQLite, and React.
First, you would need to set up your development environment by installing Django, SQLite, and React on your computer. You may also want to install a code editor such as Visual Studio Code.
Next, you would need to create a new Django project using the following command:”
django-admin startproject todo
“This will generate the basic file structure and configuration files needed for your application.
To set up the database, you will need to define the models for your to-do application using Django’s ORM (Object-Relational Mapping). For example:”
“Next, you will need to set up React. You can do this by creating a new React application using the create-react-app utility:”
“This will generate the basic file structure and configuration files needed for your front end.
To implement the to-do list, you can use React and Axios (a library for making HTTP requests) to create a simple to-do list that displays the to-do items from the API. For example:”
“Finally, you can test and deploy your application. You can test it locally by running the Django development server and the React development server. Once you…”
And there is where it stopped. I’ve regenerated the response a few times, and it never finished, stopping even earlier.
Ok, now let’s see what it did.
- Backend: Once I’ve organized the code as suggested, the first error I got was in the serializers.py file, line 2: from rest_framework import serializers. ChatGPT forgot to tell me to install djangorestframework (DRF). I’ve installed it with pip install djangorestframework. Then it forgot to add the application in the INSTALLED_APPS in the settings.py file.
After this, we need to run python manage.py makemigrations todo in order to generate migrations and after this, we need to apply those migrations. We can do that by running python manage.py migrate.
Now, we have the Todo model in the database. As you can see, ChatGPT forgot to add these commands, and they are very crucial in order to have a functioning backend.
As you can see in the views.py file, there is only one controller, and what it does is it returns a list of all Todos in the database. So, we don’t have a way to create a Todo yet.
Now, we can make some changes in the def todo_list, like making a class-based view and then inheriting from some of the DRF classes, that will allow us to perform CRUD operations with the Todo model.
But, since we want to keep the ChatGPT original code as much as possible, I will connect with the database from the command line, and I will add Todo records there.
To do that, go to the command line/terminal where you’ve activated your virtualenv, and run the python manage.py shell.
This will open the console, where we can create a Todo record.
Image1: Adding Todo records in the database
Image 2: Listing all of the Todo records
The other thing that ChatGPT forgot to do is to add an URL for the function that lists the Todos in the urls.py file. We can do that by adding the following line in the URL patterns list, path(‘api/todos/’, todo_list, name=‘todo-list’).
So, I think that that’s pretty much it. Now, let’s run the backend with the command
python manage.py runserver.
Image 3: Backend running successfully
Now we can see what the result will look like if we visit the url we’ve added for the todo_list function.
Image 4: List of Todos
2. Frontend: Now, we can check the front end. We can see that we use the Axios library. Now, that is not installed by default, so you can install it by running npm install Axios. As you can see, ChatGPT forgot to do that. After we’ve installed the app, we can go to the src folder and create a file named todolist.js. There we will add the code that ChatGPT generated.
Image 5: add the file for the code
The next step is to edit the App.js file and import the TodoList there. Once you’re done the file will look like this.
Image 6: The App.js file
The next step is to run the front, by running npm start in the command line/terminal.
After I opened the browser for the client side, there was no data. So I’ve opened the console logs, and this is what we get.
Image 7: CORS policy exception
To fix this, you can do the following in the settings.py file:
- In the INSTALLED_APPS list add ‘corseheaders’
- In the MIDDLEWARE list add: ‘corsheaders.middleware.CorsMiddleware’, and ‘django.middleware.common.CommonMiddleware’,
- In the settings.py file add CORS_ALLOW_ALL_ORIGINS = True
and CORS_ALLOW_CREDENTIALS = True variables
If there are issues with the corseheaders, then try to install it with pip install django-cors-headers
Once we do this, just refresh the client-side browser window, and this is what we get.
Image 8: Frontend lists the backend Todos
Conclusion
Ok, so I asked ChatGPT to create a $1000 web application. So, am I happy with the result? Well, yes actually. I mean it was not complete, it needed some fixes and reorganization, but the logic was there, it was correctly implemented, and saved me quite some time since it wrote the backend and the front in like 5 seconds.
Now, can it write a complete solution, so you don’t have to do anything. I don’t know, time will tell, but even something like this is super helpful. If you know what you need, It will show you the best possible solution, or at least it will give you an idea of what is the best approach.
For a free tool, it is amazing what you can achieve by using it. I would recommend everyone get familiar with the tool and use it whenever they feel unsure, or think that you need a fact check.
If you are interested in learning Computer Science for FREE, you can check some of our previous articles.
- FREE Courses from Harvard University to Become Data Scientist
- Learn How To Do K-Means Clustering On An Image
- Top 10 Machine Learning Books That You Should Read Before You Start With It
- Top 40 COMPLETELY FREE Coursera Artificial Intelligence and Computer Science Courses
Like with every post we do, we encourage you to continue learning, trying and creating.
