Welcome to the world of full-stack development! In this tutorial, we will be discussing how to create a shopping cart application using the MERN stack, which integrates MongoDB, Express, React, and Node.js. This guide is designed to help you navigate through the setup and use of the app, ensuring you have a seamless experience building your project.

Intro

This shopping cart project is a learning example that I started while mastering the technologies involved. Although I’ve improved the code over the years, it still isn’t perfect and can be enhanced further. Think of it as an educational tool, rather than a production-ready application.

Description

The shopping cart app leverages the MERN stack and follows RESTful API design principles. The visually appealing front end is crafted using Material-UI, while Redux handles the state management. The back-end setup involves Node.js and Express for API development, and MongoDB is utilized as the database. The entire application runs within Docker containers, but individual components can also be run separately if desired.

Key Features

• View the list of products from an API
• User registration
• Add products to the cart
• Remove specific products or clear the cart
• Make orders

Technologies Used

Front-end Tools

• React
• Redux
• Redux-Saga
• Material-UI
• Webpack
• TypeScript

Back-end Tools

• Node.js
• Express
• MongoDB
• Mongoose

Installation and Usage

Requirements

• Docker
• Node.js (for non-Docker setups)
• MongoDB connection (for non-Docker setups)

Steps to Set Up Your Shopping Cart App

1. Clone the repository to your local machine with the following command:

$ git clone https://github.com/ivan3123708/fullstack-shopping-cart.git

2. Navigate to the cloned directory and run Docker Compose:

$ cd fullstack-shopping-cart
$ docker-compose up -d

3. If everything goes smoothly, you can access the running app at localhost:3000. Here’s what each container runs on:
   • Frontend container (React app): port 3000
   • Backend container (Node API): port 5000
   • Database container (MongoDB server): port 27017
4. If you encounter any issues, use the command docker exec -it container_name bash to troubleshoot the container.

Troubleshooting

Running into trouble is part of the learning process! Here are some common issues and solutions:

• Problem: Unable to Connect to MongoDB
  Ensure that your MongoDB is running and correctly configured in the Docker container.
• Problem: React App Not Loading
  Check the console for errors and ensure that you’re navigating to the correct local address.
• Problem: API Not Working
  Make sure your backend container is running properly and check the logs for any errors. Utilize the Docker terminal to execute commands for further debugging.

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

Conclusion

Congratulations! You’ve taken your first steps toward building a robust shopping cart application using the MERN stack. Remember, the best way to learn is by making improvements and experimenting with your code.

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.