SellDaily AI：從全端開發到 Docker 部署

Introduction

Building a software application involves more than writing code. It requires identifying a problem, designing a solution, choosing the right technologies, and making sure everything works together.

I have been working on SellDaily AI, a business management application designed to help businesses organize their products, manage customers, track sales, and handle everyday business activities.

The project has given me an opportunity to work across frontend development, backend development, API integration, and application deployment.

In this article, I'll share how I approached building SellDaily AI, the technologies behind it, some of the challenges I encountered, and my experience using Docker to package and run the application.

This is also part of my continuous learning journey towards becoming a Cloud and DevOps Engineer.

Step 1: Understanding SellDaily AI

Before getting into the technical implementation, it is important to understand what SellDaily AI is and what it is designed to achieve.

SellDaily AI is a business management application designed to help business owners organize their products, manage customers, track sales, and oversee important daily business activities.

The idea behind the project is to bring essential business management features together in one application while exploring how artificial intelligence can support business operations.

The project also provided an opportunity for me to work on a complete application rather than focusing only on the frontend.

I wanted to understand how the different parts of an application connect, from the user interface to backend services, APIs, data storage, and deployment.

Key areas of the application include:

• Product and inventory management.
• Customer management.
• Sales-related functionality.
• Business dashboard and analytics.
• AI-powered business assistance.

The following screenshot shows the actual SellDaily AI application interface.

Screenshot 1: SellDaily AI Dashboard

Step 2: Technologies and Tools Used

Building SellDaily AI involved working with several technologies across frontend development, backend development, database management, artificial intelligence, and application deployment.

Each technology plays a specific role in making the application functional.

Here are some of the main technologies used in the project:

1. React

Used to build the application's user interface and reusable components.

2. TypeScript

Used to improve code quality, introduce type safety, and make the application easier to maintain.

3. Vite

Used as the frontend development and build tool.

4. Node.js

Provides the JavaScript runtime for the backend.

5. Express.js

Handles backend routes and API requests.

6. Firebase

Used for application services such as authentication and data storage.

7. Google Gemini

Integrated to support AI-powered functionality.

8. Docker

Used to package the application and its dependencies into a container for consistent execution.

Working with these technologies helped me understand how different tools work together to deliver a complete full-stack application.

Step 3: Frontend Development

The frontend is an important part of SellDaily AI because it provides the interface through which users interact with the application.

I used React and TypeScript to develop the frontend, with Vite providing the development environment and production build process.

During development, I focused on creating an organized and user-friendly interface that makes it easier to navigate the application's different features.

The frontend connects with the backend through API requests, allowing users to interact with application data and business management functionality.

Working on this part of the project helped me gain more practical experience with React components, application structure, TypeScript, and frontend-to-backend communication.

Step 4: Backend Development and API Integration

After working on the frontend, the next important part of the project was the backend.

For SellDaily AI, I used Node.js and Express.js to build the backend server and handle communication between the frontend and backend services.

The backend is responsible for processing API requests, handling application logic, and returning responses to the frontend.

I also worked with API endpoints to support different application features, including business information, product management, and application health checks.

One important aspect of this process was ensuring that the frontend could communicate correctly with the backend.

This helped me understand how backend services support frontend functionality and why reliable API communication is essential in full-stack development.

Step 5: Database and Application Data

Managing application data is an important part of building a full-stack application. An application needs a way to organize, store, and retrieve information when users interact with its features.

During the development of SellDaily AI, I worked on the backend functionality responsible for handling business information and product data.

The backend provides API endpoints through which the application can request and manage this information.

For example, the product functionality allows the application to handle product-related information, while the business functionality supports business-related data.

Working on this part of the project helped me understand the importance of data management and how the backend connects application functionality with the information users need.

It also gave me practical experience in understanding how data flows between the frontend and backend in a full-stack application.

Step 6: Docker Containerisation

After developing the frontend and backend functionality, the next stage was preparing SellDaily AI for deployment.

I used Docker to package the application and its required dependencies into a container.

Docker helps ensure that an application runs in a consistent environment, reducing differences between development and deployment environments.

I created a Dockerfile containing the instructions required to build the application image.

I also used Docker to build and run a container for SellDaily AI, making it easier to manage the application as a deployable service.

This stage helped me gain practical experience with containerization, Docker images, containers, port mapping, and application deployment.

It also helped me understand how containerization fits into modern Cloud and DevOps workflows.

Step 7: Running and Testing the Application

After building the Docker image and starting the container, I tested the application to confirm that it was running correctly.

I used Docker commands to check the container status and verify that the application was accessible through the mapped port.

The container was running successfully, with port 3000 mapped between the Docker container and my local machine.

I then opened the application in my browser using http://127.0.0.1:3000/ and confirmed that the SellDaily AI interface loaded successfully.

This testing process helped me understand how to verify a running container, check port mapping, and confirm that an application is accessible after deployment.

Step 8: Challenges and Troubleshooting

During the development and deployment of SellDaily AI, I encountered some challenges that required investigation and troubleshooting.

One of the issues occurred during deployment when the application attempted to use a port that was already occupied by the platform's reverse proxy.

This resulted in an EADDRINUSE error, which prevented the server from starting successfully.

To resolve the issue, I investigated how the application was reading its port configuration and adjusted the server to use the appropriate port provided by the deployment environment.

I also encountered challenges getting Docker Desktop running locally. I investigated the Docker engine status and restarted the required services before successfully starting my existing SellDaily AI container.

These experiences helped me understand the importance of reading error messages, checking application configuration, investigating port conflicts, and verifying that services are running correctly.

They also reinforced the importance of troubleshooting systematically rather than making random changes.

Step 9: Lessons Learned and What's Next

Building SellDaily AI has been a valuable learning experience because it allowed me to work on different areas of software development.

Some of the key lessons I gained include:

• Full-stack development: Understanding how frontend and backend components communicate through APIs.
• Backend development: Working with Node.js, Express.js, and API endpoints to handle application requests.
• Application data management: Learning how business profiles and product information are handled by backend services.
• Docker: Understanding how to build Docker images, start containers, and map application ports.
• Troubleshooting: Learning how to investigate server errors, resolve port conflicts, and check whether services are running correctly.

There is still room to improve SellDaily AI. Future improvements will include strengthening data persistence, expanding application functionality, improving security, and exploring more advanced deployment workflows.

I also plan to continue developing my knowledge of cloud infrastructure, containerization, and DevOps practices.

Conclusion

Building SellDaily AI has given me practical experience in developing and deploying a full-stack application.

Throughout the project, I worked with frontend technologies, backend services, API integration, application data management, and Docker containerisation.

One of the most valuable parts of this journey was learning how different components work together to deliver a functioning application. I also gained practical experience troubleshooting deployment issues and running an application inside a Docker container.

This project is another step in my journey towards becoming a Cloud and DevOps Engineer.

I look forward to improving SellDaily AI, exploring cloud deployment technologies, and applying what I have learned to more real-world projects.

Thank you for reading!