The PERN stack, a blend of Postgres, Express, React, and Node.js, offers a robust framework for building a full-stack e-commerce application. In this blog, we will guide you through the setup and deployment of the PERN Store project, ensuring you can launch your own e-commerce site seamlessly.

Overview of the PERN Store

PERN Store is a full-stack e-commerce project that allows users to browse products, add them to their cart, and make purchases. The combination of these technologies provides a powerful platform for creating dynamic and interactive applications.

Getting Started with PERN Store

Cloning the Project

To get started, you’ll first want to clone the repository to your local machine. Open your terminal and run the following command:

bash  git clone https://github.com/dhatguy/PERN-Store.git

Navigating to the Project Directory

Next, navigate to the project directory:

bash  cd PERN-Store

Installing Dependencies

Install the necessary dependencies for both the server and client:

bash
npm install

cd server
npm install

cd client
npm install

Starting the Server and Client

Once all dependencies are installed, you can start your server and client:

bash
# Start the server
cd server
npm run dev

# Start the client
cd client
npm run client

Concurrent Startup

If you’d like to start both the client and server concurrently from the root directory, run:

bash
npm run dev

Running with Docker

If you prefer using Docker, ensure you have it installed, then execute the commands below:

bash
# For development
docker-compose -f docker-compose.dev.yml up

# For production
docker-compose up

After running the Docker command, open your browser and go to http://localhost:3000 to see the application in action.

Deployment of PERN Store

To deploy the project, run the following command:

bash  npm run deploy

You can refer to this guidance article for more detailed deployment instructions.

Tech Stack

• React
• Node
• Express
• Postgres
• node-postgres
• Windmill React UI
• Tailwind-CSS
• react-hot-toast
• react-Spinners
• react-helmet-async

Environment Variables

You will need to configure the following environment variables in `.env` files located in both the client and server directories:

For the client

• VITE_GOOGLE_CLIENT_ID
• VITE_GOOGLE_CLIENT_SECRET
• VITE_API_URL
• VITE_STRIPE_PUB_KEY

For the server

• POSTGRES_USER
• POSTGRES_HOST
• POSTGRES_PASSWORD
• POSTGRES_DATABASE
• POSTGRES_DATABASE_TEST
• POSTGRES_PORT
• PORT
• SECRET
• REFRESH_SECRET
• SMTP_FROM
• STRIPE_SECRET_KEY

Troubleshooting

If you encounter issues while setting up or running the PERN Store, here are some troubleshooting tips:

• Ensure all environment variables are correctly set and the format is accurate.
• Check that dependencies have been installed successfully without errors.
• If using Docker, make sure it is correctly installed and running.
• Look at the console output for any error messages that might give clues about what went wrong.

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

Contributing to the Project

If you wish to contribute to PERN Store, follow these steps:

1. Fork the Project
2. Create your Feature Branch: git checkout -b featureAmazingFeature
3. Commit your Changes: git commit -m "Add some AmazingFeature"
4. Push to the Branch: git push origin featureAmazingFeature
5. Open a Pull Request

If you have any feedback or need assistance, you can reach out to Joseph Odunsi on Twitter at [@odunsi](https://twitter.com/odunsi_) or email at odunsiolakunbi@gmail.com.

Project Link: https://github.com/dhatguy/PERN-Store

Demo Link: https://pern-store.netlify.app

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.