Welcome to your guide on setting up an Angular E-commerce Web App! This project serves as a fantastic way to learn the fundamentals of Angular and MySQL while developing a functioning online store. It may seem daunting at first, but don’t worry—once you get the hang of it, the process becomes enjoyable! In this blog, we will walk you through the setup process step by step and provide troubleshooting tips along the way.

Understanding the Project Structure

Think of your Angular E-commerce App as a cozy cafe. The Angular framework is like the warm and inviting atmosphere that attracts customers. MySQL is the kitchen where all the ingredients (products) are stored. The backend, built using Node.js and Express.js, acts as the waitstaff ensuring that customer orders (requests) are taken care of. Ant Design provides the elegant furniture and decor, while SwiperJS offers the smooth and enticing menu (carousel). Each component plays a critical role in creating a delightful customer experience.

Functionality Overview

• Browse the home page for diverse products.
• Check detailed product information.
• Add products to your cart with a notification indicating successful addition.
• Preview your cart at the top bar or navigate to a detailed cart page.
• Complete a multi-page checkout process and view your order history.

Getting Started

Follow these simple instructions to set up the application on your local machine:

• Clone the Git repository:

git clone https://github.com/michaelparkadze/angular-ecommerce-app.git folder-name

• Navigate into the project directory and install dependencies:

cd folder-name

cd backend

npm run install

cd..

cd client

npm run install

• After the installation is complete, run the server and client in separate terminal windows:

npm run dev // in backend

ng serve // in client

Prerequisites

Before running the app, ensure the following prerequisites are met:

• Node.js and npm should be installed on your machine.
• A MySQL server must be running for full application functionality.

Environment Variables

To configure the development environment, create a folder called ‘env’ in the root of the backend directory and set up a `development.env` file with the following content:

PORT=5000
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=
DB_NAME=myapp

Be sure to change the database variables to match your MySQL setup.

Troubleshooting Tips

If you encounter issues during the setup or while running the application, consider the following troubleshooting tips:

• Double-check that you have installed Node.js and npm correctly. You can verify their installations using `node -v` and `npm -v` commands.
• Ensure MySQL is running and you’ve entered the correct database credentials in the `.env` file.
• If you experience errors while running commands, try deleting the `node_modules` folder and reinstalling the dependencies.
• Consult the console output for error messages, which can often guide you toward the source of the problem.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Final Thoughts

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Happy coding, and enjoy building your e-commerce web app! With practice and experimentation, you’ll soon find yourself adept at combining Angular and MySQL to create seamless applications.