# Sharenet Frontend

A modern web application built with Next.js, React, and TypeScript for managing users and products.

## Features

- Modern UI with Tailwind CSS and shadcn/ui components
- Type-safe development with TypeScript
- Form handling with React Hook Form and Zod validation
- Responsive design
- Real-time data updates
- Clean and intuitive user interface

## Tech Stack

- **Framework**: Next.js 15.3.3
- **Language**: TypeScript
- **UI Library**: React 19
- **Styling**: Tailwind CSS
- **Components**: shadcn/ui
- **Form Handling**: React Hook Form with Zod validation
- **HTTP Client**: Axios
- **Icons**: Lucide React

## Project Structure

```
frontend/
├── src/
│   ├── app/              # Next.js app directory (pages and layouts)
│   ├── components/       # Reusable UI components
│   │   └── ui/          # shadcn/ui components
│   └── lib/             # Utility functions and API client
├── public/              # Static assets
├── components.json      # shadcn/ui configuration
├── next.config.ts       # Next.js configuration
├── postcss.config.mjs   # PostCSS configuration
├── tailwind.config.js   # Tailwind CSS configuration
└── tsconfig.json        # TypeScript configuration
```

## Getting Started

### Prerequisites

- Node.js (latest LTS version recommended)
- npm or yarn

### Installation

1. Install dependencies:
```bash
npm install
# or
yarn install
```

2. Start the development server:
```bash
npm run dev
# or
yarn dev
```

The application will be available at `http://localhost:3000`.

### Building for Production

```bash
npm run build
# or
yarn build
```

### Running in Production

```bash
npm run start
# or
yarn start
```

## Available Scripts

- `dev`: Start the development server with Turbopack
- `build`: Build the application for production
- `start`: Start the production server
- `lint`: Run ESLint to check code quality

## API Integration

The frontend communicates with the Sharenet backend API. Make sure the backend server is running at `http://127.0.0.1:3000` or update the `API_BASE_URL` in `src/lib/api.ts` to match your backend configuration.

## Features

### Users Management
- View all users
- Create new users
- Edit existing users
- Delete users

### Products Management
- View all products
- Create new products
- Edit existing products
- Delete products

## Development

### Code Style

The project uses ESLint for code linting. Run the linter with:

```bash
npm run lint
# or
yarn lint
```

### TypeScript

The project is written in TypeScript. Type definitions are available for all components and utilities.

### Styling

- Tailwind CSS is used for styling
- shadcn/ui components are used for the UI
- Custom styles can be added in the respective component files

## License

This project is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License - see the [LICENSE.md](../LICENSE.md) file for details.