In the world of freelancing, taking on new projects often presents exciting opportunities for growth and learning. Recently, I had the chance to embark on a project that involved developing an analytical web application using Dash, a Python-based framework. Although it was initially unfamiliar territory for me, I had a solid foundation in HTML, CSS, and Bootstrap, which served as a valuable base for working with this framework. Additionally, my prior experience with ReactJS allowed me to apply various patterns and strategies that I had acquired along the way. Little did I know that the project would become a journey of discovery, aided by Dash’s documentation and the invaluable assistance of ChatGPT, which played a crucial role in its successful completion.
🔎 Learning Dash with ChatGPT’s Assistance:
As I began my foray into the world of Dash, I was tasked with creating a static frontend with a few interactive elements such as toggling areas and creating modals. However, I quickly realized that Dash employed a different approach to event handling and UI updates compared to what I was familiar with in React and JavaScript. This is where ChatGPT stepped in as my trusty companion. With its help, I received examples, solutions, and guidance that aided my understanding of how Dash works. I delved into Dash’s documentation, complemented by the insights shared by ChatGPT, to overcome the initial hurdles and gain a solid grasp of the framework.
💡 Integrating Frontend with the Backend API:
As the project progressed, a new milestone emerged – integrating the frontend with the backend API. This phase required me to explore Dash even further and delve into writing code that was not only efficient but also easy to maintain.
Refactoring the code and organizing it into separate functions and files proved to be a game-changer. Dash, much like React, involves numerous nested function calls, albeit without JSX. Thankfully, the principles I had learned from the book “Clean Code” came to my rescue. Armed with a newfound understanding of clean coding practices, I was able to write cleaner, more organized code that enhanced the project’s overall structure and readability.
📃 Snippet from Dash code
dcc.Loading(
id="loading",
type="default",
children=[
html.H3(
className="text-center mb-2",
children="Edit Profile" if editUser else "Register",
),
dbc.Card(
className="p-3",
children=[
dbc.InputGroup(
children=[
dbc.InputGroupText("First name"),
dbc.Input(
type="text",
placeholder="enter first name",
id=flag + "-first-name",
),
dbc.InputGroupText("Last name"),
dbc.Input(
type="text",
placeholder="enter last name",
id=flag + "-last-name",
),
],
className="mb-3",
),
dbc.InputGroup(
children=[
dbc.Input(
type="email",
placeholder="enter email",
id=flag + "-email",
disabled=editUser,
),
dbc.InputGroupText("@example.com"),
],
className="mb-3",
),
dbc.InputGroup(
children=[
dbc.InputGroupText("Password"),
dbc.Input(
type="password",
disabled=editUser,
placeholder="enter password",
id=flag + "-password",
),
],
className="mb-3",
),
dbc.InputGroup(
children=[
dbc.InputGroupText("Role"),
dbc.Select(
id=flag + "-role",
options=[
{"label": "Admin", "value": "admin"},
{"label": "User", "value": "user"},
],
value="user",
disabled=True,
),
],
className="mb-3",
),
dbc.Button(
"Submit",
style={"background": grey},
className="text-white",
id=flag + "-submit-button",
n_clicks=0,
),
html.Div(id=flag + "-output-message"),
],
),
],
)
⚒️ Applying Dash Tools and Overcoming Challenges:
Using Dash’s powerful tools was one thing, but effectively applying them required experience, practice, and critical thinking. There were times when I encountered specific challenges that demanded creative solutions. It was during such moments that ChatGPT became an invaluable resource. For instance, I struggled with storing a JWT token in the browser’s local storage, as Dash didn’t provide a direct method for it. Through a combination of consulting the documentation and leveraging ChatGPT’s insights, I discovered patterns and approaches that helped me overcome this hurdle. ChatGPT’s assistance proved to be a valuable asset in my problem-solving toolkit.
🧑🏭 Perseverance in Problem-solving:
I have often encountered situations where I faced seemingly unsolvable problems that left me feeling stuck. In such instances, my mindset and psychology would typically lead me to give up easily if it were a personal or learning project. However, due to my commitments to clients and project requirements, I was compelled to find a solution. This challenge drove me to the brink of frustration but also motivated me to tackle the problem again the following day.
📦 Navigating the Backend with MySQL:
While Dash took center stage for the frontend, the project’s backend relied on MySQL as the database. However, I found myself facing yet another hurdle. Although I had encountered MySQL during my 12th-grade studies, much of that knowledge had faded over time. Basic queries like adding new fields into a table or deleting entries proved to be a stumbling block. I turned to Google Bard and gradually regained my familiarity with MySQL and successfully navigated the backend requirements of the project.
🌟 Conclusion:
Undertaking a freelancing project that involved Dash was undoubtedly a challenging yet immensely rewarding experience. Through the journey of developing an analytical web application, I not only expanded my knowledge of web frameworks but also sharpened my problem-solving skills.