Project

CAD-EX-site This is a simple two-page website that includes a main page, a contact page with a form, and a basic backend that can respond based on the form data.

Demo

Project demo on Vercel

STACK

• Programming language: TypeScript
• Frontend/Fullstack: Next.js, React, Tailwind CSS
• Libraries: React Hook Form, React Spinners, Shadcn/ui, React Lite YouTube Embed, Lucide React
• Deploy: Vercel
• Package manager: Bun

Functional

• Feedback Form: The user can send their contact details and message through the form.
• Form State Management & Validation: Uses React Hook Form (useForm) to manage state using register & setting up simple custom input field validation.
• API for processing form data: The form sends data to the /api/contact API, which processes the request and returns a message.
• Global page "404 - Not Found": Handler for all invalid routes. If the user enters a non-existent page address, a custom page is displayed with an error message & a button that leads to the main page.

API

Endpoint

• POST /api/contact - accepts form data sent from the frontend and returns a successful submission message.

Example request:

{
  "name": "John Doe",
  "email": "john@example.com",
  "message": "Hello! I'd like to get in touch."
}

Example response

{
  "message": "Thank you for your message, John Doe! Hello! I'd like to get in touch."
}

Deploy

• This project is deployed on Vercel. With each push to the main branch, the deployment is automatically updated.

Installation and launch of the project

Prerequisites

• Make sure you have Bun, Node.js and Git installed.

Local start

1. clone the repository:

   git clone https://github.com/yourusername/yourprojectname.git
   cd your project name

2. Install dependencies using Bun: bun install

3. Start project: bun run dev

Additional information

• Contact Page: After submitting the form, the page refreshes to display the user's message.
• "Go Main Page" button: After submitting the form, the user sees a button to return to the home page.