A small web app scaffolded with Vite + TypeScript and styled with Tailwind CSS.
Goal: explore and iterate on ideas for "where to ride" — a lightweight frontend you can extend with map/route/POI logic later.
If you’re cloning this for the first time: it’s a standard Vite project. Install deps, run the dev server, and you’re good.
# 1) Clone
git clone https://github.com/velotist/where2ride.git
cd where2ride
# 2) Install deps (npm shown; yarn/pnpm also fine)
npm install
# 3) Start dev server
npm run dev
# → open the shown localhost URL
# 4) Build for production
npm run build
# 5) Preview the production build locally
npm run previewnpm run devstarts Vite’s dev server with hot reload.npm run buildoutputs a static production bundle todist/.npm run previewserves the built files locally so you can sanity-check the production build.
Based on how Vite works: dev = fast HMR server, build = optimized static bundle, preview = local static server.
- Node.js 18+ (Node 20+ recommended)
- A package manager (npm, pnpm, or yarn)
- Modern browser (Chromium, Firefox, Safari)
The repo uses a typical Vite + TS + Tailwind layout:
.
├─ public/ # static assets copied as-is
├─ src/ # your application code (TS/JS/CSS/assets)
├─ index.html # Vite entry HTML
├─ vite.config.ts # Vite configuration
├─ tailwind.config.cjs # Tailwind config
├─ postcss.config.cjs # PostCSS config for Tailwind
├─ tsconfig.json # TypeScript config
├─ package.json # scripts & dependencies
└─ ...
You can see these files in the repo root.
- Vite: fast dev server + Rollup-based production builds.
- TypeScript: safer, clearer code.
- Tailwind CSS: utility-first styling with an efficient workflow.
Tailwind is wired through PostCSS and included via your entry CSS (or index.html) per the official Vite + Tailwind setup.
- Add or change UI in
src/(components, pages, utilities). - Use Tailwind classes directly in your markup for styling.
- Keep
index.htmlminimal; let Vite handle module loading. - When you need environment variables, follow Vite’s
import.meta.envpattern and put values in.envfiles (not committed).
Common scripts you’ll find/use:
dev— start the dev serverbuild— build the production bundle todist/preview— serve the built bundle locally
These are the standard Vite scripts; exact names live in
package.json.
- HMR: changes in
src/hot-reload instantly. - Static assets: put files in
public/to serve them as-is at the site root. - Absolute imports: if you prefer, configure path aliases in
vite.config.tsandtsconfig.json. - Type safety: enable
strictintsconfig.jsonfor tighter checks.
If you add Vitest, ESLint, or Prettier, typical commands are:
npm run test
npm run lint
npm run formatAdd the corresponding dev dependencies and configs as needed.
npm run build creates a static site in dist/. You can deploy it to any static host (GitHub Pages, Netlify, Vercel, S3, etc.).
Use npm run preview to verify the production bundle locally before pushing.
- Favor semantic HTML.
- Ensure color contrast meets WCAG 2.1 AA.
- Test keyboard navigation and focus styles.
- Keep bundles small; only add libraries you need.
- Audit with Lighthouse/axe.
- Map view (OpenStreetMap/Leaflet or MapLibre)
- Route filters (distance, surface, elevation)
- Weather and wind overlays
- Offline cache for planned rides
- Shareable route links
These are suggestions for the “where to ride” concept; adjust as you implement.
- Create a feature branch from
develop. - Commit with clear messages.
- Open a Pull Request describing the change and its rationale.
MIT License — see LICENSE for details.
- Vite docs: Getting started / build / preview.
- Tailwind CSS with Vite: official steps.