ProfitPeak | Devpost

How we built it

We utilized Node.js in conjunction with the React framework and Tailwind CSS for styling. To integrate the OpenAI API, we acquired an API key, embedded it into a secured environment file, and installed the necessary API packages for our interface. Our development approach involved creating modular components in JavaScript files, which were then imported into the main index.js file to construct the structural and aesthetic foundation of our website. Key UI elements included user input fields, dropdown menus, and button components, facilitating user interaction for data entry, navigation, and selection of profit divisions.

For API integration, we referred to the Chat GPT 4 documentation to understand the basics. We employed asynchronous programming using async and await to ensure proper rendering and data flow. When a user uploads a file to our website, it is stored in a Supabase bucket. The file is then converted into a URL, enabling access within our code. This URL is passed to the Chat GPT API, which generates a description of the content. Users provide additional inputs, such as production time, production cost, and desired profit which are captured and stored. We concatenated the generated description with user inputs to formulate a comprehensive prompt for Chat GPT, which then outputs a price prediction displayed via a popup.

Challenges we ran into

Throughout the development process, we encountered a steep learning curve. Initial challenges included implementing fundamental functionalities with integrating the API. However, through persistent trial and error, we overcame these obstacles. Designing and implementing the drag-and-drop file upload feature was particularly challenging. Assistance from mentors was crucial in resolving these issues and advancing our project.

Accomplishments that we're proud of

We successfully developed a fully functional web application featuring user inputs, dropdown menus, and button components. We integrated various data sources, including OpenAI API calls to Chat GPT 4 and file uploads. Our team demonstrated resilience in debugging and resolving numerous errors. Additionally, we deployed the React application to a web server, making it accessible to the public.

What we learned

This project provided significant learning opportunities, particularly in React development. Utilizing React and JavaScript documentation, we mastered the syntax and developed a functional product. We also gained proficiency in API integration, transforming from complete novices to capable implementers of full-stack web applications. Our use of Bootstrap for UI customization enhanced our understanding of design principles, allowing us to create visually appealing buttons and a drag-and-drop upload feature. Overall, the hackathon experience enriched our web development skills and prepared us for future projects.

What's next for ProfitPeak

Future iterations of ProfitPeak will focus on adding an annual subscription model synchronized with user accounts. We aim to implement a feature allowing users to access their transaction history and review previous product prices. Additionally, we plan to expand our product offerings to include resale and thrifting items, broadening the application's scope and utility.