Metro FE

A modern React TypeScript application for Metro services, built with Vite and styled with Tailwind CSS.

🚀 Live Demo

Visit the live application

✨ Features

• Modern React 18 with TypeScript
• Responsive design with Tailwind CSS
• Authentication system with context management
• API integration with Axios
• React Query for efficient data fetching
• React Router for navigation
• Swiper.js for carousel components
• ESLint for code quality

🛠️ Tech Stack

• Frontend Framework: React 18 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• State Management: React Query (TanStack Query)
• Routing: React Router DOM
• HTTP Client: Axios
• UI Components: Swiper.js
• Development: ESLint, TypeScript
• Deployment: Vercel

📦 Prerequisites

• Node.js (version 16 or higher)
• npm or yarn package manager

🚀 Installation

1. Clone the repository:

git clone https://github.com/hcmurs/metro-fe.git
cd metro-fe/metro-app-fe

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.sample .env

4. Start development server:

npm run dev

📁 Project Structure

metro-app-fe/
├── public/
├── src/
│   ├── apis/
│   ├── components/
│   ├── constants/
│   ├── contexts/
│   ├── hooks/
│   ├── layouts/
│   ├── pages/
│   ├── queries/
│   ├── routes/
│   ├── types/
│   ├── utils/
│   ├── App.tsx
│   ├── App.css
│   ├── main.tsx
│   └── index.css
├── index.html
├── vite.config.ts
├── tailwind.config.js
├── eslint.config.js
├── package.json
└── .env.sample

🚀 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🤝 Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

---

Built with ❤️ by the HCMURS team