feat: redesign javascript quick start (#698)

* feat: redesign javascript quickstart

Signed-off-by: Achanandhi-M <[email protected]>

* feat: redesign javascript quickstart

Signed-off-by: Achanandhi-M <[email protected]>

---------

Signed-off-by: Achanandhi-M <[email protected]>
Signed-off-by: Achanandhi M <[email protected]>

Author: Achanandhi-M

src/components/Community.js

@@ -86,9 +86,7 @@ export const Community = () => {
 
             <div className="flex-auto">
               <h3 className="font-bold">Substack</h3>
-              <p className="text-sm text-gray-700">
-                Ideas worth reading — delivered directly to you.
-              </p>
+              <p>Ideas worth reading — delivered directly to you.</p>
             </div>
           </a>
         </li>

src/components/QuickStartList.js

@@ -351,7 +351,7 @@ const quickstarts = [
   {
     title: "Express + Postgres + Prisma ",
     language: "JS/TS",
-    server: "Docker",
+    server: "Local",
     description:
       "A sample Task Management app to demonstrate how seamlessly Keploy integrates with Express, PostgreSQL, and Prisma ORM.",
     link: "/docs/quickstart/express-postgresql-prisma/#running-app-locally-on-linuxwsl",

versioned_docs/version-2.0.0/quickstart/nextjs-postgres.md

@@ -17,10 +17,6 @@ keyword:
 
 This is a sample app to test Keploy integration capabilities using NextJS and Postgres with Drizzle ORM. Buckle up, it's gonna be a fun ride! 🎢
 
-import InstallationGuide from '../concepts/installation.md'
-
-<InstallationGuide/>
-
 ## Get Started! 🎬
 
 Now that we have bun installed, we will setup our application.

versioned_docs/version-2.0.0/quickstart/samples-bunjs.md

@@ -25,10 +25,6 @@ keyword:
 
 This is a sample app to test Keploy integration capabilities using Bun.js and MongoDB.
 
-import InstallationGuide from '../concepts/installation.md'
-
-<InstallationGuide/>
-
 ## Get Started! 🎬
 
 ## Clone a sample user data CRUD app 🧪

versioned_docs/version-3.0.0/quickstart/express-postgresql-prisma.md

@@ -18,15 +18,14 @@ keyword:
   - Auto Testcase generation
 ---
 
-## Introduction
+import InstallReminder from '@site/src/components/InstallReminder';
+import SectionDivider from '@site/src/components/SectionDivider';
 
-A sample Task Management application and see how seamlessly Keploy integrates with Express, [PostgreSQL](https://www.postgresql.org/) and Prisma ORM. Buckle up, it's gonna be a fun ride! 🎢
+## Running App Locally on Linux/WSL
 
-import InstallationGuide from '../concepts/installation.md'
+A sample Task Management application and see how seamlessly Keploy integrates with Express, PostgreSQL and Prisma ORM. Buckle up, it's gonna be a fun ride!
 
-<InstallationGuide/>
-
-## Get Started! 🎬
+<InstallReminder />
 
 ### Prerequisites
 
@@ -43,8 +42,6 @@ git clone https://github.com/keploy/samples-typescript.git
 cd samples-typescript/express-postgresql-prisma
 ```
 
-### Running App Locally on Linux/WSL
-
 #### Install the dependencies
 
 ```bash
@@ -175,7 +172,46 @@ The above command will start recording the API calls made to the application and
 
 > 💡 You can use Postman or any other API testing tool to test the API calls. Additionally, the application will run a swagger UI on `http://localhost:3000/api/docs` to visualize the API calls.
 
-### Running App using Docker Compose 🐳
+#### Test the Application
+
+```bash
+keploy test -c "npm start"
+```
+
+<SectionDivider />
+
+## Running App using Docker Compose 🐳
+
+A sample Task Management application and see how seamlessly Keploy integrates with Express, PostgreSQL and Prisma ORM. Buckle up, it's gonna be a fun ride!
+
+<InstallReminder />
+
+### Prerequisites
+
+Ensure you have the following installed:
+
+- Docker
+- Node.js and npm
+- Keploy CLI
+
+Clone the repository and move to express-postgresql-prisma folder
+
+```bash
+git clone https://github.com/keploy/samples-typescript.git
+cd samples-typescript/express-postgresql-prisma
+```
+
+#### Install the dependencies
+
+```bash
+npm install
+```
+
+#### Set up environment variables:
+
+```bash
+cp .env.example .env
+```
 
 We will be using Docker compose to run the application as well as PostreSql on Docker container.
 
@@ -334,14 +370,6 @@ curl -X 'DELETE' \
 
 ### Test the Application using Keploy
 
-#### on Linux/WSL
-
-```bash
-keploy test -c "npm start"
-```
-
-#### On Docker Compose 🐳
-
 ```bash
 keploy test -c "docker compose up" --container-name "nodeMongoApp" --build-delay 50 --delay 10
 ```

versioned_docs/version-3.0.0/quickstart/nextjs-postgres.md

@@ -13,15 +13,16 @@ keyword:
   - Auto Testcase generation
 ---
 
-## Introduction
+## Running App Locally on Linux/WSL 🐧
 
 This is a sample app to test Keploy integration capabilities using NextJS and Postgres with Drizzle ORM. Buckle up, it's gonna be a fun ride! 🎢
 
-import InstallationGuide from '../concepts/installation.md'
+import Link from '@docusaurus/Link'
+import InstallReminder from '@site/src/components/InstallReminder';
 
-<InstallationGuide/>
+<InstallReminder />
 
-## Get Started! 🎬
+### Get Started! 🎬
 
 Now that we have bun installed, we will se tup our application.
 
@@ -35,12 +36,6 @@ npm install
 docker-compose up
 ```
 
-## Installation 📥
-
-- [Using Docker container for Postgres and running application locally](#running-app-locally-on-linuxwsl-)
-
-## Running App Locally on Linux/WSL 🐧
-
 We'll be running our sample application right on Linux, but just to make things a tad more thrilling, we'll have the database (Redis) chill on Docker. Ready? Let's get the party started!🎉
 
 ### Capture testcase
@@ -51,6 +46,8 @@ Ready, set, record! Here's how:
 sudo -E env PATH=$PATH keploy record -c 'npm run dev'
 ```
 
+<img src="https://keploy-devrel.s3.us-west-2.amazonaws.com/Keploy-record-nextjs-postgres.png" alt="Sample Keploy Record Javascript" width="100%" style={{ borderRadius: '5px' }} />
+
 Alright, magician! With the app alive and kicking, let's weave some test cases. The spell? Making some API calls!
 
 #### Generate testcases
@@ -82,7 +79,7 @@ This will return the response:
 curl -X GET http://localhost:3000/api/users
 ```
 
-![Test Record](../../../static/img/nextjs-postgres-record.png)
+<img src="https://keploy-devrel.s3.us-west-2.amazonaws.com/Keploy-record-output-nextjs-postgres.png" alt="Sample Keploy Record Javascript" width="100%" style={{ borderRadius: '5px' }} />
 
 Give yourself a pat on the back! With that simple spell, you've conjured up test cases with a mock! Explore the **Keploy directory** and you'll discover your handiwork in `test-1.yml` and `mocks.yml`.
 
@@ -96,7 +93,7 @@ Time to put things to the test 🧪
 sudo -E env PATH=$PATH keploy test -c "npm run dev" --delay 10
 ```
 
-![Test Run](../../../static/img/nextjs-postgres-test.png)
+<img src="https://keploy-devrel.s3.us-west-2.amazonaws.com/Keploy-result-output-postgres-nextjs.png" alt="Sample Keploy Record Javascript" width="100%" style={{ borderRadius: '5px' }} />
 
 > The `--delay` flag? Oh, that's just giving your app a little breather (in seconds) before the test cases come knocking.
 
@@ -105,5 +102,3 @@ Final thoughts? Dive deeper! Try different API calls, tweak the DB response in t
 ### Wrapping it up 🎉
 
 Congrats on the journey so far! You've seen Keploy's power, flexed your coding muscles, and had a bit of fun too! Now, go out there and keep exploring, innovating, and creating! Remember, with the right tools and a sprinkle of fun, anything's possible. 😊🚀
-
-Hope this helps you out, if you still have any questions, reach out to us .

versioned_docs/version-3.0.0/quickstart/node-express-mongoose.md

@@ -17,15 +17,18 @@ keyword:
   - Auto Testcase generation
 ---
 
-## Introduction
+import Link from '@docusaurus/Link'
+import InstallReminder from '@site/src/components/InstallReminder';
 
-A simple sample CRUD application and see how seamlessly Keploy integrates with Express and MongoDB. Buckle up, it's gonna be a fun ride! 🎢
+import SectionDivider from '@site/src/components/SectionDivider';
+
+## Using Docker Compose 🐳
 
-import InstallationGuide from '../concepts/installation.md'
+A simple sample CRUD application and see how seamlessly Keploy integrates with Express and MongoDB. Buckle up, it's gonna be a fun ride! 🎢
 
-<InstallationGuide/>
+<InstallReminder />
 
-## Get Started! 🎬
+### Get Started! 🎬
 
 Clone the repository and move to express-mongoose folder
 
@@ -36,16 +39,6 @@ git clone https://github.com/keploy/samples-typescript && cd samples-typescript/
 npm install
 ```
 
-## Installation 📥
-
-Depending on your OS, choose your adventure:
-There are 2 ways you can run this sample application.
-
-- [Using Docker compose : running application as well as MongoDb on Docker container](#using-docker-compose-)
-- [Using Docker container for mongoDb and running application locally](#running-app-locally-on-linuxwsl-)
-
-## Using Docker Compose 🐳
-
 We will be using Docker compose to run the application as well as MongoDb on Docker container.
 
 ### Lights, Camera, Record! 🎥
@@ -59,6 +52,8 @@ Fire up the application and mongoDB instance with Keploy. Keep an eye on the two
 keploy record -c "docker compose up" --container-name "nodeMongoApp" --build-delay 50
 ```
 
+<img src="https://keploy-devrel.s3.us-west-2.amazonaws.com/keploy-record-express-new-mongo.png" alt="Sample Keploy Test Result Gin MongoDB" width="100%" style={{ borderRadius: '5px' }} />
+
 🔥 Challenge time! Generate some test cases. How? Just **make some API calls**. Postman, Hoppscotch or even curl - take your pick!
 
 #### Let's generate the testcases.
@@ -104,24 +99,37 @@ Time to put things to the test 🧪
 keploy test -c "docker compose up" --container-name "nodeMongoApp" --build-delay 50 --delay 10
 ```
 
-> The `--delay` flag? Oh, that's just giving your app a little breather (in seconds) before the test cases come knocking.
-
-Your results should be looking all _snazzy_, like this:
+<img src="https://keploy-devrel.s3.us-west-2.amazonaws.com/keploy-test-express-new-mongo.png" alt="Sample Keploy Test Result Gin MongoDB" width="100%" style={{ borderRadius: '5px' }} />
 
-<img src="/docs/img/testrun-node-fail.png" alt="Sample Keploy Test Result Gin MongoDB" width="100%" style={{ borderRadius: '5px' }} />
-
-Worry not, just add the ever-changing fields (like our **ts** here) to the **noise parameter** to **dodge those assertions**.
+> The `--delay` flag? Oh, that's just giving your app a little breather (in seconds) before the test cases come knocking.
 
-<img src="/docs/img/testrun-node-pass.png" alt="Sample Keploy Test Result Node MongoDB" width="100%" style={{ borderRadius: '5px' }} />
+<img src="https://keploy-devrel.s3.us-west-2.amazonaws.com/keploy-result-express-new-mongo.png" alt="Sample Keploy Test Result Node MongoDB" width="100%" style={{ borderRadius: '5px' }} />
 
 ### Wrapping it up 🎉
 
 Congrats on the journey so far! You've seen Keploy's power, flexed your coding muscles, and had a bit of fun too! Now, go out there and keep exploring, innovating, and creating! Remember, with the right tools and a sprinkle of fun, anything's possible.😊🚀
 
 Happy coding! ✨👩‍💻👨‍💻✨
 
+<SectionDivider />
+
 ## Running App Locally on Linux/WSL 🐧
 
+A simple sample CRUD application and see how seamlessly Keploy integrates with Express and MongoDB. Buckle up, it's gonna be a fun ride! 🎢
+
+<InstallReminder />
+
+### Get Started! 🎬
+
+Clone the repository and move to express-mongoose folder
+
+```bash
+git clone https://github.com/keploy/samples-typescript && cd samples-typescript/express-mongoose
+
+# Install the dependencies
+npm install
+```
+
 We'll be running our sample application right on Linux, but just to make things a tad more thrilling, we'll have the database (mongoDB) chill on Docker. Ready? Let's get the party started!🎉
 
 If you are using WSL on windows then use below to start wsl in the user's home directory:
@@ -154,6 +162,8 @@ Ready, set, record! Here's how:
 sudo -E env PATH=$PATH keploy record -c 'node src/app.js'
 ```
 
+<img src="https://keploy-devrel.s3.us-west-2.amazonaws.com/keploy-mongoose-record-new.png" alt="Sample Keploy Test Result Node MongoDB" width="100%" style={{ borderRadius: '5px' }} />
+
 Keep an eye out for the `-c `flag! It's the command charm to run the app.
 
 Alright, magician! With the app alive and kicking, let's weave some test cases. The spell? Making some API calls! Postman, Hoppscotch, or the classic curl - pick your wand.
@@ -181,14 +191,12 @@ Student registration successful!
 
 🎉 Woohoo! Give yourself a pat on the back! With that simple spell, you've conjured up a test case with a mock! Explore the **Keploy directory** and you'll discover your handiwork in `test-1.yml` and `mocks.yml`.
 
-<img src="/docs/img/testcase-node.png" alt="Sample Keploy Test Result Node MongoDB" width="100%" style={{ borderRadius: '5px' }} />
-
 Now, the real fun begins. Let's weave more spells!
 
 🚀 Follow the URL road...!
 
 ```bash
-curl --request GET \  --url http://localhost:8080/students
+curl --request GET \  --url http://localhost:8000/students
 ```
 
 Or simply wander over to your browser and visit `http://localhost:8000/students`.
@@ -203,12 +211,12 @@ Ready to put your spells to the test?
 sudo -E env PATH=$PATH keploy test -c "node src/app.js" --delay 10
 ```
 
-Worry not, just add the ever-changing fields (like our **ts** here) to the **noise parameter** to **dodge those assertions**.
+<img src="https://keploy-devrel.s3.us-west-2.amazonaws.com/keploy-mongo-test-new.png" alt="Sample Keploy Test Result Node MongoDB" width="100%" style={{ borderRadius: '5px' }} />
 
-<img src="/docs/img/testrun-node-pass.png" alt="Sample Keploy Test Result Node MongoDB" width="100%" style={{ borderRadius: '5px' }} />
+output should look like
+
+<img src="https://keploy-devrel.s3.us-west-2.amazonaws.com/keploy-mongooose-result-new.png" alt="Sample Keploy Test Result Node MongoDB" width="100%" style={{ borderRadius: '5px' }} />
 
 ### Wrapping it up 🎉
 
 Congrats on the journey so far! You've seen Keploy's power, flexed your coding muscles, and had a bit of fun too! Now, go out there and keep exploring, innovating, and creating! Remember, with the right tools and a sprinkle of fun, anything's possible.😊🚀
-
-Hope this helps you out, if you still have any questions, reach out to us .