Welcome to our guide on building a modern e-commerce application leveraging the power of microservices architecture with Spring Boot and ReactJS. This article will take you through the setup and features of our application, ensuring you have everything you need to get started!

Key Features of the Application

• Google OAuth 2.0 support for quick login.
• Regular Username/Password authentication.
• Search bar with suggestions for easy product discovery.
• Stores user information in a MySQL database.
• API data caching with Redis to minimize network calls.
• Product filtering and sorting options.
• Responsive design for all devices.
• Payment processing using Stripe’s API.

Technologies Used

This project utilizes an array of powerful tools:

• ReactJS: A versatile front-end JavaScript framework.
• Spring Boot 2.0: Backend framework for building microservices.
• Material-UI: For a responsive website design.
• Semantic-UI: Additional components not supported by Material-UI.
• MySQL: Database for storing product and user information.
• Redis: For fast API data retrieval with key-value pairs.
• Cloudinary: CDN for managing product images.
• Heroku: For deploying microservices in the cloud.
• Docker-Compose: Simplifies application management in containerized environments.

Understanding the Microservices Architecture

Imagine you’re a chef in a large restaurant. Each section of the kitchen specializes in different aspects of meal preparation. Similarly, our application is divided into microservices, each with its own focused responsibility:

• React-UI Service: The front-facing interface where users interact with the application.
• Common Data Service: Provides essential data like products and orders to other services.
• Authentication Service: Manages user accounts and their authentication.
• Payment Service: Handles payment requests through the Stripe API.
• Search Suggestion Service: Offers search tips based on user input and stored data.

Steps to Execute the Application Using Docker-Compose

1. Clone the repository.
2. Rename the file .env-sample to .env and set required environmental variables.
3. To test payment functionality, create a Stripe account and a Google OAuth credentials. (This is optional, as the application can run without these features.)
4. Execute .start-all.sh to build and run all microservices.
5. If you make changes to the code, use .stop-all.sh to clean up the generated artifacts.

Deploying on Heroku

1. Create heroku.yml since docker-compose.yml isn’t used on Heroku.
2. Install a database from the Heroku marketplace. Remember, you’ll need to add credit or debit card information for installation.
3. Set the config vars based on your database URL.
4. Set the stack using heroku stack:set container -a application-name.
5. Deploy individual services on Heroku using the provided commands.

Troubleshooting

If you run into issues while deploying or running the application, consider the following solutions:

• Ensure that all environmental variables are correctly set in the .env file.
• Make sure your database configuration is correctly authenticated on Heroku.
• Check connection to Redis and MySQL databases to ensure they are running smoothly.
• If you’re using Docker, verify that Docker is properly installed and running on your machine.
• If the application is not responding, remember that it’s deployed on a free Heroku dyno, meaning it might go to sleep if not used recently.

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

Conclusion

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.