A full-stack application featuring a React frontend that replicates the StubHub homepage and a FastAPI backend with JWT authentication and event endpoints.
This project recreates the StubHub experience with:
- Interactive event search and filtering
- Trending events carousel
- User authentication flow
- Responsive design with StubHub branding
- FastAPI backend with JWT authentication
- SQLite database for user management
- Header Navigation: Complete navigation bar with StubHub logo and menu categories
- Search Interface: Centralized search bar with location and date filters
- Category Filtering: Interactive buttons for Sports, Concerts, Theater & Comedy
- Trending Events: Horizontal scrolling carousel showcasing popular events
- Event Cards: Detailed cards with artist images, rankings, dates, and venues
- User login interface
- Form validation and user experience
src/
├── App.js # Main application with routing configuration
├── Landing.js # Homepage component with search and events
├── Login.js # Authentication page component
├── App.css # Global styles and component-specific CSS
├── index.js # React application entry point
└── assets/ # Static resources
├── artists/ # Artist and performer images
├── icons/ # UI icons and symbols
└── logos/ # Brand logos and graphics
backend/
├── Data/ # Database files directory
│ ├── user_data.db # User authentication database
│ └── event_data.db # Events information database
├── database.py # Database models and connections
├── init_db.py # Database initialization script
├── main.py # Main FastAPI application
├── requirements.txt # Python dependencies
└── test_api.py # API testing script
- Framework: React 19.1.0
- Routing: React Router DOM 7.7.0
- Styling: Custom CSS with modern design patterns
- Build Tool: Create React App
- Testing: Jest with React Testing Library
- Framework: FastAPI
- Authentication: JWT tokens
- Database: Dual SQLite databases with SQLAlchemy ORM
user_data.db: User authentication dataevent_data.db: Event information
- Password Hashing: bcrypt
- API Documentation: Swagger UI and ReDoc
// Main homepage structure
<div className="landing-page">
<header> // Top navigation and branding
<div className="disclaimer"> // Pricing notice bar
<nav className="navbar"> // Main navigation menu
</header>
<main>
<section className="search-section"> // Search and filters
<section className="trending-events"> // Event carousel
</main>
</div>Event Object Schema:
{
id: number,
rank: number,
name: string,
date: string,
time: string,
venue: string,
image: string,
isFavorite: boolean
}Navigation Categories:
- Sports
- Concerts
- Theater
- Festivals
- Top Cities
- Primary Color:
#6f42c1(StubHub Purple) - Typography: Modern sans-serif font stack
- Layout: Flexbox and CSS Grid for responsive design
- Components: Card-based design with hover effects
- Interactions: Smooth transitions and micro-animations
/* Global styles and resets */
.landing-page { ... }
/* Header components */
.disclaimer-bar { ... }
.navbar { ... }
/* Search interface */
.search-section { ... }
.filter-bar { ... }
/* Event carousel */
.trending-events { ... }
.event-card { ... }- Node.js (v14 or higher)
- npm or yarn package manager
- Python 3.11 or higher
- pip package manager
- Clone the repository:
git clone <repository-url>
cd browse-app- Install dependencies:
npm install- Start the development server:
npm start- Open http://localhost:3000 to view the application
npm start- Runs the development servernpm test- Launches the test runnernpm run build- Builds the app for productionnpm run eject- Ejects from Create React App (irreversible)
- Navigate to the backend directory:
cd backend- Install dependencies:
pip install -r requirements.txt- Initialize the database (optional - will be done automatically when starting the server):
python3 init_db.py- Run the server:
uvicorn main:app --reload- The API will be available at http://localhost:8000 with interactive documentation at http://localhost:8000/docs
The application uses two separate SQLite databases stored in the Data/ directory:
-
user_data.db: Stores user authentication information- Contains the
userstable with email and hashed passwords
- Contains the
-
event_data.db: Stores event information- Contains the
eventstable with artist, venue, date, and image data
- Contains the
The application uses React Router for navigation:
/- Landing page (homepage)/login- Authentication page
Static assets are organized in the src/assets/ directory:
- Artist images for event cards
- UI icons for navigation and interactions
- Brand logos and graphics
The application is built with mobile-first responsive design principles, ensuring optimal viewing across desktop, tablet, and mobile devices.
POST /auth/signup- Create new user accountPOST /auth/login- Login and get JWT token
GET /events- Get all events (public)GET /events/protected- Get events (requires authentication)
GET /docs- Interactive API documentation (Swagger UI)GET /redoc- Alternative API documentation
curl -X POST "http://localhost:8000/auth/signup" \
-H "Content-Type: application/json" \
-d '{"email": "user@example.com", "password": "password123"}'curl -X POST "http://localhost:8000/auth/login" \
-H "Content-Type: application/json" \
-d '{"email": "user@example.com", "password": "password123"}'curl "http://localhost:8000/events"curl -H "Authorization: Bearer YOUR_JWT_TOKEN" \
"http://localhost:8000/events/protected"- Event detail pages
- Ticket purchasing flow
- User profile management
- Advanced search filters
- Real-time event data integration
- Payment processing
- Enhanced authentication with social logins
- Event recommendation system
When contributing to this project, please:
- Follow the existing code style and structure
- Maintain the StubHub design consistency
- Test across different screen sizes
- Update documentation as needed
This project is for educational and demonstration purposes.