5e.no is a simple link shortener and contact card sharing service.
This full-stack web application showcases modern form handling and validation, React server actions, and database interaction with Drizzle ORM.
The project is built with Next.js, React, TypeScript, Tailwind CSS, Vercel Postgres, Drizzle, Vercel, Shadcn UI, React Hook Form, and Zod.
- Next.js
- React
- TypeScript
- Tailwind CSS
- Vercel Postgres
- Drizzle ORM
- Vercel
- Shadcn UI
- React Hook Form
- Zod
The project is structured as a Next.js application, with the app directory for routes and the components directory for reusable components.
The design is based on the Shadcn UI component library, utilizing their recommended form setup with React Hook Form and Zod for validation.
Drizzle ORM is used to interact with the Vercel Postgres database. Configuration is in drizzle.config.ts, and the database schema and client are defined in lib/drizzle.ts.
React server actions handle database and email service interactions, creating a tight integration between the frontend and backend.
User-created items are stored in both the database and local storage for quick access, sharing, and history viewing.
Form validation is performed with Zod. Validation schemas are defined in the lib/schemas.ts directory and used for both frontend and backend validation.
Email notifications are sent using the nodemailer package, configured via environment variables, including EMAIL_REGISTRATION_FILTER to filter specific registrations.
The project is designed to run on Vercel with a Vercel Postgres database. To run the project locally:
- Clone the repository
- Install dependencies with
pnpm install - Fetch Vercel environment variables with
vercel linkandvercel env pull .env - Run the development server with
pnpm dev