Top Related Projects
Master programming by recreating your favorite technologies from scratch.
Interactive roadmaps, guides and other educational content to help developers grow in their careers.
😎 Awesome lists about all kinds of interesting topics
:books: Freely available programming books
A complete computer science study plan to become a software engineer.
Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.
Quick Overview
The antiwork/shortest repository is a minimalist JavaScript library designed to find the shortest path between two points in a 2D grid. It implements the A* search algorithm and provides a simple API for pathfinding tasks. The library is lightweight and easy to integrate into web-based projects or Node.js applications.
Pros
- Lightweight and efficient implementation of A* algorithm
- Easy to use API with minimal setup required
- Suitable for both browser and Node.js environments
- Well-documented with clear examples
Cons
- Limited to 2D grid-based pathfinding
- May not be suitable for complex pathfinding scenarios
- Lacks advanced features found in more comprehensive pathfinding libraries
- No built-in visualization tools for debugging or demonstration
Code Examples
Finding the shortest path between two points:
import { findShortestPath } from 'shortest';
const grid = [
[0, 0, 0, 1, 0],
[1, 1, 0, 1, 0],
[0, 0, 0, 0, 0],
[0, 1, 1, 1, 0],
[0, 0, 0, 1, 0]
];
const start = { x: 0, y: 0 };
const end = { x: 4, y: 4 };
const path = findShortestPath(grid, start, end);
console.log(path);
Customizing the heuristic function:
import { findShortestPath, manhattanDistance } from 'shortest';
const customHeuristic = (a, b) => 2 * manhattanDistance(a, b);
const path = findShortestPath(grid, start, end, { heuristic: customHeuristic });
Handling unreachable destinations:
import { findShortestPath } from 'shortest';
const unreachableEnd = { x: 3, y: 1 };
const result = findShortestPath(grid, start, unreachableEnd);
if (result === null) {
console.log('No path found to the destination');
}
Getting Started
To use the shortest library in your project, follow these steps:
-
Install the package:
npm install shortest
-
Import and use the library in your code:
import { findShortestPath } from 'shortest'; const grid = [ [0, 0, 0], [0, 1, 0], [0, 0, 0] ]; const start = { x: 0, y: 0 }; const end = { x: 2, y: 2 }; const path = findShortestPath(grid, start, end); console.log(path);
-
Customize options as needed:
const options = { diagonal: true, heuristic: (a, b) => Math.max(Math.abs(a.x - b.x), Math.abs(a.y - b.y)) }; const path = findShortestPath(grid, start, end, options);
Competitor Comparisons
Master programming by recreating your favorite technologies from scratch.
Pros of build-your-own-x
- Comprehensive collection of tutorials for building various software projects
- Covers a wide range of technologies and programming languages
- Actively maintained with regular updates and contributions
Cons of build-your-own-x
- May be overwhelming for beginners due to the large number of projects
- Some tutorials might be outdated or lack detailed explanations
- Requires significant time investment to complete multiple projects
Code comparison
build-your-own-x:
def build_web_server():
# Implementation of a basic web server
pass
def build_database():
# Implementation of a simple database
pass
shortest:
def shortest_path(graph, start, end):
# Implementation of shortest path algorithm
pass
Summary
build-your-own-x is a extensive repository offering tutorials for building various software projects across different technologies. It provides a wealth of learning opportunities but may be overwhelming for beginners. shortest, on the other hand, focuses specifically on implementing the shortest path algorithm, making it more targeted and potentially easier to grasp for those interested in graph algorithms.
build-your-own-x is better suited for developers looking to expand their skills across multiple domains, while shortest is ideal for those focusing on graph theory and algorithm implementation. The choice between the two depends on the learner's goals and experience level.
Interactive roadmaps, guides and other educational content to help developers grow in their careers.
Pros of developer-roadmap
- Comprehensive guide for developers at various skill levels
- Regularly updated with new technologies and industry trends
- Visual roadmaps make it easy to understand learning paths
Cons of developer-roadmap
- Can be overwhelming for beginners due to the vast amount of information
- Might not cover specific niche technologies or frameworks
- Some roadmaps may become outdated quickly in rapidly evolving fields
Code comparison
Not applicable, as both repositories don't contain significant code samples. developer-roadmap primarily consists of markdown files and images, while shortest is a minimal repository with no substantial code.
Additional notes
shortest is a minimalist repository with a single README file, aimed at demonstrating the concept of the shortest possible GitHub repository. It serves a different purpose than developer-roadmap and doesn't provide educational content or resources for developers.
developer-roadmap, on the other hand, is a comprehensive resource for developers looking to plan their learning journey or explore different areas of software development. It offers visual guides, explanations, and resources for various technologies and career paths in the tech industry.
😎 Awesome lists about all kinds of interesting topics
Pros of awesome
- Extensive collection of curated lists covering a wide range of topics
- Large community with frequent updates and contributions
- Well-organized structure with clear categories and subcategories
Cons of awesome
- Can be overwhelming due to the sheer volume of information
- May include outdated or less relevant resources in some lists
- Requires more time to navigate and find specific information
Code comparison
Not applicable, as both repositories primarily consist of markdown files and don't contain significant code samples.
Additional notes
shortest:
- Focused specifically on work-related topics and discussions
- Smaller, more niche community
- Less structured organization of content
awesome:
- Broader scope covering various tech-related topics
- Highly popular with over 200,000 stars on GitHub
- Follows a standardized format for list creation and maintenance
Both repositories serve different purposes and cater to distinct audiences. shortest is more targeted towards work-related discussions and resources, while awesome provides a comprehensive collection of curated lists across numerous tech topics.
:books: Freely available programming books
Pros of free-programming-books
- Extensive collection of free programming resources across many languages and topics
- Well-organized with clear categorization and language-specific sections
- Actively maintained with frequent updates and contributions from the community
Cons of free-programming-books
- Large repository size may be overwhelming for beginners
- Some links may become outdated or broken over time
- Lacks a specific focus or curated learning path
Code comparison
Not applicable, as both repositories primarily contain lists of resources rather than code.
Additional notes
shortest:
- Focused specifically on anti-work resources and discussions
- Smaller, more niche community
- May appeal to those interested in labor rights and alternative work philosophies
free-programming-books:
- Broader appeal to developers and learners across various programming disciplines
- Higher star count and more contributors, indicating wider adoption
- Serves as a comprehensive reference for free programming education materials
Both repositories serve different purposes and target distinct audiences. shortest caters to those interested in anti-work ideology, while free-programming-books is a valuable resource for programmers and aspiring developers seeking free learning materials.
A complete computer science study plan to become a software engineer.
Pros of coding-interview-university
- Comprehensive curriculum covering a wide range of computer science topics
- Well-structured learning path with clear progression
- Extensive collection of resources, including videos, articles, and practice problems
Cons of coding-interview-university
- Can be overwhelming due to the sheer amount of content
- May take a significant time investment to complete
- Focuses primarily on theoretical concepts rather than practical coding skills
Code comparison
While shortest doesn't contain actual code, coding-interview-university includes code examples for various algorithms and data structures. Here's a sample comparison:
shortest:
No code available
coding-interview-university:
def binary_search(list, item):
low = 0
high = len(list) - 1
while low <= high:
mid = (low + high) // 2
guess = list[mid]
if guess == item:
return mid
if guess > item:
high = mid - 1
else:
low = mid + 1
return None
Summary
coding-interview-university is a comprehensive resource for computer science and interview preparation, offering a structured learning path and extensive materials. However, it may be time-consuming and overwhelming for some users. shortest, on the other hand, appears to be a minimal repository with limited content, making it difficult to draw a meaningful comparison in terms of code or learning resources.
Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.
Pros of system-design-primer
- Comprehensive resource for learning system design concepts
- Well-organized content with diagrams and explanations
- Large community support and regular updates
Cons of system-design-primer
- May be overwhelming for beginners due to extensive content
- Requires significant time investment to fully utilize
- Lacks hands-on coding exercises for practical implementation
Code comparison
system-design-primer:
class Cache:
def __init__(self):
self.size = 0
self.max_size = 10
self.lookup = {}
self.linked_list = LinkedList()
shortest:
# No relevant code available for comparison
Additional notes
system-design-primer is a comprehensive resource for learning system design concepts, covering various topics and providing detailed explanations. It's well-maintained and has a large community following.
shortest, on the other hand, appears to be a minimal repository with limited information available. It's unclear what specific purpose or content this repository contains based on the provided information.
The significant difference in scope and content between these two repositories makes a direct comparison challenging. system-design-primer is clearly aimed at providing educational resources for system design, while the purpose and content of shortest remain unclear without further information.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Shortest
AI-powered natural language end-to-end testing framework.
Features
- Natural language E2E testing framework
- AI-powered test execution using Anthropic Claude API
- Built on Playwright
- GitHub integration with 2FA support
- Email validation with Mailosaur
Using Shortest in your project
If helpful, here's a short video!
Installation
Use the shortest init
command to streamline the setup process in a new or existing project.
The shortest init
command will:
npx @antiwork/shortest init
This will:
- Automatically install the
@antiwork/shortest
package as a dev dependency if it is not already installed - Create a default
shortest.config.ts
file with boilerplate configuration - Generate a
.env.local
file (unless present) with placeholders for required environment variables, such asANTHROPIC_API_KEY
- Add
.env.local
and.shortest/
to.gitignore
Quick start
- Determine your test entry and add your Anthropic API key in config file:
shortest.config.ts
import type { ShortestConfig } from "@antiwork/shortest";
export default {
headless: false,
baseUrl: "http://localhost:3000",
browser: {
contextOptions: {
ignoreHTTPSErrors: true
},
},
testPattern: "**/*.test.ts",
ai: {
provider: "anthropic",
},
} satisfies ShortestConfig;
The Anthropic API key defaults to SHORTEST_ANTHROPIC_API_KEY
/ ANTHROPIC_API_KEY
environment variables. Can be overwritten via ai.config.apiKey
.
Optionally, you can configure browser behavior using the browser.contextOptions
property in your configuration file. This allows you to pass custom Playwright browser context options.
- Create test files using the pattern specified in the config:
app/login.test.ts
import { shortest } from "@antiwork/shortest";
shortest("Login to the app using email and password", {
username: process.env.GITHUB_USERNAME,
password: process.env.GITHUB_PASSWORD,
});
Using callback functions
You can also use callback functions to add additional assertions and other logic. AI will execute the callback function after the test execution in browser is completed.
import { shortest } from "@antiwork/shortest";
import { db } from "@/lib/db/drizzle";
import { users } from "@/lib/db/schema";
import { eq } from "drizzle-orm";
shortest("Login to the app using username and password", {
username: process.env.USERNAME,
password: process.env.PASSWORD,
}).after(async ({ page }) => {
// Get current user's clerk ID from the page
const clerkId = await page.evaluate(() => {
return window.localStorage.getItem("clerk-user");
});
if (!clerkId) {
throw new Error("User not found in database");
}
// Query the database
const [user] = await db
.select()
.from(users)
.where(eq(users.clerkId, clerkId))
.limit(1);
expect(user).toBeDefined();
});
Lifecycle hooks
You can use lifecycle hooks to run code before and after the test.
import { shortest } from "@antiwork/shortest";
shortest.beforeAll(async ({ page }) => {
await clerkSetup({
frontendApiUrl:
process.env.PLAYWRIGHT_TEST_BASE_URL ?? "http://localhost:3000",
});
});
shortest.beforeEach(async ({ page }) => {
await clerk.signIn({
page,
signInParams: {
strategy: "email_code",
identifier: "iffy+clerk_test@example.com",
},
});
});
shortest.afterEach(async ({ page }) => {
await page.close();
});
shortest.afterAll(async ({ page }) => {
await clerk.signOut({ page });
});
Chaining tests
Shortest supports flexible test chaining patterns:
// Sequential test chain
shortest([
"user can login with email and password",
"user can modify their account-level refund policy",
]);
// Reusable test flows
const loginAsLawyer = "login as lawyer with valid credentials";
const loginAsContractor = "login as contractor with valid credentials";
const allAppActions = ["send invoice to company", "view invoices"];
// Combine flows with spread operator
shortest([loginAsLawyer, ...allAppActions]);
shortest([loginAsContractor, ...allAppActions]);
API testing
Test API endpoints using natural language
const req = new APIRequest({
baseURL: API_BASE_URI,
});
shortest(
"Ensure the response contains only active users",
req.fetch({
url: "/users",
method: "GET",
params: new URLSearchParams({
active: true,
}),
}),
);
Or simply:
shortest(`
Test the API GET endpoint ${API_BASE_URI}/users with query parameter { "active": true }
Expect the response to contain only active users
`);
Running tests
pnpm shortest # Run all tests
pnpm shortest login.test.ts # Run specific tests from a file
pnpm shortest login.test.ts:23 # Run specific test from a file using a line number
pnpm shortest --headless # Run in headless mode using
You can find example tests in the examples
directory.
CI setup
You can run Shortest in your CI/CD pipeline by running tests in headless mode. Make sure to add your Anthropic API key to your CI/CD pipeline secrets.
GitHub 2FA login setup
Shortest supports login using GitHub 2FA. For GitHub authentication tests:
- Go to your repository settings
- Navigate to "Password and Authentication"
- Click on "Authenticator App"
- Select "Use your authenticator app"
- Click "Setup key" to obtain the OTP secret
- Add the OTP secret to your
.env.local
file or use the Shortest CLI to add it - Enter the 2FA code displayed in your terminal into Github's Authenticator setup page to complete the process
shortest --github-code --secret=<OTP_SECRET>
Environment setup
Required in .env.local
:
ANTHROPIC_API_KEY=your_api_key
GITHUB_TOTP_SECRET=your_secret # Only for GitHub auth tests
Shortest CLI development
The NPM package is located in packages/shortest/
. See CONTRIBUTING guide.
Web app development
This guide will help you set up the Shortest web app for local development.
Prerequisites
- React >=19.0.0 (if using with Next.js 14+ or Server Actions)
- Next.js >=14.0.0 (if using Server Components/Actions)
[!WARNING] Using this package with React 18 in Next.js 14+ projects may cause type conflicts with Server Actions and
useFormStatus
If you encounter type errors with form actions or React hooks, ensure you're using React 19
Getting started
- Clone the repository:
git clone https://github.com/antiwork/shortest.git
cd shortest
- Install dependencies:
npm install -g pnpm
pnpm install
Environment setup
For Antiwork team members
Pull Vercel env vars:
pnpm i -g vercel
vercel link
vercel env pull
For other contributors
- Run
pnpm run setup
to configure the environment variables. - The setup wizard will ask you for information. Refer to "Services Configuration" section below for more details.
Set up the database
pnpm drizzle-kit generate
pnpm db:migrate
pnpm db:seed # creates stripe products, currently unused
Services configuration
You'll need to set up the following services for local development. If you're not an Antiwork Vercel team member, you'll need to either run the setup wizard pnpm run setup
or manually configure each of these services and add the corresponding environment variables to your .env.local
file:
Clerk
- Go to clerk.com and create a new app.
- Name it whatever you like and disable all login methods except GitHub.
- Once created, copy the environment variables to your
.env.local
file. - In the Clerk dashboard, disable the "Require the same device and browser" setting to ensure tests with Mailosaur work properly.
Vercel Postgres
- Go to your dashboard at vercel.com.
- Navigate to the Storage tab and click the
Create Database
button. - Choose
Postgres
from theBrowse Storage
menu. - Copy your environment variables from the
Quickstart
.env.local
tab.
Anthropic
- Go to your dashboard at anthropic.com and grab your API Key.
- Note: If you've never done this before, you will need to answer some questions and likely load your account with a balance. Not much is needed to test the app.
- Note: If you've never done this before, you will need to answer some questions and likely load your account with a balance. Not much is needed to test the app.
Stripe
- Go to your
Developers
dashboard at stripe.com. - Turn on
Test mode
. - Go to the
API Keys
tab and copy yourSecret key
. - Go to the terminal of your project and type
pnpm run stripe:webhooks
. It will prompt you to login with a code then give you yourSTRIPE_WEBHOOK_SECRET
.
GitHub OAuth
-
Create a GitHub OAuth App:
- Go to your GitHub account settings.
- Navigate to
Developer settings
>OAuth Apps
>New OAuth App
. - Fill in the application details:
- Application name: Choose any name for your app
- Homepage URL: Set to
http://localhost:3000
for local development - Authorization callback URL: Use the Clerk-provided callback URL (found in below image)
-
Configure Clerk with GitHub OAuth:
- Go to your Clerk dashboard.
- Navigate to
Configure
>SSO Connections
>GitHub
. - Select
Use custom credentials
- Enter your
Client ID
andClient Secret
from the GitHub OAuth app you just created. - Add
repo
to theScopes
Mailosaur
- Sign up for an account with Mailosaur.
- Create a new Inbox/Server.
- Go to API Keys and create a standard key.
- Update the environment variables:
MAILOSAUR_API_KEY
: Your API keyMAILOSAUR_SERVER_ID
: Your server ID
The email used to test the login flow will have the format shortest@<MAILOSAUR_SERVER_ID>.mailosaur.net
, where
MAILOSAUR_SERVER_ID
is your server ID.
Make sure to add the email as a new user under the Clerk app.
Running locally
Run the development server:
pnpm dev
Open http://localhost:3000 in your browser to see the app in action.
Top Related Projects
Master programming by recreating your favorite technologies from scratch.
Interactive roadmaps, guides and other educational content to help developers grow in their careers.
😎 Awesome lists about all kinds of interesting topics
:books: Freely available programming books
A complete computer science study plan to become a software engineer.
Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot