Week #2 #

Week 2 - Choosing the Tech Stack, Designing the Architecture #

Tech Stack Selection

• After evaluating various options, we’ve chosen the following technologies for our project:
  • Frontend: React.js for dynamic and responsive user interface.
  • Backend: Python Django for server-side logic.
  • Database: We decided to use default Django database which uses SQLite.

Architecture Design

1. Component Breakdown:

• Frontend - provides interactive pages for users to view and interact with product listings, wishlist items etc. It manages navigation, form submissions, and other user actions.

• Backend - Handles user authentication, and manages product inventory. Also it provides data to the frontend and handles incoming requests.

• Database - Manages all persistent data such as vendor information, product details, vendor contacts etc.

2. Data Management:

• All data will be stored using SQLite which is the default for the django. Moreover, Django uses Object-Relational Model(ORM) which allows to work with databases using python code instead of SQL. The following database schema is used in the current version of the project:

3. User Interface (UI) Design:

• Built with React.js, it offers an interface for users to navigate and interact with the system. The interactive protoype with some functionality of the website can be found here. Preview of the prototype:

4. Integration and APIs:

• For now, we are not planning to use any external API’s or integrations. The only API’s we are using are the ones provided by our own backend. Our backend service provides API’s which are later used by the frontend side to list products, or retrieve an item info. Moreover, we are planning to implement authorization system.

5. Scalability and Performance:

• For the current version, we are assuming that only one user will use the system, but for the future, we are planning to make it asyncronous.

6. Security and Privacy:

• Django framework already has built-in protection against most types of attacks. Also, Django provides an option of having a superuser in the project, meaning you can restrict access.

7. Error Handling and Resilience:

• In our project, error handling mechanisms are implemented to provide meaningful feedback to users in case of unexpected scenarios, for example when someone is trying to access nonexisting item. Also, we are planning to add a logging mechanism to diagnose issues quickly.

8. Deployment and DevOps:

• We are planning to use docker-compose to ensure consistency and reliablity accross different environemnts. For now it is planned to be consisting of 2 services - frontend and backend. If there will be time left, we are planning to migrate to PosgreSQL to optimize our queries.

Week 2 Questionnaire: #

• Tech Stack Resources:
  • Our team prefers online courses/tutorials rather than books.
• Mentorship Support:
  • Currently we do not have any mentor involved in our project.
• Exploring Alternative Resources:
  • Django documentation - it provides very useful guides and tutorials.
  • Youtube - huge amounts of tutorials on what we need.
  • Blogposts - blogs of people creating simple projects using the same or similar stack as we do.
  • LLM’s - ChatGPT or Gemini are good at explaining library documentation, so if someting is not clear, LLM’s can help you to get better insights.
• Identifying Knowledge Gaps:
  • Django - we are not experienced enough to utilize the advanced features of this framework. We will need some time to deepen our understanding about.
  • Frontend to Backend communication - out teams lacks experience in establishing efficient communication between frontend and backend. To overcome this we will explore best practices for designing APIs using Django. and improve our knowledge of integrating frontend frameworks like React.js with Django.
• Engaging with the Tech Community:
  • We have not yet engaged with a tech community or tech forum. But if necessary, we can always ask questions in online forums like stackoverflow, quora, reddit.
• Learning Objectives:
  • Become proficient in Django, focus on mastering its capabilities for efficient data management, robust API development, and secure backend operations.
  • Improve ability to integrate React.js with Django correctly. This involves improving skills in handling data synchronization and ensuring correct communication between frontend and backend components.
  • Improving frontend development skills, including proficiency in React.js, to be able to develop robust frontend components.
• Sharing Knowledge with Peers:
  • We have a telegram group chat to where we also send the links with materials which we think can help us with the project.
• Leveraging AI:
  • We use ChatGPT and Gemini to quickly access the documentations, and to write repetitive code (for example writing a script to add initial entries to the database, to do some testing).

Tech Stack and Team Allocation #

Because many of our members are backend developers, we have thought of an idea to distribute endpoints between them, meaning everyone gets to write a code for 1-2 endpoints.

Weekly Progress Report #

• During this week, our team finalized the tech stack, designed the initial architecture for backend, created a responsive prototype, and created an organized project structure. We developed an API to get a list of products with filters like category, sort by, and price range. Additionally, we made an API to retrieve details about a specific product. In this week, we have made a significant progress in addressing initial knowledge gaps. By focusing on practice, and using the resources provide in the internet, we are constantly learning something new.

Challenges & Solutions #

• Challenge: Ensuring correct communation between frontend and backend.
  • Solution: At first we had errors when we tried to map API response in React.js, but we were able to solve it by adding extra if statement, which check whether the response is undefined or no.
• Challenge: Having clean directory structure.
  • Solution: We adopted a well-defined directory structure based on best practices, categorizing all components into clear sections:

Conclusions & Next Steps #

• We were able to successfully implement several backend endpoints, which we think were the most complex ones in the project. Now we will focus on how to correctly utilize them in the frontend part of the website. Moreover, if everything goes smoothly we will think of a new features which could potentially be added to the website.