Snippit is a Chrome extension designed to introduce students to the world of coding through the medium they encounter most frequently: websites. As our lives increasingly move online, it's essential for young people to become tech-literate early on. Snippit aims to spark curiosity in students and encourage them to develop critical coding skills that will be invaluable in the future.
Snippit offers a friendly, guided approach for students to explore the HTML code behind any webpage they visit. When a student interacts with Snippit, the user can use the picker to isolates the specific code snippet for the selected element and provides a simple explanation of how it works. This approach is far less daunting than the traditional "Inspect Element" feature, which can overwhelm beginners with complex and unfamiliar code.
- Interactive Code Exploration: Snippit allows students to explore the HTML behind web elements in a way that is accessible and easy to understand.
- Step-by-Step Guidance: The extension provides a step-by-step walkthrough, helping students build their understanding of how websites are constructed.
- Customizable Learning: Teachers can customize Snippit's home page to suit the educational level of their students, from Year 7 beginners to Year 12 students considering a future in tech.
- Creative Expression: Snippit encourages students to experiment with HTML, allowing them to modify elements such as titles, colors, sizes, and spacing. This feature is especially beneficial for students with a more artistic inclination, showing them how coding can be a tool for creativity.
- Chatbot Integration: A friendly chatbot is integrated into the extension, allowing students to ask follow-up questions and receive explanations in real time.
- React: Utilized for the UI, allowing us to iterate designs quickly and efficiently.
- Tailwind CSS & Shadcn UI: These tools helped us create a visually appealing, standards-compliant, and accessible user interface.
- OpenAI GPT-4 Integration: We used OpenAI's Node.js module to interface with GPT-4 directly on the client, minimizing complexity and latency while ensuring a secure approach.