KiraWebs

Web development project featuring a modern landing page for a website creation service, focused on performance, transparency, and a clear user experience for businesses and professionals.

Code Preview

Next.jsNotion APIRedis

Kirawebs.com is a website developed for a company that provides technological solutions, including web development, consulting, and cloud solutions. 💡 One of the standout features of this project is the implementation of an interactive multi-step form that allows clients to simulate the cost of their website.

Technologies Used

The following technologies were used for the development of this project:

Next.js: As the main framework for building the application.
React: For creating interactive components.
Tailwind CSS: For designing and styling the interface.
Shadcn: For implementing modern and accessible UI components.
Notion API: To store contact form data in a Notion database.
Redis: To implement a rate limiting system, limiting message submissions to 3 per minute.
Zod: For data validation in the contact form.
ESLint and Prettier: To maintain clean and well-formatted code.
Vercel: For deployment and hosting of the application.

Key Features

Interactive Cost Simulation Form

Clients can follow a series of steps to get an estimate of their website's cost.

Contact Form with Validation and Rate Limiting

An email and a message are requested.
Data is validated using Zod.
If validation is successful, the data is stored in a Notion database.
A rate limiting system was implemented using Redis, limiting message submissions to 3 per minute.

const FormSchema = z.object({
	email: z.string().email("Email inválido"),
	description: z
		.string()
		.min(5, "La descripción debe tener al menos 5 caracteres")
		.max(1500, "La descripcion debe tener menos de 1000 caracteres"),
})

export async function sendEmail(prevState: unknown, formData: FormData) {
	const clientIp = formData.get("clientIp") as string
	const result = await ratelimit.limit(clientIp)

	if (!result.success) {
		return {
			success: false,
			title: "Limite de envios alcanzado",
			details: "Por favor, espera un momento antes de intentar nuevamente.",
		}
	}
	const rawData = {
		email: formData.get("email"),
		description: formData.get("description"),
	}
	const validationResult = FormSchema.safeParse(rawData)

	if (!validationResult.success) {
		return {
			success: false
			title: "Datos inválidos",
			details:
				"Por favor, verifica que tu email sea valido y que la descripcion tenga entre 5 y 1500 caracteres.",
		}
	}
	
	const { email, description } = validationResult.data

KiraWebs

Technologies Used

Key Features

Interactive Cost Simulation Form

Contact Form with Validation and Rate Limiting

In Notion Database

Code Snippets and Examples

Example of Validation with Zod

Contact message store

Rate Limiting Implementation with Redis

Deployment on Vercel