Taobei Login System

A modern phone verification login system with Taobao-inspired UI design, built with React TypeScript frontend and Node.js backend.

Overview

This project demonstrates a complete authentication system using phone number verification, similar to popular Chinese e-commerce platforms. It features a clean, responsive interface and secure backend implementation.

Features

• 📱 Phone Verification: Chinese mobile number validation and SMS-style verification
• 🎨 Taobao UI: Orange-themed design matching Taobao's visual style
• 🔐 Secure Authentication: JWT tokens and rate limiting
• 💾 Persistent Sessions: Login state saved across browser sessions
• 📱 Responsive Design: Works on desktop and mobile devices
• ⚡ Modern Stack: React TypeScript + Node.js + SQLite

Quick Start

Prerequisites

• Node.js (version 14 or higher)
• npm (comes with Node.js)

1. Clone and Setup

# Clone the repository
git clone <repository-url>
cd taobei-login

# Install backend dependencies
cd backend
npm install
npm run init-db

# Install frontend dependencies
cd ../frontend
npm install

2. Start the Application

# Terminal 1: Start backend server
cd backend
npm start
# Backend runs on http://localhost:3001

# Terminal 2: Start frontend server
cd frontend
npm run dev
# Frontend runs on http://localhost:3000

3. Test the System

1. Open http://localhost:3000 in your browser
2. Click "立即登录" (Login Now)
3. Enter a Chinese mobile number (e.g., 13800138000)
4. Click "获取验证码" (Get Verification Code)
5. Enter any 6-digit code (e.g., 123456)
6. Click "登录" (Login)

Project Structure

taobei-login/
├── backend/                 # Node.js backend server
│   ├── src/                # Source code
│   │   ├── controllers/    # API controllers
│   │   ├── database/       # Database setup and models
│   │   ├── middleware/     # Express middleware
│   │   ├── routes/         # API routes
│   │   └── utils/          # Utility functions
│   ├── data/               # SQLite database files
│   ├── test/               # Backend tests
│   └── README.md           # Backend documentation
├── frontend/               # React TypeScript frontend
│   ├── src/                # Source code
│   │   ├── components/     # Reusable UI components
│   │   ├── pages/          # Page components
│   │   └── utils/          # API utilities
│   ├── test/               # Frontend tests
│   └── README.md           # Frontend documentation
└── README.md               # This file

Technology Stack

Frontend

• React 18 with TypeScript
• Vite for build tooling
• Vitest for testing
• Inline CSS styling (Taobao theme)

Backend

• Node.js with Express.js
• SQLite database
• JWT authentication
• Jest for testing

API Endpoints

Authentication

• POST /api/auth/request-code - Request verification code
• POST /api/auth/login - Login with phone and code
• GET /api/health - Health check

Key Components

Frontend Components

• PhoneNumberInput - Chinese mobile number validation
• VerificationCodeInput - 6-digit code input
• CountdownButton - Timer for code requests
• LoginForm - Complete login interface

Backend Features

• User management with SQLite
• Verification code generation and validation
• JWT token authentication
• Rate limiting and security

Development

Backend Development

cd backend
npm run dev          # Start with nodemon
npm test            # Run tests
npm run init-db     # Initialize database

Frontend Development

cd frontend
npm run dev         # Start development server
npm test           # Run tests
npm run build      # Build for production

Testing

Both frontend and backend include comprehensive test suites:

# Test backend
cd backend && npm test

# Test frontend
cd frontend && npm test

Security Features

• Input validation and sanitization
• Rate limiting (5 requests per minute)
• JWT token authentication
• SQL injection prevention
• CORS configuration

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

This project is for demonstration purposes.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if needed
5. Submit a pull request

Support

For questions or issues, please check the individual README files in the backend/ and frontend/ directories for detailed documentation.