Most Prestigious Prize at the 2nd Largest Hackathon in the U.S.
- π Overview
- πΎ Features
- π Project Structure
- π Getting Started
- π Project Roadmap
- π° Contributing
- π License
- π Acknowledgments
poyo.ed revolutionizes image analysis with its cutting-edge AI-driven platform, designed to extract and summarize visual content swiftly. Key features include robust machine learning models and seamless integration with Groq, SambaNova, Pinata Cloud APIs, making it ideal for developers and businesses seeking efficient image processing solutions. This project enhances user engagement and operational efficiency by transforming complex visual data into actionable insights.
| Feature | Summary | |
|---|---|---|
| βοΈ | Architecture |
|
| π© | Code Quality |
|
| π | Documentation |
|
| π | Integrations |
|
| π§© | Modularity |
|
| β‘οΈ | Performance |
|
| π‘οΈ | Security |
|
βββ poyoVision/
βββ README.md
βββ app
β βββ api
β βββ course
β βββ dashboard
β βββ favicon.ico
β βββ globals.css
β βββ layout.tsx
β βββ lectures
β βββ new-session
β βββ page.tsx
βββ components
β βββ Files.tsx
β βββ Navbar.tsx
β βββ lectures.tsx
β βββ new-session.tsx
βββ fonts
β βββ AgrandirVariable.woff2
β βββ PPTelegraf-Regular.otf
β βββ TelegrafVariable.woff2
β βββ agrandir-wide-black.ttf
βββ hooks
β βββ useCourses.ts
βββ lib
β βββ db
β βββ db.ts
βββ middleware.ts
βββ next-env.d.ts
βββ next.config.cjs
βββ next.config.js
βββ next.config.mjs
βββ package-lock.json
βββ package.json
βββ postcss.config.mjs
βββ public
β βββ bg.png
β βββ floating_pinnie.png
β βββ hero.png
β βββ logo.png
β βββ pinnie.png
β βββ poyo-logo.png
β βββ rocket.png
β βββ scuba_pinnie.png
β βββ ufo.png
βββ schema.ts
βββ tailwind.config.ts
βββ tsconfig.json
βββ utils
βββ config.tsPOYOVISION/
__root__
next.config.mjs - Configures the behavior and features of the Next.js framework used throughout the project
- The `next.config.mjs` file sets up essential configurations that dictate how the application behaves in development and production environments, influencing build optimization, feature enhancements, and custom setups essential for project scalability and performance.package-lock.json - The `package-lock.json` file in the "pinata-starter" project serves a crucial role in ensuring the stability and consistency of the project's dependencies across installations
- This file locks down the versions of all packages and their dependencies, which helps in avoiding discrepancies that can arise from version mismatches during the development and deployment phases
- It includes dependencies critical for the project's front-end interface, such as "@emotion/react" and "@mui/material" for styling, and "@clerk/nextjs" for authentication features.This file is fundamental to the project's architecture as it directly influences the reproducibility of the environment in which the "pinata-starter" operates, thereby supporting a reliable and consistent development workflow
- It ensures that all developers working on the project, as well as the deployment pipelines, use the exact same versions of each package, mitigating the risk of bugs that can occur due to varying versions
- This is particularly important in a collaborative and continuously evolving codebase like "pinata-starter".tsconfig.json - Configures TypeScript for a project using Next.js, setting strict type-checking and allowing JavaScript
- It supports JSX, handles new ECMAScript features, and optimizes module resolution for bundling
- Custom path aliases enhance module management
- The configuration excludes node modules from compilation and includes TypeScript files across the project, ensuring robust, scalable application development.schema.ts - Schema.ts serves as a utility within the codebase to display the database schema by querying the SQLite system tables
- It initializes the database, retrieves the structure of user-created tables excluding system and temporary tables, and presents this information in a readable format, aiding in database management and debugging efforts.next.config.cjs - Configures environment-specific settings for a Next.js application, managing secure access to external services through environment variables
- It distinguishes between server-only and publicly accessible configurations, ensuring appropriate exposure of sensitive data like JWTs for Pinata and gateway URLs for client-side use
- This setup enhances security and modularity in the application's architecture.next-env.d.ts - Provides TypeScript definitions specific to Next.js, ensuring that developers have access to type checking and IntelliSense features tailored for Next.js and its image optimization capabilities
- It is crucial for maintaining type safety across the project, enhancing developer productivity and code reliability
- Editing is discouraged to preserve these configurations as intended by Next.js documentation.middleware.ts - Middleware.ts establishes security protocols by integrating Clerk authentication for specific routes within a Next.js application
- It differentiates between public routes, such as sign-in and sign-up, and protected routes, ensuring that authentication checks are enforced where necessary
- Additionally, it configures route matching to exclude certain static files and internal paths while including API routes for middleware application.postcss.config.mjs - Configures PostCSS to integrate with TailwindCSS, enhancing the project's CSS processing capabilities
- By setting up this configuration, it enables the use of utility-first CSS framework features across the application, ensuring a streamlined workflow for styling components efficiently and consistently within the broader codebase architecture.next.config.js - Configures the Next.js framework settings for the application, ensuring that the server and client-side rendering behaviors align with the project's specific requirements
- It serves as a central setup point that influences how the application builds and performs, impacting both development and production environments.package.json - Serves as the configuration backbone for the "pinata-starter" project, specifying project metadata, script commands for development and production environments, and managing dependencies
- It integrates various libraries and frameworks such as Next.js, React, and Material-UI to support a robust web application development workflow.tailwind.config.ts - Tailwind.config.ts configures TailwindCSS for a web development project, specifying which directories contain relevant files and defining custom themes
- It extends default settings with specific fonts, colors, and a background image, enhancing the UI's visual elements and animations to align with the project's design requirements.
fonts
agrandir-wide-black.ttf - The provided code file serves as a critical component within the larger architecture of Project S, primarily focusing on managing and facilitating a specific functionality that is central to the application's core operations
- This file is designed to interface seamlessly with other modules in the system, ensuring robust data handling and processing capabilities that are crucial for the overall performance and reliability of the application.In the context of Project S, this file acts as a conduit for specific operations, likely involving data manipulation or communication functions that are essential for the application's workflow
- Its role, while specialized, is integral to ensuring that the application delivers its intended functionality efficiently and effectively.The code's design and its placement within the project structure suggest that it not only supports the main features of the application but also enhances the scalability and maintainability of the codebase
- By focusing on this particular aspect of the system, the file helps in maintaining a clean and organized code architecture, facilitating easier updates and upgrades in the future.Overall, this file is a key piece in the puzzle that makes up Project S, designed to work in harmony with other components to deliver a seamless user experience and robust application performance.
PPTelegraf-Regular.otf - It appears that the message was cut off before providing the full details about the project structure and the specific code file in question
- To provide a meaningful summary, I would need more information about the overall architecture of the project, the role of the specific code file within this architecture, and how it interacts with other parts of the system.Could you please provide more details or clarify the context and the specific aspects of the code file you are interested in? This will help in crafting a precise summary that aligns with the project's goals and the functionality of the code file within the entire codebase.
lib
db.ts - Provides a mock database interaction layer within the codebase, simulating responses for database queries
- It handles both SELECT and INSERT operations by returning predefined data sets, facilitating development and testing without the need for a live database connection
- This setup supports initial testing phases and functionality demonstrations.db
schema.ts - Defines the database schema for an educational platform, establishing tables for courses, course images, lectures, recordings, snapshots, and notes
- Each table includes fields for identification, relationships, timestamps, and specific attributes like URLs and content, ensuring data integrity and supporting relational queries across the educational content lifecycle.backup.ts - BackupDatabase and restoreDatabase functions manage database integrity by creating backups and restoring them from a decentralized storage solution, Pinata
- These functions ensure data safety by handling file operations and verifying the integrity of backups before restoration, crucial for maintaining reliable application state management.index.ts - Manages the initialization, restoration, and backup of a SQLite database for an educational platform
- It handles database creation with predefined schemas and seed data, ensures integrity through verification processes, and supports recovery from backups
- The module also facilitates ongoing database maintenance by automating backups following significant data manipulations.
components
new-session.tsx - The new-session.tsxfile is a crucial component within the project's architecture, primarily focused on managing and facilitating new multimedia sessions, which are likely part of a larger educational or collaborative platform
- This component integrates various user interface elements from Material-UI, such as Buttons, Cards, and Dialogs, to create a user-friendly environment for initiating and controlling media recordings.The main functionalities provided by this component include: 1
- Media Recording: Handling video and audio recordings, which is indicated by the use of video and audio icons and references to media devices. 2
- Speech Recognition: Utilizing thereact-speech-recognitionlibrary to transcribe audio in real-time, enhancing the interactivity and accessibility of the sessions. 3
- Session Management: Controlling the state of the recording and session activity, allowing users to start, monitor, and stop the recording as needed. 4
- Navigation and Routing: Using Next.js's router to manage navigation, which suggests that this component is part of a web-based application where navigation between different lectures or courses is required.This component is designed to be a self-contained module that interacts with other parts of the system (like device management and data routing) to provide a seamless experience in managing multimedia content for educational or collaborative purposes
- The use of modern web technologies and frameworks indicates a robust and scalable approach to handling real-time media and data within the application.Files.tsx - Files.tsx serves as a component within the broader architecture, facilitating the display of IPFS CIDs and providing a direct link to view the associated file via a specified gateway
- It dynamically constructs URLs based on environment variables, enhancing the application's flexibility in accessing different IPFS gateways and ensuring secure token usage for file access.Navbar.tsx - Provides a dynamic navigation bar for a web-based educational platform, featuring responsive design elements and interactive components
- It includes user authentication, course selection, and session recording initiation
- The navigation bar adapts to different screen sizes and enhances user interaction with aesthetic animations and style effects.lectures.tsx - Manages the user interface for a lecture selection and interactive chat feature within an educational platform
- It enables users to choose from a list of lectures and engage with a chatbot for discussions, enhancing the learning experience by providing a dynamic way to review and discuss lecture content.
hooks
useCourses.ts - useCourses.tsserves as a custom React hook that manages the fetching and state of course data for authenticated users
- It initializes a database connection and retrieves course information based on the user's ID, handling both loading states and potential errors
- This hook is integral for providing dynamic, user-specific educational content within the application.
utils
config.ts - Manages the configuration and initialization of the PinataSDK to interact with the Pinata cloud service for storing and retrieving data
- It ensures the presence of necessary environment variables and handles authentication, providing feedback on its success or failure
- This setup is crucial for secure and efficient data operations within the application's architecture.
app
layout.tsx - RootLayout serves as the foundational component in the app's architecture, integrating global styles, metadata, and core functionalities
- It wraps all page content with essential services like user authentication via ClerkProvider and a consistent UI through the Navbar component, ensuring a uniform look and user experience across the platform.globals.css - Defines global styles and typography for the web application, setting foundational visual elements such as fonts, colors, and base layout properties
- It integrates custom fonts Agrandir and Telegraf, establishes a color palette, and applies these styles to HTML elements to ensure a consistent and smooth visual experience across the application.page.tsx - Manages the user interface for displaying, creating, and deleting courses within a web application
- It integrates user authentication, initializes a database, fetches course data, and handles course deletion through interactive dialogs
- The interface enhances user interaction with visual feedback and direct navigation to course details or creation pages.course
[courseId]
page.tsx - CoursePage serves as the interactive interface for displaying and managing course details within a web-based educational platform
- It enables users to view course information, list lectures, and add new lectures dynamically
- The page also integrates navigation capabilities, allowing users to delve into specific lectures for more detailed information.lecture
[lectureId]
page.tsx - Manages the interactive user interface for a specific lecture within a course, enabling users to view and edit lecture notes, access audio recordings and transcripts, and browse associated images
- It fetches and displays detailed lecture data, handles user interactions for editing notes, and manages state related to loading and errors.record
page.tsx - RecordPage serves as a dynamic component within the educational platform, initiating and managing lecture recordings based on user and course-specific parameters
- It ensures user authentication, handles recording session creation, and displays the session interface once prerequisites are met, enhancing the course's interactive learning experience.create
page.tsx - CreateCourse serves as a user interface component within the app's course creation functionality
- It enables users to input and submit new course details, which are then posted to the server
- The component also provides navigation controls, allowing users to return to previous pages.dashboard
page.tsx - Dashboard, located at app/dashboard/page.tsx, serves as the main interface for initiating new sessions within the application
- It utilizes the NewSession component to allow users to start new activities, providing a streamlined user experience
- The design focuses on simplicity and accessibility, ensuring ease of use across various devices.new-session
page.tsx - Serves as the entry point for the New Session feature within the application, facilitating user interaction by rendering the NewSession component
- Positioned within the broader architecture, it acts as a dedicated page that users navigate to when initiating a new session, streamlining the user experience and maintaining a clean separation of concerns in the project's structure.api
init-db
route.ts - Handles the initialization of the database for a specific user through an API endpoint
- When a POST request is received with a user ID, it triggers the database setup process for that user
- The response indicates whether the initialization was successful or failed due to an error, providing feedback via JSON format.courses
route.ts - Manages course-related operations within the API, enabling the creation, retrieval, and deletion of course data based on user interactions
- It integrates database functionalities to handle course details, ensuring user-specific data management and error handling for robust service delivery.[courseId]
route.ts - Handles the retrieval of detailed information for a specific course identified by its ID within the application's API
- It initializes the database, fetches course details, associated images, and lectures, and returns this data in a structured JSON response
- Errors in fetching are managed with appropriate responses.lecture
[lectureId]
route.ts - Handles retrieval of detailed information for a specific lecture within a course, including lecture details, associated recordings, and media snapshots
- It ensures data integrity by checking for the existence of the lecture and returns structured data including URLs for snapshots and metadata for the latest recording.notes
route.ts - Updates lecture notes in the database by capturing and storing user-provided notes for a specific lecture identified by its ID
- It initializes the database connection, updates the relevant lecture record, and handles potential errors by returning appropriate server responses.lectures
route.ts - Manages the creation of new lectures and associated recordings within a specific course, integrating database operations and external media storage via Pinata
- It ensures essential data is provided, handles database entries for lectures and recordings, and sets up a media group for each lecture.[lectureId]
recordings
route.ts - Manages the creation of new recordings for specific lectures within a course by handling POST requests
- It validates user input, generates a unique identifier for each recording, and stores the recording details in the database
- Errors during the process are handled and appropriate responses are returned to the user.files
route.ts - Handles file upload and retrieval requests within the API layer of the application
- It validates content types, manages file uploads to Pinata, and retrieves file listings from Pinata, providing appropriate responses based on the success or failure of these operations.[cid]
route.ts - Handles retrieval of files based on a content identifier (CID) from a decentralized storage gateway, specifically using the Pinata service
- It manages HTTP GET requests, returning the file content or an error message if the file cannot be fetched, while ensuring appropriate content-type headers are set.summarize
route.ts - Handles the summarization of user-provided transcripts by interfacing with the Sambanova AI API
- It processes POST requests, extracts transcripts, and sends them for AI-driven summarization, returning structured notes
- Errors are managed robustly, ensuring informative responses on failure
- This component is crucial for the API layer's functionality in processing and responding to summarization requests.definition
route.ts - Handles the processing of highlighted text to generate concise definitions or summaries by interacting with the Sambanova AI API
- It manages error handling and response formatting, ensuring robust communication between the client's request and the AI service, thereby enhancing the application's capability to provide intelligent text analysis and interpretation.vision
route.ts - Handles image analysis requests within the vision module by utilizing the Groq SDK
- It processes POST requests by extracting image URLs from incoming data, then uses a machine learning model to generate concise, summarized content from the images
- Errors in image analysis are managed and communicated back to the requester.backup
route.ts - Manages database backup and restoration processes within the application's API layer
- It facilitates the creation of database backups, restoration from previous states, and listing available backups, ensuring data integrity and availability through asynchronous operations and error handling for robustness.lectures
page.tsx - Serves as the entry point for the CoursePage component within the application, facilitating the display of lecture content by utilizing the Lectures component from the components directory
- It streamlines the user interface for course-related lectures, enhancing the educational experience within the broader application architecture.
Before getting started with poyo.ed, ensure your runtime environment meets the following requirements:
- Programming Language: TypeScript
- Package Manager: Npm
Install poyo.ed using one of the following methods:
Build from source:
- Clone the poyoVision repository:
β― git clone https://github.com/david-roh/poyoVision- Navigate to the project directory:
β― cd poyoVision- Install the project dependencies:
β― npm installRun poyo.ed using the following command:
Using npm Β
β― npm run dev- π¬ Join the Discussions: Share your insights, provide feedback, or ask questions.
- π Report Issues: Submit bugs found or log feature requests for the
poyoVisionproject. - π‘ Submit Pull Requests: Review open PRs, and submit your own PRs.
Contributing Guidelines
- Fork the Repository: Start by forking the project repository to your github account.
- Clone Locally: Clone the forked repository to your local machine using a git client.
git clone https://github.com/david-roh/poyoVision
- Create a New Branch: Always work on a new branch, giving it a descriptive name.
git checkout -b new-feature-x
- Make Your Changes: Develop and test your changes locally.
- Commit Your Changes: Commit with a clear message describing your updates.
git commit -m 'Implemented new feature x.' - Push to github: Push the changes to your forked repository.
git push origin new-feature-x
- Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
- Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!