Thanks for purchasing Petstore Template Application

Please read the documentation carefully, and if you have any questions, please feel free to contact us. Most pages are accompanied by a video tutorial, it's recommended to check both, the video and the written Documentation.

Must Read this:

After purchase, to get Download Petstore Template project Zip
it is suggested to setup the Petstore Template Project by following these steps:

• Download the Petstore Template project Zip
• Extract the Zip
• Open the frontend folder in VS Code to run the Vite-based React project

To start this project, you need VS Code for your platform (Windows, macOS, and Linux).

• https://code.visualstudio.com/download

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS, and Linux. It comes with built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages and runtimes (such as C++, C#, Java, Python, PHP, Go, .NET). Begin your journey with VS Code.

In order to start configuration, you need to install Node.js and NPM. First download Node.js and NPM from here Node and NPM

First, you need to download the Windows Installer (.msi) file from the official Node.js website. This MSI installer database carries a collection of installer files essential to install, update, or modify the existing Node.js version. For more information, visit https://kinsta.com/blog/how-to-install-node-js/

Notably, the installer also carries the Node.js package manager (npm) within it. It means you don’t need to install npm separately.

When downloading, select the correct version as per your operating system. For example, if you’re using a 64-bit operating system, download the 64-bit version, and if you’re using the 32-bit version, download the 32-bit version.

Once you open and run the .msi file, the installation process begins. But you have to set a few parameters before running the installation process.

• Double-click on the installer file and run it. The installer will ask you to accept the Node.js license agreement. To move forward, check the “I accept” box and click Next.
• Then, select the destination where you want to install Node.js. If you don’t want to change the directory, go with the Windows default location and click the Next button again.
• The next screen will show you custom setup options. If you want a standard installation with the Node.js default features, click the Next button. Otherwise, you can select your specific elements from the icons in the tree before clicking Next.
• Node.js offers you options to install tools for native modules. If you’re interested in these, click the checkbox to mark your preferences, or click Next to move forward with the default.
• Lastly, click the Install button to begin the installation process.

Once the installation process is completed, you have to check whether Node.js is successfully installed or not.

• To verify the installation and confirm whether the correct version was installed, open your PC’s command prompt and enter the following commands:
  • node --version
  • npm --version

If Node.js and npm are correctly installed, you’ll see the version name in the CMD prompt!

As our first step, we need to actually get the official installer for Node.js on macOS. To do so, we can head over to the Node.js Downloads page to download the installer. For more information, visit https://kinsta.com/blog/how-to-install-node-js/

Follow these steps to get started:

You can get the macOS installer by clicking the Macintosh Installer option - this will download the .pkg installer for Node.js. Make sure you save it somewhere that you'll be able to access it!

Now that you've got the installer downloaded, you'll need to run it. The installer is a pretty typical interface - it won't take long to get through it (under a minute), even though there are a few parts to it. You can get through it by following the guide below:

• Introduction
  • Select Continue
• License
  • Select Continue
  • Select Agree
• Installation Type
  • Select Install
  • Authenticate with your Mac to allow the Installation
  • Select Install Software
• Summary
  • Select Close

To verify that Node.js was installed correctly on your Mac, you can run the following command in your terminal:

• node -v
• npm -v

Update Your npm Version

• sudo npm install npm --global

Start building with Node.js!

The Linux operating system works a bit differently than the other traditional operating systems. That’s because Linux is open-source, offering you more freedom, customization, and advanced functionalities. For more information, visit https://kinsta.com/blog/how-to-install-node-js/

If you’re casual with commands, you should feel comfortable with Linux. Here, we are about to discuss the easiest method of installing Node.js on the Linux operating system.

The Linux operating system has hundreds of different distributions because of the diversity it provides. And users love to customize and harness different versions’ specific functionalities using distinct distributions.

Firstly, find the installation instruction for your specific distribution from Node.js’s Binary Distributions page. For this guide, we’ll be using Ubuntu for illustration purposes.

• Install Curl Command Line Tool
  • Before going for Node.js installation, ensure that you have the curl command-line utility installed on your system. If not, then paste this command on your terminal to install curl:
  • sudo apt install curl
• It may ask for your system password to verify the permission of the installation. Once you input the password, the system should begin the curl installation.

You need to copy and paste the Node.js installation command into your terminal (in our case, we can grab it from the Ubuntu distribution page) so that the system can begin the Node.js installation.

For instance, here, we’ll be installing Node.js v14.x. These are the installation commands for Ubuntu:

• • curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
  • sudo apt-get install -y nodejs

As you already have the curl command line installed on your terminal, you’ll need to copy and paste the first command (the curl command) on your terminal and run it.

The curl command begins the Node.js installation process, updates your system, and downloads all Node.js libraries required to install Node.js on your Linux OS.

• Copy and paste the second line of command from the installation instructions above into your Linux terminal:
  • sudo apt-get install -y nodejs

As you’ve installed Node.js, you can verify to check whether the installation is successful or not. To confirm the installation, you need to run two simple Linux commands on your Linux terminal.

• • node --version
  • npm --version

Once the project is set up, head over to the frontend project directory to run the Vite-based React application with shadcn/ui.

1. Extract the Project:
   • Download and unzip the Petstore Template project.
   • Locate the frontend folder containing the Vite React app.
2. Open the Project in VS Code:
   • Open VS Code and navigate to File > Open Folder, then select the frontend folder.
3. Install Dependencies:
   • Open a terminal in VS Code (Terminal > New Terminal) or use your system’s terminal.
   • Navigate to the frontend folder if not already there: cd path/to/frontend
   • Install the project dependencies, including shadcn/ui: npm install
4. Run the Vite Development Server:
   • In the terminal, run: npm run dev
   • This starts the Vite development server, typically on http://localhost:8080.
   • Open your browser and navigate to http://localhost:8080 to view the React application.
5. Verify the Application:
   • You should see the Petstore Template frontend interface, as shown below:
   
   • The development server automatically reloads when you make changes to the code.

Congratulations! You have successfully run the React project on your machine. You can now begin building your user interfaces with React and shadcn/ui.

• Port Conflict: If http://localhost:8080 is in use, Vite will prompt you to use another port (e.g., http://localhost:8081). Follow the terminal instructions.
• Dependency Errors: If npm install fails, ensure you have a stable internet connection and try: npm install --force
• Node Version Issues: Ensure you’re using Node.js version 18 or higher for Vite compatibility. Update Node.js if needed.

For additional project details, refer to the README.md in the frontend folder.

Above illustration demonstrates the process to change the name of application.

If you want to change the logo of this project, go to the LogoSection index.js file. In this file, go to line 24, keep the image in the public/image folder, and change the logo of the application.

Above illustration demonstrates the process to change the Logo of application.

If you want to change the name of the menu, go to the title option and change the title on the particular screen.

Above illustration demonstrates the process to change the Menu of application.

If you want to change the URL of routing, go to the path option and change the path of routing on the particular screen.

Above illustration demonstrates the process to change the Routing of application.