Contact Management Page

This is a Contact Management Page built with Next.js 15, TypeScript, and Tailwind CSS. The application features a search form for filtering contacts and an edit contact form for managing contact details.

Features

• Search Contacts: Filter the list of contacts using multiple criteria such as name, email, or phone number.
• Edit Contacts: Update contact details through an intuitive form.
• Responsive Design: Optimized for all screen sizes using Tailwind CSS.

Developer

Hadi Shahpuri

---

Getting Started

Follow these steps to set up and run the project locally.

1. Clone the Repository

git clone https://github.com/your-username/next-js-contact-form.git
cd next-js-contact-form

2. Install Dependencies

Install the required packages using npm:

npm install --legacy-peer-deps

3. Build the Application

Create a production-ready build of the application:

npm run build

4. Start the Server

Run the built application:

npm start

5. Visit in Browser

Open your browser and navigate to:

http://localhost:3000

Development Mode To start the application in development mode with live reloading:

Scripts

Below are the available scripts for the project:

• npm run dev: Start the application in development mode.
• npm run build: Build the application for production.
• npm start: Start the production server.
• npm run lint: Run ESLint for code linting.

Project Structure

bash

• /components - Reusable React components (e.g., forms, tables).
• /types - TypeScript types and interfaces.
• /mock - Mock json files for testing.
• /fonts - Font files.

Tech Stack

• Framework: Next.js 15
• Language: TypeScript
• Styling: Tailwind CSS
• State Management: React Hooks (useState, useEffect)