ArtNFT Marketplace

A Modern Platform for Discovering, Creating, and Trading Digital Art & NFTs

ArtNFT Marketplace is a cutting-edge, full-stack platform designed for artists, collectors, and enthusiasts in the burgeoning world of Non-Fungible Tokens (NFTs). It offers a seamless and engaging experience across web and mobile for discovering unique digital artworks, creating and listing NFTs, and interacting with a vibrant community. This project is structured as a monorepo to manage multiple applications and shared packages efficiently.

✨ Key Features
🏗️ Project Architecture
📁 Current Project Structure
🛠️ Tech Stack
🚀 Getting Started
🎨 Styling & Theming
🤖 AI Integration (Genkit)
📱 Mobile Application (React Native)
🔗 API Layer (REST & GraphQL)
🌍 Building for Production
☁️ Deployment
🤝 Contributing
🗺️ Roadmap
📄 License
📞 Contact

✨ Key Features

(Key features remain largely the same but apply to web and conceptually mobile where relevant. The backend supports these frontends.)

User Authentication (Across Platforms):

* Secure sign-up and login for web users, handled by the central API. * Admin login via the API. * Simulated wallet connection UI.

Dynamic Dashboards (Web & Mobile Home):

* Responsive layouts for web (`apps/web/src/app`) and native experience for mobile (`apps/mobile`). * Personalized content feeds, artist spotlights, category exploration.

Advanced NFT Creation & Listing (Web, with AI):

* User-friendly interface for minting NFTs with AI-powered content assistance (Genkit within Next.js, primarily in `apps/web/src/ai`).

Comprehensive NFT & User Discovery:

* Detailed NFT pages, robust search with filtering, category pages, user profiles accessible via web and mobile.

Robust Admin Panel (`apps/web/src/app/admin`):

* Secure admin login, user/NFT management, category control, promotions, analytics, audit logs, content moderation, site settings.

🏗️ Project Architecture

ArtNFT Marketplace is architected as a monorepo to manage its multiple applications and shared libraries efficiently. This approach enhances code sharing, simplifies dependency management, and streamlines the development workflow.

The core components are:

Applications (apps/):
- Web App (apps/web): A Next.js application serving the main user-facing marketplace and the admin panel. It handles user authentication, NFT discovery, creation (with Genkit AI), and user profiles. The source code is primarily in apps/web/src/, with pages and routes in apps/web/src/app/.
- Mobile App (apps/mobile): A React Native application (placeholder) providing a native experience for iOS and Android users.
- API Service (apps/api): A Node.js (Express.js) backend providing RESTful APIs (GraphQL planned). It handles business logic, database interactions (MySQL/MariaDB via Sequelize), authentication (JWT), and serves data to all frontend applications. Source code is in apps/api/src/.
Shared Packages (packages/):
- ui/: Reusable React UI components (e.g., AppLayout, ArtNFTLogo, GlobalHeader) built with ShadCN UI, shared primarily by apps/web. Source: packages/ui/src/.
- mobile-ui/: (Placeholder) Reusable React Native UI components for apps/mobile.
- utils/: Common utility functions (like cn for classnames) shared across the entire codebase. Source: packages/utils/src/.
- types/: (Placeholder) Centralized TypeScript definitions for API contracts, database models, etc.
- api-client/: (Placeholder) A dedicated client library for frontend applications to interact with apps/api.
- core-logic/: (Placeholder) Shared business logic modules.
Database (database/):
- A MySQL/MariaDB relational database.
- Schema is managed via database/schema.sql and versioned using database migrations (planned).
Communication:
- Client applications (web, mobile) communicate with the central apps/api service.
- Genkit AI functionalities are integrated within the apps/web Next.js server environment (in apps/web/src/ai/).

📁 Current Project Structure

This project utilizes a monorepo structure:

artnft-marketplace/
├── apps/
│   ├── web/                      # Next.js Frontend (User & Admin)
│   │   ├── public/
│   │   ├── src/
│   │   │   ├── app/              # Next.js App Router (pages, layouts)
│   │   │   │   ├── admin/        # Admin panel routes & components
│   │   │   │   └── ...           # User-facing routes
│   │   │   ├── components/       # Web-app specific components (NFTCard, etc.)
│   │   │   │   └── ui/           # ShadCN UI components (specific to web app)
│   │   │   ├── lib/              # Web-app specific utils (e.g., utils.ts for cn)
│   │   │   ├── hooks/            # Web-app specific hooks (e.g., use-toast)
│   │   │   └── ai/               # Genkit AI flows & config
│   │   ├── components.json       # ShadCN config for apps/web
│   │   ├── next.config.ts
│   │   └── package.json
│   ├── mobile/                   # React Native App (Placeholder)
│   │   ├── src/
│   │   └── package.json
│   └── api/                      # Node.js Backend API
│       ├── src/                  # Backend source (Express, Sequelize, etc.)
│       └── package.json
├── packages/
│   ├── ui/                       # Shared React UI components (AppLayout, ArtNFTLogo)
│   │   ├── src/
│   │   └── package.json
│   ├── mobile-ui/                # (Placeholder) Shared React Native UI components
│   │   ├── src/
│   │   └── package.json
│   ├── utils/                    # Shared utility functions (cn utility)
│   │   ├── src/
│   │   └── package.json
│   ├── types/                    # (Placeholder) Shared TypeScript types
│   │   └── package.json
│   └── ...                       # Other shared packages (api-client, core-logic placeholders)
├── database/
│   ├── migrations/
│   ├── seeds/
│   └── schema.sql
├── .gitignore
├── README.md                     # This file
└── package.json                  # Root package.json for monorepo (npm workspaces)

🛠️ Tech Stack

Monorepo Management:

Tooling: NPM Workspaces (TurboRepo or Nx can be added for advanced task running).

Web Frontend & Admin Panel (apps/web):

Framework: Next.js (v15+ with App Router located in apps/web/src/app/)
Language: TypeScript
UI Library: React
UI Components: ShadCN UI (local to apps/web/src/components/ui/)
Styling: Tailwind CSS (configured in apps/web/tailwind.config.ts, main styles in apps/web/src/app/globals.css)
AI Integration: Genkit (by Google) (in apps/web/src/ai/)
Icons: Lucide React
Shared Code: Consumes packages/ui (for AppLayout, ArtNFTLogo), packages/utils (for cn).

Mobile Application (apps/mobile) (Placeholder):

Framework: React Native
(Details similar to previous, consumes shared packages as needed)

Backend API (apps/api):

Runtime: Node.js (Source in apps/api/src/)
Framework: Express.js
Language: TypeScript
AP B1C0 I Styles: RESTful APIs (GraphQL planned)
Database: MySQL / MariaDB
ORM: Sequelize
Authentication: JWT (JSON Web Tokens)
(Details similar to previous)

Shared Packages (packages/*):

Language: TypeScript
packages/ui: Core shared layout and UI primitive components.
packages/utils: Core shared utilities like cn.

🚀 Getting Started

Prerequisites

Node.js (v18 or later)
npm (v7+ for workspace support, or Yarn)
MySQL Server or MariaDB Server
A MySQL/MariaDB client
For Mobile: React Native development environment.

Monorepo Setup

Clone the repository:

git clone https://github.com/jagdish-pulpet/artnft.git
cd artnft

Install dependencies from the root:

npm install # This will install dependencies for all workspaces

Environment Variables:
- Web App (apps/web/.env.local):
  - NEXT_PUBLIC_BACKEND_URL=http://localhost:5000 (or your API's URL)
  - GOOGLE_API_KEY= (for Genkit)
  - COINMARKETCAP_API_KEY= (for Stats page)
- API Service (apps/api/.env):
  - DB_HOST=localhost
  - DB_USER=your_db_user
  - DB_PASSWORD=your_db_password
  - DB_NAME=artnft_db
  - DB_PORT=3306
  - JWT_SECRET=your_jwt_secret
  - PORT=5000 (optional, defaults to 5000 in apps/api/src/server.ts)

Application-Specific Setup

API (apps/api):
- Ensure MySQL/MariaDB server is running.
- Create the database (e.g., artnft_db).
- Apply schema: npm run db:schema:apply --workspace=apps/api (from the root directory) or navigate to apps/api and run npm run db:schema:apply.
Web Frontend (apps/web):
- No additional specific setup beyond environment variables.

Running Development Servers

From the root directory (recommended):
```
# Run both web and API concurrently
npm run dev
```
This typically uses the dev script in the root package.json: "dev": "npm run dev:web & npm run dev:api"
Individually:
1. API (apps/api): In a terminal, from the root: npm run dev:api (or cd apps/api && npm run dev). Runs on http://localhost:5000 (or process.env.PORT).
2. Web App (apps/web): In another terminal, from the root: npm run dev:web (or cd apps/web && npm run dev). Runs on http://localhost:9002.
3. Genkit Dev UI (for apps/web): From the root: npm run genkit:watch --workspace=apps/web (or cd apps/web && npm run genkit:watch). Runs on http://localhost:4000.

🎨 Styling & Theming

Main styles in apps/web/src/app/globals.css.
Tailwind CSS configured in apps/web/tailwind.config.ts.
ShadCN UI components are local to apps/web/src/components/ui/.

🤖 AI Integration (Genkit)

Genkit flows are located in apps/web/src/ai/flows/.
Genkit development server can be run via npm run genkit:watch --workspace=apps/web.

📱 Mobile Application (React Native) (`apps/mobile`)

This is currently a placeholder. Development would involve setting up React Native and integrating with packages/api-client and packages/mobile-ui.

🔗 API Layer (REST & GraphQL) (`apps/api`)

The apps/api service provides RESTful endpoints. GraphQL integration is planned.
Uses Express.js, Sequelize for MySQL/MariaDB.

🌍 Building for Production

npm run build --workspace=apps/web
npm run build --workspace=apps/api
(For monorepo tools like Turborepo, a single turbo run build might be configured in the future).

☁️ Deployment

Frontend (apps/web): Firebase App Hosting, Vercel, Netlify.
Backend (apps/api): Node.js hosting (Google Cloud Run, AWS Elastic Beanstalk, Heroku).
Database: Cloud-hosted MySQL/MariaDB.

🤝 Contributing

(Contribution guidelines would apply to the monorepo as a whole.)

🗺️ Roadmap

Phase 1 (Monorepo & Core):
- Establish Monorepo structure with NPM workspaces.
- Migrate Next.js app to apps/web.
- Migrate Node.js backend to apps/api.
- Refactor key shared elements (UI: AppLayout, ArtNFTLogo; Utils: cn) into packages/*.
- Implement full backend CRUD operations and business logic in apps/api.
- Fully connect apps/web to apps/api for all features.
Phase 2: GraphQL API & Mobile Foundation:
- Define GraphQL schema in apps/api.
- Implement resolvers for GraphQL queries and mutations.
- Update/create packages/api-client to support GraphQL & REST.
- Initialize React Native project in apps/mobile with basic navigation.
Phase 3: Feature Expansion & Polish:
- Develop core mobile screens for apps/mobile.
- Advanced GenAI integrations, personalized recommendations.
- Community features (commenting, messaging).
- Comprehensive testing, performance optimization, security hardening.

📄 License

Distributed under the MIT License.

📞 Contact

Project Lead / Maintainer: [CloudFi] - [artnft.io] Project Link: https://github.com/jagdish-pulpet/artnft

Thank you for checking out ArtNFT Marketplace! We're excited to see how it evolves.

Name		Name	Last commit message	Last commit date
Latest commit History 38 Commits
.idx		.idx
.vscode		.vscode
apps		apps
docs		docs
packages		packages
src		src
.gitignore		.gitignore
.modified		.modified
README.md		README.md
apphosting.yaml		apphosting.yaml
dev.nix		dev.nix
gitignore		gitignore
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.base.json		tsconfig.base.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

ArtNFT Marketplace

Table of Contents

✨ Key Features

🏗️ Project Architecture

📁 Current Project Structure

🛠️ Tech Stack

🚀 Getting Started

Prerequisites

Monorepo Setup

Application-Specific Setup

Running Development Servers

🎨 Styling & Theming

🤖 AI Integration (Genkit)

📱 Mobile Application (React Native) (`apps/mobile`)

🔗 API Layer (REST & GraphQL) (`apps/api`)

🌍 Building for Production

☁️ Deployment

🤝 Contributing

🗺️ Roadmap

📄 License

📞 Contact

Project Lead / Maintainer: [CloudFi] - [artnft.io] Project Link: https://github.com/jagdish-pulpet/artnft

About

Uh oh!

Releases

Packages

Languages

jagdish-pulpet/artnft

Folders and files

Latest commit

History

Repository files navigation

ArtNFT Marketplace

Table of Contents

✨ Key Features

🏗️ Project Architecture

📁 Current Project Structure

🛠️ Tech Stack

🚀 Getting Started

Prerequisites

Monorepo Setup

Application-Specific Setup

Running Development Servers

🎨 Styling & Theming

🤖 AI Integration (Genkit)

📱 Mobile Application (React Native) (apps/mobile)

🔗 API Layer (REST & GraphQL) (apps/api)

🌍 Building for Production

☁️ Deployment

🤝 Contributing

🗺️ Roadmap

📄 License

📞 Contact

Project Lead / Maintainer: [CloudFi] - [artnft.io] Project Link: https://github.com/jagdish-pulpet/artnft

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

📱 Mobile Application (React Native) (`apps/mobile`)

🔗 API Layer (REST & GraphQL) (`apps/api`)

Packages