Street Racer is a modern, responsive web template for creating a gaming portal with iframe game embedding, blog system, and SEO optimization. Built with React, TypeScript, and Tailwind CSS.
Online Demo: https://streetracer.online
- 🎮 Easy game integration via iframes
- 🎯 Customizable game cards and descriptions
- 📱 Fully responsive design for all devices
- 🌙 Dark theme optimized for gaming
- ⚡ Performance-first architecture
- 🎨 Modern UI with smooth animations
- 🖥️ Fullscreen game support
- 📰 Built-in blog system with Markdown
- 🔍 SEO optimized
- 📄 FAQ and policy pages included
- 🌐 Internationalization ready
- React 18
- TypeScript 5
- Tailwind CSS 3
- Vite 5
- React Router 6
- Lucide Icons
- Markdown Support
- Clone the repository:
git clone git@github.com:zhangchenchen/street-racer.git- Install dependencies:
cd street-racer
npm install- Start the development server:
npm run devAdd your games by modifying the games array in src/pages/Home.tsx:
const games = [
{
id: 1,
title: "Game Title",
description: "Game description",
image: "/game-image.webp",
features: ["Feature 1", "Feature 2", "Feature 3"],
isNew: true,
iframe: '<iframe src="game-url" style="width: 100%; height: 100%;" frameborder="0" allow="gamepad *;"></iframe>',
controls: [
{
key: "←↓↑→",
action: "DRIVING"
},
{
key: "SPACE",
action: "BRAKE"
}
]
}
];Blog posts are stored in src/blog-posts directory using Markdown format:
---
title: "Article Title"
date: "2025-02-15"
category: "Category"
image: "/article-image.webp"
excerpt: "Article excerpt..."
---
Article content...- Update
public/sitemap.xmlfor site mapping - Edit
public/robots.txtfor crawler rules - Modify meta tags in
index.html
- Customize theme in
tailwind.config.js - Add custom CSS in
src/styles
Create a production build:
npm run buildBuilt files will be in the dist directory.
Supports multiple deployment platforms:
- Vercel
- Netlify
- GitHub Pages
- Traditional hosting
street-racer/
├── src/
│ ├── components/ # Reusable components
│ ├── pages/ # Page components
│ ├── blog-posts/ # Markdown blog posts
│ ├── styles/ # Style files
│ └── types/ # TypeScript type definitions
├── public/ # Static assets
├── dist/ # Build output
└── ...config files
Contributions are welcome! Feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
For questions or suggestions, please reach out via:
- GitHub Issues
- Email: pekingzcc@gmail.com
- Twitter: @YourTwitter