The platform is a comprehensive, non-custodial, open-source Web3 application, designed to empower creators and collectors while leveraging the advanced functionalities of Reservoir Tools and Thirdweb. Artists can securely mint, distribute, and sell their digital art across multiple chains, with smart contracts tailored through Transient Labs. By integrating Ikigai Labs' T.R.A.C.E. system, authenticity and provenance are guaranteed, ensuring transparency in each transaction.
Curators play a pivotal role, crafting narratives and experiences through a seamless multi-chain aggregator that showcases over 150 marketplaces. Collectors are further engaged through innovative equity tokenization, offering them shared ownership and deeper community involvement. The platform not only supports digital art transactions but fosters a dynamic, evolving ecosystem where creators, curators, and collectors thrive. The concept of 'ikigai' guides this vision, blending technology, innovation, and passion to nurture both digital and physical art spaces through residencies and real-world experiences.
Our project relies on several key dependencies to function. Here's an overview of the main packages used:
next
: ^13.4.7 - The React framework for production.react
: ^18.2.0 - A JavaScript library for building user interfaces.react-dom
: ^18.2.0 - React package for working with the DOM.@reservoir0x/reservoir-kit-ui
: ^1.0.1 - UI components for Reservoir protocol integration.@thirdweb-dev/react
: ^3.14.40 - React hooks and components for Thirdweb integration.@thirdweb-dev/sdk
: ^3.10.59 - Thirdweb SDK for interacting with smart contracts.ethers
: ^5.7.2 - Library for interacting with Ethereum.nuqs
: ^1.11.0 - Next.js URL Query State management.tailwindcss
: ^3.3.2 - A utility-first CSS framework.typescript
: ^5.1.5 - TypeScript language support.For a complete list of dependencies and their versions, please refer to the package.json
file in the project root.
These instructions will help you set up and run the project on your local machine.
Clone the repository:
git clone https://github.com/IkigaiLabsETH/ikigailabs.xyz.git
Navigate to the project directory:
cd project
Install dependencies:
npm install
# or
yarn install
Set up environment variables:
Copy the .env.example
file to .env
and fill in the required values, including your Reservoir API key and Thirdweb project settings.
To start the development server:
Ensure you're in the project directory.
Run one of the following commands:
npm run dev
# or
yarn dev
# or
pnpm dev
Open http://localhost:3000 in your browser to view the application.
The server will automatically reload if you make changes to the source files. You'll see any lint errors in the console.
For production, build the application first: yarn build
Key architectural decisions:
nuqs
Our application follows a modular and organized structure to enhance maintainability and scalability. Here's an overview of the main directories and their purposes:
/app
: Next.js 13+ App Router structure
/api
: API routes/[locale]
: Internationalized routes/components
: Reusable UI components
/ui
: Shadcn UI components/hooks
: Custom React hooks/lib
: Utility functions and configurations/modules
: Feature-specific modules
/collections
: Collection-related functionalitypage.tsx
: Server Component for collections pagecollections-grid.tsx
: Client Component for rendering collectionsuse-collections.ts
: Custom hook for collection data/providers
: Context providers for state management/public
: Static assets/styles
: Global styles and Tailwind configuration/types
: TypeScript type definitions and interfacesThis structure allows for easy navigation, separation of concerns, and scalability as the project grows.
Our application leverages both Reservoir and Thirdweb APIs, as well as custom endpoints. Here's an overview of key API endpoints:
Get Collections
GET /api/reservoir/collections
Fetches a list of NFT collections using Reservoir's API.
Get Collection Details
GET /api/reservoir/collections/{collectionId}
Retrieves detailed information about a specific collection.
Get Tokens
GET /api/reservoir/tokens
Fetches NFT tokens based on specified filters.
Get Contract Metadata
GET /api/thirdweb/contract/{contractAddress}
Retrieves metadata for a specific smart contract.
Create Listing
POST /api/thirdweb/marketplace/create-listing
Creates a new NFT listing on the marketplace.
User Authentication
POST /api/auth/login
POST /api/auth/logout
GET /api/auth/user
Handles user authentication and retrieval of user data.
Marketplace Activity
GET /api/activity
Fetches recent marketplace activity, combining data from Reservoir and on-chain events.
For detailed parameters and response formats, please refer to our API documentation.
git checkout -b feature/AmazingFeature
)git commit -m 'Add some AmazingFeature'
)git push origin feature/AmazingFeature
)This project is licensed under the MIT License.
To learn more about Next.js, take a look at the following resources:
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.