Skip to content

Updated docs: improved Quick Start section #580

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Updated docs: improved Quick Start section #580

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 84 additions & 47 deletions src/components/QuickStart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,100 +8,137 @@ export const QuickStart = () => {
<h1 className="mb-4 text-4xl font-semibold tracking-wide md:text-4xl">
Welcome to Keploy Documentation! 🚀
</h1>
<p className="text-l max-w-3xl">
<p className="text-lg max-w-3xl">
This documentation will help you get the most out of Keploy—whether
you’re building your first project or leveling up your testing workflow.
you're building your first project or leveling up your testing workflow.
</p>

<h2 className="mb-4 mt-8 text-2xl font-semibold tracking-wide md:text-3xl">
What is Keploy? 🤔
</h2>
<p className="text-l max-w-4xl">
Keploy is your open-source, developer-centric backend testing tool. It
makes backend testing easy and productive for engineering teams. Plus,
it's easy-to-use, powerful and extensible..🛠️ Keploy also has AI-powered
tools that help you generate unit and api tests quickly, helping
developers focus on writing code rather than writing tests.
<p className="text-lg max-w-4xl">
Keploy is your open-source, developer-centric backend testing tool that
makes backend testing easy and productive for engineering teams. It's
user-friendly, powerful, and extensible. 🛠️ Keploy features AI-powered
tools that help you generate unit and API tests quickly, allowing
developers to focus on writing code rather than writing tests.
</p>

<p className="text-l mt-4 max-w-4xl">
Keploy creates test cases and data mocks/stubs from user-traffic by
recording API calls and DB queries, significantly speeding up releases
<p className="text-lg mt-4 max-w-4xl">
Keploy creates test cases and data mocks/stubs from user traffic by
recording API calls and database queries, significantly speeding up releases
and enhancing reliability. 📈
</p>

{/*<h2 className="mt-8 text-2xl font-semibold tracking-wide md:text-3xl">*/}
{/* Contribute through Hacktoberfest ✅*/}
{/*</h2>*/}
{/*<p className="text-l mb-8 mt-4 max-w-4xl">*/}
{/* DigitalOcean's Hacktoberfest is a month-long celebration of open-source*/}
{/* contributions. Everyone is welcome to participate, regardless of their*/}
{/* experience level. Simply make a pull request to an open-source project*/}
{/* to get started.*/}
{/* <br /> <br />*/}
{/* You can contribute to{" "}*/}
{/* <a href="https://github.com/orgs/keploy/repositories">*/}
{/* several Keploy projects*/}
{/* </a>{" "}*/}
{/* participating this year, If you’ve ever wanted to contribute to open*/}
{/* source , now is your chance!*/}
{/* <br /> <br />*/}
{/* Anyone around the globe who desires to help drive the growth of open*/}
{/* source and make positive contributions to an ever-growing community. All*/}
{/* backgrounds and skill levels are encouraged to participate.{" "}*/}
{/* <a href="https://opensource.guide/how-to-contribute">*/}
{/* Learn How to Contribute?*/}
{/* </a>*/}
{/*</p>*/}
<h2 className="mb-4 mt-8 text-2xl font-semibold tracking-wide md:text-3xl">
Key Features ✨
</h2>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 mb-8">
<div className="p-4 rounded-lg bg-blue-50 border border-blue-200">
<h3 className="font-semibold text-blue-800 mb-2">🤖 AI-Powered Testing</h3>
<p className="text-sm text-blue-700">Generate comprehensive unit and API tests automatically</p>
</div>
<div className="p-4 rounded-lg bg-green-50 border border-green-200">
<h3 className="font-semibold text-green-800 mb-2">📊 Traffic Recording</h3>
<p className="text-sm text-green-700">Capture real API calls and database queries</p>
</div>
<div className="p-4 rounded-lg bg-purple-50 border border-purple-200">
<h3 className="font-semibold text-purple-800 mb-2">🔧 Developer-Friendly</h3>
<p className="text-sm text-purple-700">Easy integration with existing workflows</p>
</div>
</div>

<h2 className="mt-8 text-2xl font-semibold tracking-wide md:text-3xl">
Installation Guide 📗
</h2>
<p className="text-l mb-8 mt-4 max-w-4xl">
Let's get Keploy up and running on your Windows, Linux, or macOS
machine, so you can start crafting test cases in minutes. ⏱️
<p className="text-lg mb-8 mt-4 max-w-4xl">
Get Keploy up and running on your Windows, Linux, or macOS
machine in minutes. Choose your operating system below: ⏱️
</p>

<div className="grid grid-cols-1 gap-6 md:grid-cols-3 lg:gap-8">
<Link
className="scale flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg"
className="scale transform transition-transform hover:scale-105 flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg hover:shadow-xl"
to={useBaseUrl("/server/installation/")}
aria-label="Install Keploy on Windows"
>
<img
className="h-16 w-16"
src="/docs/img/os/windows-logo.svg"
alt="Windows logo"
/>
<p className="text-lg font-semibold">Windows</p>
<p className="text-sm text-gray-600">Windows 10/11 supported</p>
</Link>
<Link
className="scale flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg"
className="scale transform transition-transform hover:scale-105 flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg hover:shadow-xl"
to={useBaseUrl("/server/installation/")}
aria-label="Install Keploy on Linux"
>
<img
className="h-16 w-16"
src="/docs/img/os/linux-logo.svg"
alt="Linux logo"
/>
<p className="text-lg font-semibold">Linux</p>
<p className="text-sm text-gray-600">Best experience available</p>
</Link>
<Link
className="scale flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg"
className="scale transform transition-transform hover:scale-105 flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg hover:shadow-xl"
to={useBaseUrl("/server/installation/")}
aria-label="Install Keploy on macOS"
>
<img
className="h-16 w-16"
src="/docs/img/os/apple-logo.svg"
alt="Mac logo"
/>
<p className="text-lg font-semibold">MacOS</p>
<p className="text-lg font-semibold">macOS</p>
<p className="text-sm text-gray-600">Intel & Apple Silicon</p>
</Link>
</div>

<div className="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
<p className="text-sm text-yellow-800">
⚠️ <strong>Note:</strong> Keploy v2 is currently in development, with the best
experience on Linux. Docker support is experimental and may have some
limitations for certain use cases.
</p>
</div>

<h2 className="mb-4 mt-8 text-2xl font-semibold tracking-wide md:text-3xl">
Quick Links 🔗
</h2>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
<Link
className="p-4 rounded-lg bg-gray-50 border border-gray-200 hover:bg-gray-100 transition-colors"
to={useBaseUrl("/concepts/what-is-keploy/")}
>
<h3 className="font-semibold mb-2">📚 Core Concepts</h3>
<p className="text-sm text-gray-600">Learn the fundamentals</p>
</Link>
<Link
className="p-4 rounded-lg bg-gray-50 border border-gray-200 hover:bg-gray-100 transition-colors"
to={useBaseUrl("/quickstart/samples-tutorials/")}
>
<h3 className="font-semibold mb-2">🚀 Quick Start</h3>
<p className="text-sm text-gray-600">Get up and running</p>
</Link>
<Link
className="p-4 rounded-lg bg-gray-50 border border-gray-200 hover:bg-gray-100 transition-colors"
to={useBaseUrl("/operation/record-and-test/")}
>
<h3 className="font-semibold mb-2">🎯 Tutorials</h3>
<p className="text-sm text-gray-600">Step-by-step guides</p>
</Link>
<Link
className="p-4 rounded-lg bg-gray-50 border border-gray-200 hover:bg-gray-100 transition-colors"
to={useBaseUrl("/server/sdk-installation/")}
>
<h3 className="font-semibold mb-2">🔧 API Reference</h3>
<p className="text-sm text-gray-600">Technical documentation</p>
</Link>
</div>
<p className=" text-l mt-6 text-gray-500">
⚠️ Please note that Keploy v2 is currently in development, with the best
experience on Linux. Docker support is experimental and may have some
limitations for certain use cases.
</p>
</section>
);
};
};