WEB1 June 2024Live

Example Project

A short 2-3 sentence description for the project card. Explain what it does and why it matters.

Next.jsTypeScriptPostgreSQLTailwind

view live ↗source code ↗demo ↗

Overview

This is the main overview. Use bold to highlight key ideas and inline code for technical terms.

Separate paragraphs by \n\n in the JSON string. Each paragraph renders as its own block.

Key Numbers

5,000+

Active Users

250K

Requests / day

118ms

Avg. Response

94%

Test Coverage

Response Time Over Time

The Problem

Describe the problem this solves. Be specific — what was painful, and why were existing tools insufficient?

Use bold for the core insight. Reference specific APIs or tools inline.

What Makes It Different

Sub-120ms response time on every endpoint

Achieved through aggressive caching and edge deployment

Fully type-safe API surface

TypeScript end-to-end with no any escapes

Zero-downtime deployments

Rolling deploys with automatic rollback on error spikes

How It Works

01.

User submits a request via the API

02.

Request is validated and queued in Redis

03.

Worker processes it asynchronously

04.

Result is pushed back via WebSocket

Integration

lib/api-client.ts
1import { createClient } from '@your-lib/client';
2
3const client = createClient({
4  apiKey: process.env.API_KEY,
5  baseUrl: 'https://api.example.com',
6});
7
8// Fetch data with automatic retry
9const data = await client.get<ResponseType>('/endpoint', {
10  params: { limit: 10, page: 1 },
11  retry: { attempts: 3, delay: 500 },
12});
13
14console.log(data.results);

Server Route

app/api/items/route.ts
1import { NextRequest, NextResponse } from 'next/server';
2import { db } from '@/lib/db';
3import { z } from 'zod';
4
5const QuerySchema = z.object({
6  limit: z.coerce.number().min(1).max(100).default(20),
7  page: z.coerce.number().min(1).default(1),
8});
9
10export async function GET(req: NextRequest) {
11  const { searchParams } = req.nextUrl;
12  const { limit, page } = QuerySchema.parse(
13    Object.fromEntries(searchParams)
14  );
15
16  const items = await db.item.findMany({
17    take: limit,
18    skip: (page - 1) * limit,
19    orderBy: { createdAt: 'desc' },
20  });
21
22  return NextResponse.json({ items, page, limit });
23}

TIP

Add callouts throughout to highlight important notes, tips, or warnings. Supported variants: info, tip, warning, note.

Comparison

Feature	This Project	Competitor A	Competitor B
Response time	`<120ms`	~300ms	~500ms
Open source	Yes	No	Partial
Self-hosted	Yes	No	No
Free tier	500K req/mo	100K req/mo	50K req/mo

“The best way to get a project done faster is to start sooner.”
— Mohammed Isa· isaxcode.com

Tech Stack

Next.js 14

React framework with App Router and SSG

TypeScript

End-to-end type safety across client and server

PostgreSQL

Primary database with connection pooling via PgBouncer

Redis

Job queue and response caching layer

Tailwind CSS

Utility-first styling with custom design tokens

WARNING

Rate limits apply: 1,000 requests per minute per API key. Exceeding this returns a 429 with a Retry-After header.

Development Timeline

2024-01

Concept & Research

Defined scope, researched existing solutions, designed system architecture.

2024-03

Alpha Release

Core features shipped, internal testing with a small group of early users.

2024-05

Public Launch

Launched publicly. Onboarded first 500 users in 2 weeks.

2024-06

Scale & Optimise

Performance optimisation, infrastructure hardening, response time cut by 35%.

Monthly Active Users

Revenue Over Time

What I Learned

The most surprising challenge was database connection management under load. Standard connection pools weren't enough — adding PgBouncer between the app and Postgres cut latency by 40% at peak.

Redis as a job queue (instead of a full message broker) kept the infrastructure footprint small without sacrificing reliability.

back to all projects

1	import { createClient } from '@your-lib/client';
2
3	const client = createClient({
4	apiKey: process.env.API_KEY,
5	baseUrl: 'https://api.example.com',
6	});
7
8	// Fetch data with automatic retry
9	const data = await client.get<ResponseType>('/endpoint', {
10	params: { limit: 10, page: 1 },
11	retry: { attempts: 3, delay: 500 },
12	});
13
14	console.log(data.results);

1	import { NextRequest, NextResponse } from 'next/server';
2	import { db } from '@/lib/db';
3	import { z } from 'zod';
4
5	const QuerySchema = z.object({
6	limit: z.coerce.number().min(1).max(100).default(20),
7	page: z.coerce.number().min(1).default(1),
8	});
9
10	export async function GET(req: NextRequest) {
11	const { searchParams } = req.nextUrl;
12	const { limit, page } = QuerySchema.parse(
13	Object.fromEntries(searchParams)
14	);
15
16	const items = await db.item.findMany({
17	take: limit,
18	skip: (page - 1) * limit,
19	orderBy: { createdAt: 'desc' },
20	});
21
22	return NextResponse.json({ items, page, limit });
23	}