sharenet/frontend/README.md

132 lines
2.8 KiB
Markdown

# 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
MIT