OnlyPrompt - AI Prompt Marketplace

Description

OnlyPrompt is a web application where users can create, publish, discover and interact with AI prompts. Users can edit their profiles, follow creators, like and save prompts, write reviews and browse free or subscription-based prompt cards in a marketplace.

This project is built with HTML, CSS and JavaScript.

Special Features

• 📝 Create, edit and publish AI prompts
• 🔍 Browse prompts in a marketplace with category, search and tier price filters
• 📄 View prompt detail pages with examples, ratings and access states
• 💎 Create creator subscription tiers and assign prompts to tier levels
• 🔐 Subscribe to creator tiers to unlock matching and lower-level prompts
• ⭐ Write reviews with star ratings and comments
• ❤️ Like and save prompts
• 👥 Follow and discover other creators
• 💬 Start chats with creators from the community page and send local messages
• 👤 Edit user profiles with display name, username, bio and profile picture
• 🌐 View own and public creator profiles
• 📱 Responsive layout for desktop and mobile, including a bottom icon navigation on smartphones
• ♿ Accessibility improvements such as keyboard focus states, skip links, labels, ARIA states and live status messages
• 🔄 Server communication through a REST API
• 💾 Shared data persistence with backend and database

Installment (for local use)

1. Clone the repository
2. Create an .env file and copy the example below into it
3. Run docker compose -f docker-compose.yml --env-file .env up -d --build
4. Website will be available at http://localhost:1801

Example envfile

PORT_PREFIX=180
DB_USER=onlyprompt
DB_NAME=onlyprompt
DB_PASSWORD=onlyprompt

Local Usage Notes

• The community page includes a chat button on creator cards. It opens the chat page and starts a conversation with the selected creator.
• The chats page supports selecting conversations, searching creators through the new-chat button and sending messages.
• Chat messages are stored in the browser's localStorage for the local frontend demo. They are not persisted in PostgreSQL yet.
• Keyboard users can use Tab, Shift + Tab, Enter and Space to navigate links, buttons, filters, tabs and forms.
• On macOS, full keyboard navigation may need to be enabled in System Settings or the browser settings so that Tab also focuses links.

Technologies, Libraries, Frameworks

• HTML5 for page structure
• CSS3 with Flexbox/Grid for layout and responsive design
• Bootstrap Icons for UI icons
• Vanilla JavaScript for DOM manipulation, events and API calls
• Fetch API for asynchronous server communication
• ASP.NET Core as helper backend
• PostgreSQL for shared data persistence
• Docker for local development and deployment

Technical Decisions

The frontend is built with plain HTML, CSS and Vanilla JavaScript because the project focuses on understanding core frontend concepts without using a JavaScript framework. The backend is used as a helper service for authentication, shared data persistence and REST API communication. Docker is used so that the project can be started consistently on different machines.

Use of AI Tools

AI tools were used as support during development, mainly for debugging, comparing implementation approaches and improving documentation wording. Generated suggestions were reviewed, adapted and tested by the team before being included in the project.

Security Considerations

The project uses authentication with a JWT cookie so that protected pages and API endpoints require a logged-in user. User input is validated on the backend for important operations such as registration, profile updates, prompt creation and reviews.

Known limitations:

• Subscription access is simulated for the semester project and is not connected to a real payment provider.
• Chat messages are currently stored locally in the browser and are not connected to a backend chat API.
• User-generated content is displayed in the frontend, so XSS prevention is important. The project avoids intentionally executing user input as code, but further output sanitization would be needed for production.
• Authentication is implemented for local project use and would need additional hardening for production.

Reflection

A main challenge was connecting static frontend pages with dynamic backend data while keeping the application usable and consistent. During development, the project evolved from demo pages into a connected application with real profiles, prompts, reviews, likes, saves, creator interactions and subscription tiers. We learned how important clear API structures, consistent data models, responsive navigation and regular browser testing are when multiple pages depend on the same shared data.

Group members and their roles

Name	Role
Thuvaraka Yogarajah	Initial project structure, HTML layout, marketplace/review functions and API backend scaffold
Isabelle Nachbaur	Frontend pages, UI design, prompt creation flow, marketplace/profile features
Florian Klessascheck	Backend setup, authentication, database integration, Docker setup and utility/PWA experiments
Abdul Geylani Semiz	Dynamic API integration for dashboard feed, marketplace, post detail and community creator features