A simple web application that allows users to save contact information.
Contact Guard is a simple web application that allows users to save contact information. Built with modern web technologies, it provides a seamless user experience for managing contact details.
First, clone the repository and navigate to the project directory:
git clone https://github.com/yourusername/hux-assessment-frontend.git
cd hux-assessment-frontendThen, install the dependencies:
npm installThis will launch the application on http://localhost:3000.
For a production build, run:
npm run buildAnd to start the production server:
npm start- dev: Starts the development server using Next.js.
- build: Builds the production application.
- start: Starts the production server.
- lint: Runs the linter to check code quality and style.
- @headlessui/react: ^1.7.17 — A set of completely unstyled, fully accessible UI components.
- @types/node: ^20.10.4 — TypeScript definitions for Node.js.
- @types/react: ^18.2.42 — TypeScript definitions for React.
- @types/react-dom: ^18.2.17 — TypeScript definitions for React DOM.
- aos: ^3.0.0-beta.6 — Animate On Scroll library for animations.
- next: ^14.0.4 — The React framework for production.
- react: 18.2.0 — A JavaScript library for building user interfaces.
- react-dom: 18.2.0 — React DOM package.
- typescript: ^5.3.3 — TypeScript language support.
- @tailwindcss/forms: ^0.5.7 — Tailwind CSS plugin for styling forms.
- @types/aos: ^3.0.7 — TypeScript definitions for AOS.
- autoprefixer: ^10.4.16 — A PostCSS plugin to parse CSS and add vendor prefixes.
- postcss: ^8.4.32 — A tool for transforming CSS with JavaScript plugins.
- tailwindcss: ^3.3.6 — A utility-first CSS framework.
Check the live demo here 👉️ Google Drive
This project uses Tailwind CSS for styling and AOS for scroll animations. Ensure you follow the setup guidelines in the Tailwind CSS and AOS documentation for optimal results.
The application features a contact form where users can input and save their contact details. The form is styled using Tailwind CSS and incorporates basic form validation.
This project is licensed under the MIT License. See the LICENSE file for more details.
This is a Next.js project
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
Chukwumdiebube: I did not host this project, everything was done locally. If you have any issues or need any information, please feel free to email me at [email protected].
Developed with ❤️ by Chukwumdiebube Ojinta. Contact: @IamChukwumdiebubeOjinta
A Nigerian developer.