The project is a web application that combines elements of social media, AI art generation, and NFT (non-fungible token) creation. The core functionalities include fetching and displaying media from an Instagram feed, generating AI art from selected photos, and minting NFTs on the Solana blockchain. The purpose of the project is to provide a platform where users can discover and create unique digital art through the integration of machine learning and blockchain technology. Its value proposition lies in its ability to offer users a seamless and intuitive experience for exploring, generating, and monetizing AI art.
📦 Features
Feature
Description
⚙️
Architecture
The codebase uses a modular architecture with components separated into different directories. The main logic is organized into modules, promoting code reusability and easy maintenance.
📄
Documentation
The codebase includes a well-documented README file that provides an overview of the project, installation instructions, and usage examples. The code itself is well-commented.
🔗
Dependencies
The project relies on external libraries such as Flask, SQLAlchemy, and Requests. These dependencies are well-managed using a requirements file.
🧩
Modularity
The codebase is structured with modularity in mind. Each module has a specific responsibility and can be easily replaced or extended without affecting the rest of the system.
🧪
Testing
The project includes a tests directory with unit tests for the main functionality. The tests are written using the unittest framework and cover key components and edge cases.
⚡️
Performance
The codebase is designed with performance in mind, utilizing caching mechanisms, and optimizing queries to minimize database hits. However, further performance profiling and optimization can be done.
🔐
Security
The project includes measures like input validation, authentication, and authorization to protect data and functionality. Further security audits and continuous monitoring are recommended.
🔀
Version Control
The project uses Git for version control. The repository has a well-maintained commit history, enabling easy tracking and collaboration. Branching strategies such as feature branching are used.
🔌
Integrations
The codebase integrates with external APIs to fetch cryptocurrency data. It also includes a Dockerfile for easy deployment in containerized environments.
📶
Scalability
The modular architecture and separation of concerns enable the system to handle growth. However, scalability can be improved further by optimizing data processing and using distributed systems if required.
This code is a configuration file for Tailwind CSS. It imports the Next UI library and sets up various customization options like future features, content paths, theme extensions, and dark mode. The code also includes a plugin for Next UI integration.
The code in next.config.js defines the domains and remote patterns for images in the application. It allows the application to fetch images from specific domains like res.cloudinary.com and scontent.cdninstagram.com, and also sets remote patterns for certain protocols and hostnames.
The code sets up environment variables for various functionalities, including authentication, API tokens, Solana network configuration, and custom RPC URL.
The.nvmrc file stores the version number of Node.js required for the project. It ensures that the correct version is installed, enabling compatibility and avoiding potential conflicts. This file simplifies the setup process and guarantees that the project runs on the specified Node.js version.
The code in postcss.config.js sets up the PostCSS plugins tailwindcss and autoprefixer for processing CSS. Tailwindcss provides a utility-first CSS framework, and autoprefixer adds vendor prefixes to CSS rules.
The code in the styles/index.css file sets up the base, components, and utilities for the Tailwind CSS framework. It also includes a CSS rule that applies a clipping path to images with the lazy loading attribute if certain browser conditions are met.
The code in "hooks/useApi.ts" is a custom React hook called "useReplicate". It takes a media URL and an optional onSuccess callback function as parameters. The hook uses Axios to make a POST request to a server API with the media URL and a selected model. It handles loading, error, and success states, and returns the data, a function to generate an AI image, and isLoading and error flags. The onSuccess callback is called with the output if available.
The "range" function in the "utils/range.ts" file is designed to create an array of numbers within a specified range. It takes two parameters, "start" and "end", and generates an array containing all the numbers from "start" to "end" (exclusive). If only one parameter is provided, it assumes that it represents the end value, with the start value defaulting to 0. The function then iterates from the start value to the end value, pushing each number into the "output" array. Finally, it returns the generated array.
The code exports a function that retrieves results from a cloudinary API. It checks if the results are already cached, and if not, it fetches them, caching them for future use. The function returns the cached results.
This code exports the Cloudinary configuration, which sets up the connection to the Cloudinary service by providing the cloud name, API key, API secret, and secure flag.
The code in "utils/constants.ts" exports an array of objects containing URLs and descriptions of images from a mock Instagram feed. These images are displayed in different spots capturing the essence of a city.
The code in utils/downloadPhoto.ts provides a function to download a photo. It fetches the photo from a given URL, converts it to a blob, creates a downloadable URL, and triggers the download. It also handles the case when a filename is not provided.
This code is a custom hook called useLastViewedPhoto that utilizes react-hooks-global-state to create and access a global state variable called photoToScrollTo. It returns the value of photoToScrollTo.
The code in utils/types.ts defines two interfaces: ImageProps and SharedModalProps. ImageProps represents the properties of an image, including its id, media type, media URL, username, and an optional timestamp. SharedModalProps represents the properties of a shared modal, including the index, an array of images, the current photo being displayed, a function to change the photo id, a function to close the modal, a flag to indicate navigation, and an optional direction.
The code in utils/animationVariants.ts exports an object named'variants' that contains three properties:'enter','center', and'exit'. The'enter' and'exit' properties are functions that take a'direction' parameter and return an object with'x' and'opacity' properties. The'center' property is an object with fixed values for'x' and'opacity'. These properties are used to define different animation styles for entering, centering, and exiting components.
The code defines a Footer component that includes navigation links and social media icons. It is structured using CSS flexbox for responsiveness. The component is exported for use in other parts of the application.
The code is a React component (MintButton) that handles the minting of an NFT. It uses the Solana blockchain and the Metaplex library for NFT creation and metadata uploading. The mintOne function handles the logic for minting the NFT, including uploading metadata and creating the NFT object. It also handles displaying a button for minting.
The Modal component is responsible for generating AI art from a given photo. It uses various dependencies and hooks to handle the generation process, including rendering the image, selecting the desired AI model, and providing options to generate and mint the AI image. It also includes a Notification component for displaying messages related to the generation process.
The "Hero" component renders a section with a title and description. It uses the Next UI library for buttons and links. The component is responsible for displaying a visually appealing introduction to the application, showcasing a candy machine. It utilizes responsive design to adjust the layout for different screen sizes.
This code defines a component called Roadmap, which renders a roadmap section with three items. Each item includes a title, date, and description. The component is built using HTML and CSS classes to style the elements.
The About component renders a section that provides information about the application. It includes a heading, a description, and three sub-sections with icons, titles, and descriptions for each feature: onboarding, easy minting, and monetization. The component uses responsive styling and gradient backgrounds for visual appeal.
The Waitlist component is a React functional component that renders a section for users to join a waitlist. It displays a title and a description, explaining the purpose of the waitlist. The component is responsive, with different styles applied at different screen sizes.
The code is a React component that sets up a Solana wallet for connecting to the Solana blockchain. It uses the "@solana/wallet-adapter" and "@solana/wallet-adapter-react-ui" libraries to provide wallet functionality and UI components. The component initializes a Phantom wallet adapter and connects it to the Solana network specified in the environment variables. It then wraps the provided children components with the necessary wallet context providers for interacting with the blockchain.
This code defines a Navbar component that includes a brand logo and navigation links. It also has a button that redirects to a specific URL. The Navbar is responsive and has styling applied to it.
The Carousel component displays a collection of images with corresponding numbers. Each image is displayed in a container with a unique number. The component also includes introductory text and styling for a visually appealing carousel effect.
This code defines the Notification component that displays a success message with an icon. It uses the Transition component from @headlessui/react for smooth animations. The show prop determines whether the notification is visible or hidden. After 5 seconds, the notification automatically hides.
The code includes CSS rules for styling web pages, particularly a carousel animation, color scheme switching based on user preferences, and smooth scrolling.
The code is for the index page of a website. It imports various components such as Navbar, Hero, About, Carousel, Roadmap, Waitlist, and Footer. These components are rendered in the order they are imported. The NextUIProvider wraps the entire page, providing UI functionalities.
This code extends the default Next.js Document component to customize the HTML document rendered on the server. It sets meta tags for social media sharing and defines the structure of the HTML document by including a head and body section.
The code defines a React app, where it renders a parent component called "Wallet" and wraps the main component in it. This allows for the addition of wallet functionality to the entire app.
The code is a Next.js page component that renders a Modal component. It receives a "media_url" query parameter from the router and passes it as a prop to the Modal component. The page is wrapped in a main element with a specific style.
This code is the main page component of a web application. It handles user input of an Instagram username, fetches media from an API based on the username, and displays the media images on the page. It also includes integration with a Solana wallet for authentication. The code uses Next.js framework and various libraries for rendering, routing, and API requests. Plus, it dynamically imports a wallet component and handles loading states.
The code is an API endpoint that handles requests to generate outputs using different models. It initializes a Replicate instance, defines models with their prompts and negative prompts, and runs the specified model with the provided input data. The output is returned as a response.
This code is an API endpoint that fetches a user's media from an external API. It retrieves the user's profile information and then fetches the user's media based on the profile ID. It then formats the media URLs and descriptions before responding with the data. In development mode, it responds with mock data.
This code is responsible for setting up authentication using Instagram as a provider. It configures the Instagram API credentials, handles JWT generation and session management, and handles redirects. It exports the authentication options and is used by NextAuth to enable authentication functionality.
🚀 Getting Started
Dependencies
Please ensure you have the following dependencies installed on your system:
- ℹ️ Dependency 1
- ℹ️ Dependency 2
- ℹ️ ...
🔧 Installation
Clone the cryptoFeedNFT repository:
git clone https://github.com/Peixer/cryptoFeedNFT
Change to the project directory:
cd cryptoFeedNFT
Install the dependencies:
npm install
🤖 Running cryptoFeedNFT
npm run build && node dist/main.js
🧪 Tests
npm test
🛣 Roadmap
ℹ️ Task 1: Implement X
ℹ️ Task 2: Implement Y
ℹ️ ...
🤝 Contributing
Contributions are always welcome! Please follow these steps:
Fork the project repository. This creates a copy of the project on your account that you can modify without affecting the original project.
Clone the forked repository to your local machine using a Git client like Git or GitHub Desktop.
Create a new branch with a descriptive name (e.g., new-feature-branch or bugfix-issue-123).
git checkout -b new-feature-branch
Make changes to the project's codebase.
Commit your changes to your local branch with a clear commit message that explains the changes you've made.
git commit -m 'Implemented new feature.'
Push your changes to your forked repository on GitHub using the following command
git push origin new-feature-branch
Create a new pull request to the original project repository. In the pull request, describe the changes you've made and why they're necessary.
The project maintainers will review your changes and provide feedback or merge them into the main branch.
📄 License
This project is licensed under the ℹ️ LICENSE-TYPE License. See the LICENSE-Type file for additional info.
👏 Acknowledgments
- ℹ️ List any resources, contributors, inspiration, etc.
