Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vinyl-davyl/ari-assessment-test
https://github.com/vinyl-davyl/ari-assessment-test
Last synced: 11 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/vinyl-davyl/ari-assessment-test
- Owner: Vinyl-Davyl
- Created: 2024-03-05T01:24:47.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-03-06T02:10:22.000Z (11 months ago)
- Last Synced: 2024-11-10T08:13:49.786Z (2 months ago)
- Language: TypeScript
- Homepage: https://ari-assessment-test.vercel.app
- Size: 127 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ari Assessment Test
Project is part of an assessment test involving TypeScript, Tailwind CSS, and Next.js and ShadCn UI library. Consists of a settings page where users can update their profile information and manage settings related to their account.
## Table of Contents
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Installation](#installation)
- [Usage](#usage)
## Features
- **Settings Page**: Users can update their profile information, including company details, LinkedIn profile, avatar image, etc.
- **Form Validation**: The form fields are validated using Zod schema to ensure that the data entered by users meets specific criteria.
- **Avatar Image Handling**: Users can upload and change their avatar images, with validation for file type and size.
- **Tabs Navigation**: The settings page is organized into tabs for easy navigation between different sections.
- **Drag and Drop**: Users can drag and drop images to upload them as avatar images, with visual feedback provided during the process.
- **Error Handling**: Toast notifications are displayed to users for various actions, such as invalid form submissions or file uploads.
## Technologies Used
- **TypeScript**: TypeScript is used for static typing, providing enhanced developer experience and code reliability.
- **Tailwind CSS**: Tailwind CSS is used for styling, allowing for rapid UI development with utility-first CSS classes.
- **Next.js**: Next.js is used as the React framework for server-side rendering and routing, providing optimized performance and SEO benefits.
- **Zod**: Zod is used for form validation, ensuring that user input meets specific validation criteria.
- **React Hook Form**: React Hook Form is used for managing form state and validation, providing a simple and efficient way to work with forms in React applications.
## Installation
To run this project locally, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/your-username/assessment-test.git
```
## Usage
Once the application is running, you can access the settings page by navigating to http://localhost:3000. From there, you can update your profile information, manage settings, and navigate between different tabs.