sharenet/frontend

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:

npm install
# or
yarn install

2. Start the development server:

npm run dev
# or
yarn dev

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

Building for Production

npm run build
# or
yarn build

Running in Production

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:

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 file for details.