ShopRide - Bicycle Shop Ride Hosting Platform

ShopRide is a web-based platform that enables bicycle shop owners to organize, manage, and host group cycling rides while allowing cyclists to discover and register for rides in their area.

Architecture

• Frontend: React 18 with TypeScript, Vite, and Tailwind CSS
• Backend: ASP.NET Core 9 Web API with Minimal APIs
• Database: SQL Server with Entity Framework Core
• Authentication: ASP.NET Core Identity with JWT tokens

Project Structure

shopride/
├── docs/                                    # Documentation
│   ├── shopride-specification.md           # Complete feature specification
│   ├── implementationplan1.md              # Implementation plan
│   └── RequirementsShopRides.pdf          # Original requirements
├── src/
│   ├── frontend/shopride-web/              # React TypeScript frontend
│   │   ├── src/
│   │   │   ├── App.tsx                     # Main React component
│   │   │   ├── main.tsx                    # React entry point
│   │   │   └── index.css                   # Tailwind CSS styles
│   │   ├── tailwind.config.js              # Tailwind configuration
│   │   ├── vite.config.ts                  # Vite configuration
│   │   └── package.json                    # Frontend dependencies
│   └── backend/ShopRide.Api/               # ASP.NET Core Web API
│       ├── Models/                         # Data models
│       │   ├── ApplicationUser.cs          # User model (extends Identity)
│       │   ├── Shop.cs                     # Shop entity
│       │   ├── Ride.cs                     # Ride entity
│       │   └── Registration.cs             # Registration entity
│       ├── Data/
│       │   └── ApplicationDbContext.cs     # Entity Framework context
│       ├── Program.cs                      # API configuration
│       └── appsettings.json               # Configuration settings

Database Schema

Core Entities

1. ApplicationUser (extends IdentityUser)

   • Custom user properties (FirstName, LastName)
   • Navigation to Shop (for shop owners)
   • Navigation to Registrations

2. Shop

   • Shop details (Name, Description, Address, Contact Info)
   • Business information (Hours, Services, Logo)
   • One-to-one relationship with ApplicationUser (Owner)
   • One-to-many relationship with Rides

3. Ride

   • Ride details (Title, Description, DateTime, Location)
   • Ride properties (Difficulty, MaxParticipants, Distance)
   • Route information (Description, GPX file)
   • Status management (Draft, Published, Cancelled, Completed)
   • Many-to-one relationship with Shop
   • One-to-many relationship with Registrations

4. Registration

   • User registration for rides
   • Status tracking (Confirmed, Waitlisted, Cancelled)
   • Attendance confirmation
   • Unique constraint per user per ride

Features Implemented (Step 1)

✅ Project Setup and Infrastructure

• Created React + TypeScript frontend with Vite build system
• Configured Tailwind CSS for styling
• Created ASP.NET Core 9 Web API with Minimal APIs
• Set up Entity Framework Core with SQL Server
• Configured development environment
• Integrated ASP.NET Core Identity for authentication
• Configured JWT Bearer authentication
• Set up CORS for frontend-backend communication
• Created comprehensive data models with relationships
• Configured Entity Framework relationships and constraints

✅ Database Schema and Models

• Designed core entities (User, Shop, Ride, Registration)
• Implemented Entity Framework Code First approach
• Configured proper relationships and constraints
• Set up enum properties for Difficulty and Status
• Added validation attributes and business rules

Getting Started

Prerequisites

• .NET 9 SDK
• Node.js (v18 or later)
• SQL Server LocalDB or SQL Server instance

Backend Setup

1. Navigate to the backend directory:

   cd src/backend/ShopRide.Api

2. Restore packages:

   dotnet restore

3. Create database migration:

   dotnet ef migrations add InitialCreate
   dotnet ef database update

4. Run the API:

   dotnet run

   The API will be available at https://localhost:7075

Frontend Setup

1. Navigate to the frontend directory:

   cd src/frontend/shopride-web

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

   The frontend will be available at http://localhost:5173

API Endpoints

Health Checks

• GET /api/health - Returns API health status
• GET /api/info - Returns API information

Next Steps (Implementation Phases)

Step 2: Authentication System

• Implement user registration and login APIs
• Create frontend authentication components
• Set up protected routes
• Implement role-based authorization

Step 3: Shop Management

• Create shop management APIs (CRUD operations)
• Build shop profile management UI
• Implement shop verification system

Step 4: Ride Management

• Create ride management APIs
• Build ride creation and management UI
• Implement ride discovery and filtering

Step 5: Registration System

• Create registration APIs
• Build registration UI
• Implement capacity management and waitlists

Step 6: Frontend Integration

• Connect frontend to backend APIs
• Implement state management
• Add error handling and loading states

Step 7: Notification System

• Implement email notification service
• Create notification templates
• Set up background job processing

Configuration

JWT Settings

The API uses JWT tokens for authentication. Configure the following in appsettings.json:

{
  "JwtSettings": {
    "SecretKey": "YourSecretKey",
    "Issuer": "ShopRideApi",
    "Audience": "ShopRideWeb",
    "ExpiryInHours": 24
  }
}

Database Connection

Configure the database connection string in appsettings.json:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=ShopRideDb;Trusted_Connection=true;MultipleActiveResultSets=true;TrustServerCertificate=true"
  }
}

Contributing

Please refer to the implementation plan in docs/implementationplan1.md for detailed development guidelines and next steps.

License

This project is part of a development exercise and is for educational purposes.