I've embarked on a new adventure in website development. My latest project is a site called Art & Culture, crafted for those who adore art. This platform brings the world's diverse cultures and enigmatic treasures right to your fingertips. As the name suggests, it's akin to a gallery showcasing stories from various corners. I'll share the insights I've gained from this project, the obstacles I've encountered, and the strategies I employed to overcome them.

The project source code is available here

Team members:

Mohammed Mubarak, that's me. I have been responsible for developing this project's backend and frontend components. However, my primary focus was to create a functional web application that enables an interactive viewing of artworks.

Introduction:

Our team, which is spread across two different countries, has discovered the fascinating aspects of various cultures, making it easier to agree on a focused project idea. Personally, having lived in Sudan, which was one of the largest countries in Africa, I've seen firsthand the need to enrich cultural diversity. With over 500 ethnic groups and more than 400 languages, I believe we have excellent foundational material for our application. There are many undiscovered areas that most people will never visit, so learning about them feels almost miraculous. Our app aims to bridge this gap. It relies on users to share insights about every unique place in the world, highlighting what's good and uncovering the special traits we've yet to learn about.

Tech Stack:

In this project, Flask was utilized to create the API, and Flask Swagger was employed for its documentation. The primary database used was MySQL, complemented by SQLAlchemy, a Python library that serves as an ORM tool to abstract SQL queries. For the front end, CSS, HTML, JavaScript, and JSON were used to display content on the feed page. Additionally, jQuery was integrated due to its extensive functionalities. The project was deployed to the internet using Nginx on a Linux server. Lastly, Git for version control to manage the project's codebase efficiently.

Implementing the comments, likes, and shares was an enjoyable challenge and a great learning experience. I planned to add a direct messaging feature to the project early on. Although I've been busy enhancing the app's functionality, I managed to set up the necessary database structure and API endpoints. However, I aim to use socket.io for real-time conversations. During testing, I used JavaScript's setInterval function to poll for new messages, but it's not the ideal solution due to potential lag. I'm looking for a more efficient method to achieve real-time communication without delay.

The project's technological stack was quite comprehensive. In addition to the mentioned technologies. Several other tools and technologies could have been utilized in the project's lifecycle. These may include:

• Docker containers encapsulate the application's environment for easy deployment and scaling.

• Unit testing frameworks like PyTest for Python to ensure code reliability and quality.

• JavaScript frameworks such as React or Angular for a more dynamic and responsive front-end user experience.

  Note: We opted not to use other frameworks because we wanted to dedicate our time to solidifying our understanding of JavaScript.

• Webpack or Gulp for asset bundling and task running to streamline front-end development.

• Redis or Memcached for caching frequently accessed data to improve performance.

• Amazon Web Services (AWS) or Google Cloud Platform (GCP) for cloud hosting and additional services like load balancing, storage, and more.

Incorporating those cutting-edge technologies into my future projects is a strategic move that can significantly enhance scalability, boost productivity, and streamline management.

What have I learned?

I will discuss some lessons I have learned during this project, summarized in five points:

1. Perfection is the enemy.
2. Avoid jumping between parts.
3. Utilize the power of tools.
4. One bird in hand is worth more than a hundred in the bush.
5. Sleep well and rise early.

1. Perfection is your enemy:

When I embarked on the project, I had three main components to focus on: the API, frontend, and backend, each with its significance. Initially, I thought it would be beneficial to develop the front end with mock data to visualize the project's design and functionality. However, this approach led me to spend excessive time perfecting details and adding features that were not yet functional, as well as correcting those details. This misstep resulted in an accumulation of extensive CSS files, the origins of which were unclear to me. As I progressed, I found myself wanting to alter various elements, which, upon revisiting, often meant removing many components while leaving their styles intact or substituting them with new ones. This led to a chaotic situation. I resolved to refrain from adding excessive details until I was confident that a component would be included on the page and was fully operational rather than just being a superfluous decoration. The lesson learned was to strive for perfection only after gaining a complete overview of the entire project to avoid significant rework later on.

Avoid jumping between parts:

I began with a strong start but soon found myself juggling between front-end and back-end development. At times, I would innovate on one end, and at other times, I'd introduce new features to the other. Initially, I focused on the database schema, which included artists, artworks, and their relationships. My enthusiasm for frontend development was high, leading me to design the user detail and settings pages. However, returning to the database schema, I realized I had forgotten crucial elements and began creating unplanned features, encountering errors along the way. This led me to question the necessity of certain features that weren't originally planned but were added out of a desire to see them in the front end. The key lesson here is to adhere to the plan and not stray too far to avoid losing direction. Problems can be resolved without stress if you're not preoccupied with something else. Sticking to the plan is essential.

Utilize tools powers:

When embarking on projects, it's crucial to have the right tools at your disposal and to use them effectively. Consider the scenario where someone purchases a laptop but only uses their mobile phone to complete their work, relegating the laptop to merely uploading documents or reading others'. This was akin to my initial experience with jQuery. I would open it and start writing basic JavaScript because I had no clue about its functions and capabilities. It wasn't until I observed someone else masterfully utilizing pure jQuery that I realized the extent of my missteps. I had no idea that jQuery could simplify tasks so effortlessly and logically. From that moment on, I committed to fully leveraging the tools at hand, delving into their intricacies, and understanding what they offer. This approach has saved me from reinventing the wheel for every new project.

• Here is a comparison between the javascript code and jQuery implementation:

// jQuery example
$(function() {
  $('#main-section').append(
    $('<div></div>').addClass('header').append(
      $('<p></p>').text("Header")))});

// Javascript version
document.addEventListener('DOMContentLoaded', function() {
  const mainSection = document.getElementById('main-section');
  const divElement = document.createElement('div');
  divElement.classList.add('header');
  const paragraphElement = document.createElement('p');
  paragraphElement.textContent = 'Header';
  divElement.appendChild(paragraphElement);
  mainSection.appendChild(divElement);
});

One bird in hand is worth more than a hundred in the bush:

While working on the feed page, I found myself preoccupied with the messaging feature, which caused me to overlook completing its full range of features. This distraction led me to abandon the feed page prematurely, leaving it in an unfinished and unsatisfactory state. In an attempt to refocus, I decided to remove the messaging feature entirely, allowing me to dedicate my attention to enhancing the feed page. This shift in focus resulted in a significantly improved feed page, with all functions operating flawlessly.

The lesson I've learned is that multitasking is not always possible. Focusing on one task at a time can lead to better results and greater efficiency.

Sleep well and rise early:

Enduring sleepless nights, I once believed they would eventually yield results. However, I've come to realize that the brain does not function as sharply or healthily as it does in the early morning hours. Tackling and resolving bugs late at night turned into a nightmare, filled with frustration. Remarkably, solutions often became clear upon waking the following morning. This experience taught me the unparalleled benefits of retiring and rising early; the brain operates at peak efficiency then. My challenge was the internet connectivity, which compelled me to work at night when the service improved. To circumvent this, I adjusted my schedule to sleep earlier and wake up in the last hours of the night, which proved an effective remedy for my internet woes. With reliable internet, there would be no need for late-night vigils.

At The End:

After finishing your project, it's a good idea to do a casual debrief and ask a friend for their input on your app. Encourage an open dialogue where they can express their views and emotions, which will help you see things from a different angle. You might discover what's lacking, what could be better, and what needs more focus. Also, a huge shoutout to that amazing friend who was instrumental in enhancing the mobile visual appeal of the page. I wasn't quite prepared to tackle that, but their moral support and invaluable advice transformed the landing page into something fantastic, and I'm truly grateful for their assistance💙.

GitHub:

https://github.com/mmubarak0/art-culture

Deployed project page:

https://artandculture.ki2kid.tech

Linkedin:

https://Linkedin.com/in/ki2kid