My Little Journey Constructing LOTUS Website!

Project Spirit and Purpose

Throughout our journey, our team embraced the spirit of ‘crafted with care, treasured with love’.

This project initially served as our portfolio project for the culmination of the ALX-SE program's foundation phase.

Inspiration and Target Audience

The idea for this project emerged from a wide range of scattered pieces of art in our minds, inspired by the great attention to both art and culture. Many people may not know that artisans in Upper Egypt create masterpieces and unique handmade luxurious items. The big problem was that these artisans had only one yearly chance at a festival to showcase their products, primarily to a local audience.

From an artistic point of view, we believed these products deserved to be shown to the whole world and to people who truly appreciate the dedication, skill, and effort involved. Artisans across Egypt might face similar challenges in showcasing their work.

Our platform is designed for these artisans, especially those in Upper Egypt. We also target customers who are interested in and appreciate this kind of art.

Team Members

My team consists of two other developers in addition to myself.

Aya Anwar was responsible for the backend, especially database management and all related functionalities.

Sabah Ahmed primarily focused on frontend development, dedicating time and effort to building the user interface.

Hagar Samy (me😌). I was responsible for the backend, particularly the API and connected functionalities.

After documenting the API at the beginning, I started coding. This was a completely different experience for me as it was my first time being entirely responsible for such a task. When I began coding, I realized there were many endpoints I hadn’t initially considered. I frequently updated the API and routes documentation, which benefited both me and my teammates, especially Sabah, the frontend developer.

We faced many challenges throughout the project, but we were accustomed to encountering difficulties and tackling hard tasks. I also needed to learn many new things during the process, which deepened my understanding of previously acquired knowledge.

Timeline

We started this project about eight weeks ago. The first step was finding an idea, followed by an organized process of strategic planning.

For week 1, we held multiple meetings to agree on an idea. After that, we outlined the main points, stating the idea, assigning roles to each team member, and deciding on the technologies to use.

For week 2, we formed the Lotus MVP specification. This included a detailed description of:

• Architecture
• API Documentation and Methods
• Data Model
• User stories
• Mockups

These elements were kept simple, as we imagined our website to be. We developed and enhanced things later on.

For more details, check this.

For week 3, we agreed on the platforms to use and organize the work. We tried Trello, but it wasn’t very beneficial to us. For meetings and communication, we mainly used WhatsApp, Zoom, and Discord.

At this point, everything was clear enough for us to start coding, so we began immediately.

Throughout weeks 4, 5, and 6 we continued to work and enhance the project. Aya and I focused on the backend. Aya managed the database generation and management, while I started constructing our API. Meanwhile, Sabah worked on beautifying the frontend to ensure a user-friendly interface and a unique, lifelong experience.

A Story About Me Which Relates to Why I Chose to Work on This Project

This project was agreed upon by all of us. We all liked the idea, which was positively reflected in our dedication, time, and effort. I enjoyed working on this website a lot. Although I’m not one of these artisans, I appreciate the effort they exert and the passion that drives them to work with love and care.

I do some art as well, though not crafted hand-products, but still, some kind of art. This gives me insight into the creative process and the emotion and patience it requires. As a customer, I appreciate these unique pieces. A unique piece made just for you is priceless! If you’ve ever created or received one, you understand this feeling.

I hope that through this project, the effort and work of these artisans are appreciated enough and that customers can easily find what they are looking for.

Architecture

This is the process flow when a user tries to register:

1. The user fills in the required data (name, email, password), ensuring they are valid entries.

   
   

2. If the entries are valid, an activation link is sent via email.

   
   

3. Once the user clicks the activation link, their account is activated, and they are forwarded to log in.

You can view our updated simple architecture diagram here if you'd like to take a closer look.

When the user logs in, they can access the u عنهser dashboard. From there, they can enjoy shopping and place orders. Inside the cart, the user can proceed to checkout to confirm an order. After confirming the order, an email is sent to them with a confirmation message.

Technologies

For the backend, we used Python, Flask, MySQL, SQLAlchemy, Swagger, and several other libraries and modules. Our primary focus was on Python and Flask to deepen our understanding of the concepts we’ve been studying. The project required us to learn new things, but we emphasized technologies we hadn’t practiced much before.

For the front end, we utilized HTML, CSS, Bootstrap, and React. We also integrated additional technologies to enhance the user experience.

Features

The are many crucial features on the website, but I’ll be mentioning only 3 of these.

Feature 1: User Registration and Authentication

Our website allows users to create an account securely.

Once registered, users receive a confirmation email. It also serves for activation. After confirming their email and activating the account, they can log in using their credentials. Upon logging in, users can explore products and shop.

Feature 2: Product Display

Products are displayed on the platform.

Currently, we have a sample set of products to showcase how artisans' work can be presented. Each product includes a detailed description and images, providing a clear view of what’s available. These products are uploaded by admins, but a future update will allow artisans to upload their work independently.

Each product listing includes:

• A clear image
• The product’s name
• The artisan who made the piece
• The price
• The stock level
• A detailed description

Feature 3: Cart and Order Confirmation

The cart and order confirmation process is straightforward. Once a user adds items to their cart, they can proceed to checkout. After confirming the order, an email is sent to confirm the purchase. Currently, this email does not include order details, and payment handling is not yet integrated.

Technical Challenges

This project was challenging for me as it was my first time working on a real-world application. As mentioned earlier, I wanted to solidify my understanding of the knowledge and concepts I had learned. I aimed to apply everything I knew to a real application. Additionally, there were new things to learn as well.

For example, securing user sessions requires creating a unique token for each user and session. Initially, I had never heard of this and didn’t know how to approach it. With a little research and consulting peers, I learned about JWT tokens. I successfully installed the library but didn’t fully understand how to use the tokens or what data they should include.

To overcome this challenge, I broke the problem down into smaller steps. I read several tutorials to understand the basics of token generation and validation.

Then, I experimented with generating tokens in a test environment, gradually incorporating more complex data into the payload. I also sought advice from more experienced developers, who provided valuable insights into best practices for token security.

Through persistence and continuous learning, I eventually understood how to generate tokens with the necessary payload data and validate them for a specific period. I also implemented additional security measures, such as token expiration and refresh mechanisms, to enhance the overall security of user sessions.

This was one of the most difficult challenges I faced. Other challenges were similar, involving new tools and techniques I was learning for the first time. By breaking down problems, seeking help, and continuously experimenting, I was able to overcome these challenges and grow as a developer.

Takeaways

Throughout this project, I deepened my understanding of the technologies I utilized, allowing me to work more confidently with them. Specifically, I gained new insights into JWT tokens, Flask-Mail, APIs, Flask-Swagger and Swagger, dotenv and configuration.

One significant lesson was the importance of timely collaboration. I've learned that asking for help early can save considerable time and effort, balancing independence with knowing when to seek assistance.

Working collaboratively with my team was unexpectedly productive and enjoyable. I now appreciate the value of teamwork and how much more I can learn compared to working alone. This experience has also heightened my interest in databases and SQLAlchemy, and I've been motivated to deepen my understanding of APIs, reinforcing my decision to specialize in backend.

About Me

I am passionate about leveraging technology to solve real-world problems and am dedicated to continuous learning, improvement and doing hard things. You can find more about me and my projects on GitHub, visit the project’s landing page here, and connect with me on LinkedIn.