A simple demo app to analyze code snippets in seconds utilizing the power of ChatGPT/OpenAI, snippets submitted and answers received by other users are viewable at the bottom portion of the UI

Client: HTML, Javascript, React, Redux, ChakraUI

Server: Node, Express, Mongoose, MongoDB

The main motivation behind building this project was to try and take all the worry and seemingly negative chatter surrounding AI and how we will all be jobless because of it, and to learn more for myself about what it actually can and can't do, and how I can use it to help myself and others, and learn some stuff in the process. It also seemed perfect since I am always learning and a full-fledged version of this could be helpful to other learners like myself. I thought it would be interesting to see if I could make something to help others developers to understand and learn from code snippets.

The other reasons for building this project were gaining experience more experience with my usual stack of React, Node.js, and Express, while also picking up something a bit new in the form of ChakraUI, and expanding on concepts I've learned in my studies. Lastly, it is also just to show off the power of ChatGpt, as though this is a very simple application non-technical people seem to find it very impressive and almost magical in the way it works.

I hope an app or service like this could help solve the problem of understanding and learning from code snippets. Developers often encounter code snippets that they don't fully understand, which can slow down their workflow and limit their ability to learn from other developers. This project provides an easy-to-use interface for developers to submit code snippets and receive explanations in natural language, allowing them to more easily understand and learn from code snippets.

Somethings I learned during the development of this project include:

Gained more experience building a React frontend, including working with components, state management, and handling user interactions.

Gained experience building a UI using Chakra UI, including working with pre-built components and theming.

Gained experience building a Node.js backend using Express, including handling API requests and integrating with external APIs. This project was also useful in connecting some mental dots for me in moving away from requesting data and API endpoints directly from my frontend code, and instead abstracting it to the backend and making express routes to do all that for me, as well as keep any api keys etc. safe.

Gained experience working with MongoDB and mongoose more, it is utilized in both The Odin Project and Fullstackopen Curriculums, but this was a fun way to put it to use some more and allow for a more interactive app. It was also interesting to plan out and execute how I would prevent any profanity from being displayed on the site due to this new functionality, which I did using the npm package bad-words on the server side.

This last one may seem very specific, but given it's current relevance and business impact I think it is important that I gained experience working with the OpenAI API, including handling authentication, making API requests, and processing the API responses.

I also gained a deeper understanding of how natural language processing works, including techniques like tokenization, part-of-speech tagging, and named entity recognition, which is something I never got to be hands-on with before until it became more readily accessible.

Simple Clean ChakraUI/React frontend

Analyze Code Snippets up to 150 characters (or 300 tokens)

Answers in seconds

View recent code snippets and answers submitted/received by other users