• Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
MRPRRSIDENT

MRPRRSIDENT

Paymentsys

Website that can transact
Public
Like
Paymentsys
Home
Code
6
backend
3
frontend
4
shared
1
README.md
SETUP.md
H
main.ts
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
Code
/
Search
README.md

The Trade In Trainer Corner 👟

A Gen Z-style marketplace for second-hand trainers with integrated payment processing and feedback system.

Features

  • 🛒 Browse and purchase second-hand trainers
  • 💳 Secure payment processing (Visa/Mastercard via Stripe)
  • 📸 Admin area for posting trainers with photo links
  • 💬 Customer feedback system
  • 📱 Mobile-first responsive design
  • 🎨 Gen Z aesthetic with vibrant colors and modern UI

Project Structure

├── backend/
│   ├── index.ts           # Main Hono server
│   ├── database/
│   │   ├── migrations.ts  # Database schema
│   │   └── queries.ts     # Database operations
│   └── routes/
│       ├── trainers.ts    # Trainer CRUD operations
│       ├── payments.ts    # Stripe payment processing
│       └── feedback.ts    # Customer feedback
├── frontend/
│   ├── index.html         # Main page
│   ├── admin.html         # Admin panel for posting trainers
│   ├── components/
│   │   ├── App.tsx        # Main React app
│   │   ├── TrainerCard.tsx
│   │   ├── PaymentModal.tsx
│   │   └── FeedbackForm.tsx
│   └── style.css          # Custom styles
└── shared/
    └── types.ts           # Shared TypeScript types

Setup

  1. Payment Integration: See SETUP.md for detailed Stripe setup instructions
  2. Environment Variables: Set your Stripe keys in Val Town environment variables
  3. Database: Automatically initialized on first run
  4. Admin Access: Visit /admin to add trainers to your inventory

Quick Start

  1. Visit the main site to see the Gen Z-styled marketplace
  2. Go to /admin to add your first trainers
  3. Customers can browse, purchase, and leave feedback
  4. Set up Stripe for payment processing (see SETUP.md)

Live Demo

The website is now live and includes:

  • ✅ Sample trainers (Nike Air Max 90, Adidas Stan Smith, Converse Chuck Taylor)
  • ✅ Customer feedback system with sample reviews
  • ✅ Responsive Gen Z design with animations and glass morphism
  • ✅ Admin panel for inventory management
  • ✅ Payment processing infrastructure (needs Stripe keys)
  • ✅ Mobile-optimized interface

Tech Stack

  • Backend: Hono + SQLite
  • Frontend: React + TailwindCSS
  • Payments: Stripe
  • Storage: Val Town Blob + SQLite
Code
backendfrontendsharedREADME.mdSETUP.md
H
main.ts
FeaturesVersion controlCode intelligenceCLIMCP
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.