Vict Ecom 1: Week One

Introduction
In the realm of modern web development, the complexity and scope of building an E-Commerce platform can be quite a challenge. Recently, my friend Jesstin and I decided to tackle this problem to build our fullstack development skills while publicly blogging about the process and challenges we’ve faced. We decided on this project since it involved a multitude of moving parts and components needed for this to work properly.

Main Features
User Authentication | Product & Order Management | Data Visualization | Database Integration | Easy-to-use User Interface

Background
Although we both have sufficient knowledge when it comes to building web applications, we decided to work collaboratively so that we can focus on our specialties and build faster as a team. My expertise shines when working on frontend development whereas Jesstin is amazing when it comes to the backend. Working together also serves as a valuable exercise in team dynamics, communication, and integrating systems, preparing us for the collaborative nature of the software industry. We handle our asynchronous development by utilizing Git and GitHub as well as using branches to prevent conflicting code changes. For documentation, we decided to use Notion Teamspaces so we can easily track our changes, document bugs, and keep an eye on our progression throughout the week.

In our weekly blog updates, I will concentrate on detailing the frontend development aspects, my area of expertise, while Jesstin will cover the backend development. Check out Jesstin's insights on his blog here.

Framework
For our project, the choice of using the React framework Next.js was influenced by it’s capabilities for Server-Side Rendering (SSR) and Dynamic Routing. The SSR feature is crucial for enhancing SEO and accelerating page load times, critical factors in improving user experience. This improvement is especially needed for retaining customers and minimizing bounce rates in an e-commerce setting. Additionally, Next.js is recommended by React as a versatile framework meant for handling complex dynamic applications such as an E-Commerce platform.

Styling
For this project, I chose Tailwind as it is designed to maximize developer productivity by reducing the time and effort needed on styling elements. Unlike traditional vanilla-CSS which can become very time-consuming due to the creation of custom styles. This choice allows me to concentrate more on the project's functional aspects, accelerating development. Although during this initial stage, our main priority was to focus on functionality, setting aside my design concerns to prioritize the core mechanics of User Authentication and the basic ability to manage products.

Integration
In our development setup, the connection between frontend and backend systems is managed through Cross-Origin Resource Sharing (CORS) and HTTP requests, ensuring smooth communication across different domains/ports. This setup is crucial to overcome the common web browser security measures that, allowing our webpage to request resources from various domains. We have chosen MySQL for our backend database, which allows us to run locally on separate ports for the server and client. My approach includes HTTP requests to efficiently manage data retrieval, form submissions, and backend-related operations. The backend is crafted using Express, a Node.js framework, which simplifies the handling of routing and middleware, further optimizing the processing of HTTP requests and responses.

Day 1
Moving from the technical overview to my development narrative for this week's sprint, the journey starts with us coming to a consensus on our weekly tasks, leading to Jesstin’s creation of the GitHub repository. Once added as a collaborator, I cloned the repository to my local machine. To streamline our development process, we established two primary directories: “server” for backend code and “client” for frontend code.

Within the “client” segment, I deployed Next.js 14 and established “components” and “pages” directories to ensure a structured and orderly codebase. Given our first-week target of implementing User Authentication and basic Product Management, I decided to place everything on the index page, planning to distribute components across different pages once we confirmed client-server integration.

Day 2
The second day kicked off with me integrating Tailwind CSS via npm into the project, followed by setting up the default website padding in the _app.js file to define the main layout. From there I created a simple Navbar to prepare for adding future pages and eventually to visually display to the user whether or not they are logged in. Following this, I designed a basic Navbar, which I will use for future page additions and eventually offer a visual representation of the user's login status.

Day 3
After Jesstin committed his updates for the seller's routes and model to the server, I verified everything worked using Postman to ensure the server was receiving data correctly. With a positive response from the server, I started the client-side environment on Node at port 3000 and launched the MySQL server for backend operations on port 3001. My next task involved writing the POST request for the form data to the database. I structured the registration and login forms as separate React components, each with input fields and a submission button. For error handling, I implemented a try-catch block within the fetch request operation to log any possible errors to the console. After the successful integration of the login functionality, I documented the changes and pushed my branch. After a thorough review and merging it into the main branch, I transitioned to working on the frontend concurrently as Jesstin worked on the backend for product management.

Day 4
Given our hectic schedules, we decided to pause our joint activities and skip the phone conference for the day. I utilized the planned time to learn more about JSON Web Tokens (JWT) and explore Mozilla's documentation on Cross-Origin Resource Sharing (CORS).

Day 5
On Day 5, my task was to work on the product management component, which is made up of an input field, a table, and action buttons to modify and delete records from a specific row in the table. I also wrote out the functionalities needed for managing products including the basic CRUD actions: adding, displaying, editing, and deleting product entries. To handle form inputs, the list of products, and the editing state, I used the useState hook to define state variables such as productName, price, and the products array. To handle value updates, I included state variables like editingId, editedProductName, and editedPrice, ensuring that my component could manage the edits distinctly from the main product listing.

Day 6
On the sixth day, we determined that including the merchant_id in the POST request for product creation was necessary. This change is beneficial as it enables us to associate products with their respective merchants. Following this update to the product CRUD operations, I shifted focus to developing the storefront functionalities, specifically creating and listing storefronts owned by a merchant. After the completion of the GET and POST product requests, we paused our work for the week, allowing time for task planning and strategizing on enhancing Authentication security.

Future Plans
Our future plans include brainstorming how we will create a secure authentication framework for merchants and upcoming customers. We need to ensure data security and reliability for future users of our platform. This process also includes how we will handle updating merchant details as well as deleting merchants. The aim is that we will be able to guarantee a systematic approach to ensure the integrity of our product management system. Furthermore, the creation of detailed customer profiles will enable us to offer a more customized and engaging user experience.

Thank you for reading.