DEV Community: Shivam

FreshMart: Fresh Groceries, Smart Shopping — An Interactive Online Grocery Store 🥬

Shivam — Tue, 27 Oct 2026 17:26:27 +0000

FreshMart — Fresh Groceries, Smart Shopping 🥬

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine

What I Built

I built FreshMart, a modern and responsive online grocery store website designed to make everyday grocery shopping simple, convenient, and enjoyable.

The website allows users to explore grocery products, search for items, filter products by category, add groceries to a shopping cart, adjust quantities, and calculate their order total. It also includes a checkout demonstration, delivery fee calculations, and a newsletter subscription interface.

I built FreshMart using HTML, CSS, and vanilla JavaScript, focusing on an attractive interface and interactive shopping features without relying on heavy frameworks.

For the Hacktoberfest Week 4 theme, Ghost in the Machine, I explored how the logic running behind a website can create an experience that feels responsive and intelligent. Every search, category filter, cart update, and price calculation happens through JavaScript working behind the scenes.

Although FreshMart does not currently use an AI model, it demonstrates how web technologies can create a useful, interactive experience. The project also provides a foundation for future AI-powered grocery recommendations, intelligent shopping assistants, and personalized shopping experiences.

Demo

Live Demo: https://shivamsingh3311.github.io/GroceryStore/

You can run the website locally by downloading the project files and opening index.html in a browser.

Code

GitHub Repository: https://shivamsingh3311.github.io/GroceryStore/

The project contains four main files:

index.html — Website structure and user interface.
style.css — Styling, responsive layouts, animations, and shopping cart design.
script.js — Product search, category filters, cart management, delivery calculations, and demo checkout.
README.md — Project documentation, setup instructions, features, and future improvements.

How I Built It

I built FreshMart using three core web technologies:

HTML5: Created the website structure, product sections, search bar, cart drawer, and checkout form.
CSS3: Designed a clean grocery-shopping interface with green colors, responsive product cards, hover effects, and mobile-friendly layouts.
JavaScript: Implemented product rendering, search functionality, category filtering, shopping cart operations, quantity controls, subtotal calculations, delivery charges, and the demo checkout flow.

I kept the project lightweight and beginner-friendly, without requiring frameworks

StayEase: A Modern Hotel Booking Website for Seamless Travel Planning

Shivam — Sun, 25 Oct 2026 03:17:35 +0000

StayEase: A Modern Hotel Booking Website Built with HTML, CSS & JavaScript

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady

What I Built

I built StayEase, a modern and responsive hotel booking website designed to make exploring hotels and planning trips easier.

The website allows users to explore hotel listings, view prices and ratings, search for destinations, select check-in and check-out dates, choose the number of guests, and view an interactive booking summary.

The main goal was to simplify the hotel discovery experience through a clean interface and straightforward interactions.

Key Features

Search for hotels by destination.
Select check-in and check-out dates.
Choose the number of guests.
Browse hotel cards with images, prices, locations, and ratings.
View a booking summary with an estimated stay cost.
Use a responsive interface on desktop, tablet, and mobile devices.

StayEase is a frontend demonstration project. It uses sample hotel data and does not create real reservations or process payments.

Demo

https://shivamsingh3311.github.io/StayEase-Hotel-Booking/

The website can be run locally in a browser.

Code

The project is built using three core web technologies:

HTML5 for the website structure.
CSS3 for styling, layouts, and responsive design.
JavaScript for hotel search, date validation, booking summaries, and confirmation dialogs.

The project contains four files:

index.html
style.css
script.js
README.md

GitHub repository:
https://shivamsingh3311.github.io/StayEase-Hotel-Booking/

How I Built It

I built StayEase using vanilla HTML, CSS, and JavaScript without relying on a frontend framework.

HTML provides the page structure, including the navigation bar, hotel listings, search form, and booking dialog.

CSS creates the visual design with a modern color palette, hotel photography, responsive layouts, and interactive hover effects.

JavaScript powers the interactive functionality. It validates dates, filters hotel listings by destination, calculates the estimated cost of a stay, and displays a booking confirmation.

I also added responsive styling so the website adapts to smaller screens.

Although the project is being submitted in an open-source AI challenge, the current StayEase implementation does not integrate an AI model. Its functionality is implemented using standard frontend web technologies. Integrating an open-source AI model for personalized hotel recommendations or travel planning would be a potential future improvement.

Why Does Open Innovation Matter?

Open innovation makes it easier for developers to learn, experiment, and build useful software without depending on expensive proprietary platforms.

StayEase uses standard web technologies that are widely available and accessible to beginners. Anyone can inspect the code, customize the design, add features, or extend the project into a more complete hotel booking application.

This project also demonstrates how a simple frontend can provide a useful starting point for a larger application.

Future improvements could include integrating an open-source AI model to recommend hotels based on user preferences, suggest destinations, or generate personalized travel itineraries.

My Agent Session

I created StayEase by developing the HTML structure, styling the interface, and implementing the JavaScript interactions.

I do not have a published DevRelay agent session for this project to link here.

The Lazy Payoff

StayEase simplifies the initial hotel discovery process by bringing destination search, hotel details, and booking summaries together in one interface.

Instead of manually comparing a separate list of sample hotels, users can filter the available listings and review an estimated stay cost in a few steps.

The project currently demonstrates this workflow using sample data. Actual time savings and real booking performance have not yet been measured.

Prize Categories

StayEase is currently a frontend hotel booking demonstration built with HTML, CSS, and JavaScript.

It does not yet include open-source AI integration, so I would need to add an eligible AI component and verify the official challenge requirements before claiming an AI-specific partner prize category.

Thanks for checking out StayEase! This project is a step toward building accessible, user-friendly web applications and exploring how open-source AI could make travel planning smarter in the future.

Build. Learn. Improve. Repeat. 🚀

CraftCopy: Build Product Listings with Open-Source AI — A Side Hustle for Small Businesses

Shivam — Thu, 15 Oct 2026 09:19:55 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle

What I Built

I built CraftCopy — Local AI Listing Studio, a browser-based AI assistant that helps small businesses create product listings quickly and easily.

Many small business owners, handmade-product sellers, Instagram shops, and online resellers spend valuable time writing product titles, descriptions, and search tags. Hiring a copywriter or paying for a hosted AI service may not be practical for everyone.

CraftCopy aims to solve this problem by generating editable product listing content directly in the browser.

Users can enter their product name, category, features, target audience, preferred brand voice, and keywords. The application then generates a product title, description, and relevant search tags.

Key features

AI-powered product title generation
Product description writing
Search tag suggestions
Customizable brand tone and target audience
Editable results with copy buttons
Export listings as a text file
Browser-based inference without a paid AI API key

My goal is to make AI-assisted product writing more accessible and affordable for independent sellers.

Demo

Try CraftCopy here:

Live Demo — CraftCopy Local AI Listing Studio

Enter a product name and its features, choose your preferred tone, and generate a draft listing.

Code

The project is open for everyone to explore and improve.

GitHub Repository — CraftCopy Local AI Listing Studio

The project is built with:

HTML — page structure and product input form
CSS — responsive layout and styling
JavaScript — application logic and AI integration
Transformers.js — running the model in the browser
Xenova/flan-t5-small — the open-weight text-generation model used by the application

How I Built It

I built CraftCopy using HTML, CSS, and JavaScript, keeping the application lightweight and accessible through a web browser.

For the AI component, I used Transformers.js with the browser-compatible Xenova/flan-t5-small model. Instead of sending product information to a hosted text-generation API, the application loads the model into the browser and performs text generation on the user's device.

The application takes the user's product details and creates prompts for three tasks:

Generate a concise product title.
Write a product description based on the supplied information.
Suggest relevant search tags.

The results appear in an editable interface, allowing users to review, modify, copy, and export their listing.

I also implemented a fallback template so users can still receive an editable draft if the AI model fails to load. The application identifies this as template mode rather than presenting the fallback as AI-generated content.

The model and supporting JavaScript library need to be downloaded on first use, so an internet connection is initially required. Subsequent caching and offline availability depend on the browser and its stored resources.

Why Does Open Innovation Matter?

Open innovation is important for CraftCopy because the project aims to make useful AI tools more affordable, adaptable, and privacy-conscious for small businesses.

1. Privacy and control

The application performs text generation in the browser rather than sending product details to a hosted text-generation API. This gives sellers more control over their product information.

2. Lower operating costs

There is no per-request charge from a paid AI inference API. This can make experimentation and frequent listing generation more affordable, although users still need a compatible device and may incur internet and electricity costs.

3. Freedom to customize

Developers can modify prompts, experiment with compatible models, and add specialized instructions for different product categories. For example, a jewellery seller could use different listing rules from a vintage clothing reseller.

4. Less vendor lock-in

The project does not depend on a single paid AI provider's API pricing or availability. The model and application can be changed as the project evolves.

5. Learning through open technology

Using open-source tooling and an inspectable codebase makes it easier for other developers to learn from the project, suggest improvements, and contribute new features.

For this project, open innovation makes it possible to explore a small-business AI product without immediately taking on the cost and complexity of a paid inference service.

My First User

CraftCopy is designed for independent sellers, including handmade-product creators, Instagram shops, and small e-commerce businesses.

My next step is to share the application with a few sellers and ask them to create real listings with it. I want to understand whether the generated content saves them time, what improvements they need, and whether they would pay for a more advanced version.

I have not included claims about paying customers or user feedback because those should come from actual testing. I plan to use the feedback to prioritize features such as batch listing generation, saved brand profiles, and CSV export.

Prize Categories

Primary category: Side Hustle — building an AI-powered tool intended to solve a practical business problem and potentially become a paid service.

I am focusing on the challenge's open-source AI theme by using an open-weight model and browser-based inference.

CraftCopy is my attempt to turn a practical problem into a small, useful AI product. I hope to keep improving it through real-world testing, open collaboration, and feedback from independent sellers.

Thanks for checking out my project!

TouchGrass AI: Using Open-Source AI to Turn Screen Time into Green Time

Shivam — Fri, 09 Oct 2026 11:09:00 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

What I Built

🌿 TouchGrass AI — Less Screen Time, More Green Time

TouchGrass AI is an AI-powered web application designed to encourage people to spend less time on screens and more time exploring the outdoors.

In today's digital world, students, developers, remote workers, and many others spend hours using their devices. TouchGrass AI aims to turn that screen time into an opportunity to discover real-world experiences.

The application suggests outdoor activities based on the user's mood, available time, location, and interests. It also includes outdoor challenges, progress tracking, and a personal activity journal to encourage users to build healthier digital habits.

Key features:

🤖 AI-powered outdoor adventure recommendations
🌱 Personalized suggestions based on mood and interests
⏱️ Activities suited to available free time
🎯 Outdoor challenges and missions
📈 Progress tracking
📔 Personal activity journal
🎨 A responsive, nature-inspired user interface

The main idea is simple: instead of using AI to keep people on their screens, use AI to inspire them to step outside.

Demo

🌐 Live Website:
https://shivsi3399.github.io/Touchgrass-ai/

The project is deployed using GitHub Pages.

Code

💻 GitHub Repository:
https://github.com/Shivsi3399/Touchgrass-ai

The repository contains the source code for the website, including the HTML structure, CSS styling, and JavaScript functionality.

How I Built It

I built TouchGrass AI using HTML, CSS, and JavaScript, with an open-weight AI model running locally through Ollama.

Technology stack:

HTML5: Website structure and content.
CSS3: Responsive layout and nature-inspired design.
JavaScript: User interactions, activity generation, challenges, and progress tracking.
Ollama: Local AI model execution and API access.
Qwen3 4B: Open-weight language model configured to generate outdoor activity recommendations.
Local Storage: Saves user progress and journal entries in the browser.

How it works:

The user enters preferences such as mood, available time, location, and interests.
JavaScript sends the activity request to the locally running Ollama API.
The configured Qwen3 model generates a suggested outdoor adventure.
The website displays the recommendation, including activity details and suggested steps.
Users can explore challenges and record their outdoor progress.

The basic workflow is:

User Input → JavaScript → Ollama → Qwen3 4B → Outdoor Activity Recommendation

The frontend is hosted on GitHub Pages, while the AI model runs separately through Ollama. Using the AI features requires a compatible local Ollama setup.

Why Does Open Innovation Matter?

Open innovation makes AI more accessible to developers, students, and independent creators.

By using an open-weight model with local inference, I could experiment with AI-powered features without making a paid, proprietary cloud API the core of the application. It allowed me to explore prompt design, API integration, structured AI responses, and the practical process of connecting a language model to a web application.

Local inference can also help keep activity preferences on the user's device when the application is configured to communicate only with the local model. This provides an opportunity to build more privacy-conscious applications.

Most importantly, open tools allow other developers to inspect the code, learn from the implementation, customize the experience, and contribute improvements.

TouchGrass AI demonstrates how open AI technology can be used for something beyond generating text: encouraging people to reconnect with nature and develop a healthier balance between technology and real life.

My Agent Session

I don't have a public DevRelay agent-session link to share yet.

Prize Categories

Open-Source AI

This project explores the use of an open-weight language model through local inference with Ollama.

I'll verify the challenge rules before selecting any additional partner-specific prize categories.

Hacktoberfest #OpenSource #AI #Ollama #Qwen #WebDevelopment