Al Manar Racing

Al Manar Racing website + e-store project with Next.js web application and Go backend.

🚀 Tech Stack

Frontend

• Next.js 16.1.6 - React framework
• React 19.2.3 - UI library
• TypeScript 5 - Type safety
• SCSS Modules - Component styling
• SWR - Data fetching and caching
• ESLint - Code linting

CMS (Content Management)

• Strapi 5.39.0 - Headless CMS
• PostgreSQL 16.4 - Database
• Docker Compose - Container orchestration

📁 Project Structure

almanar-racing/
├── web/                    # Next.js web application
│   ├── app/               # App router pages
│   ├── components/        # React components
│   ├── hooks/            # Custom React hooks (SWR data fetching)
│   ├── lib/              # Utilities (Strapi client)
│   ├── public/           # Static assets
│   ├── styles/           # Global styles
│   └── package.json      # Frontend dependencies
├── strapi/               # Strapi CMS
│   ├── src/             # API content types and components
│   ├── config/          # Strapi configuration
│   ├── scripts/         # Database seeding scripts
│   ├── data/            # Seed data and uploads
│   └── package.json     # CMS dependencies
├── docker-compose.yml  # Docker services configuration
└── README.md           # This file

🛠️ Prerequisites

Before you begin, ensure you have the following installed:

• Docker and Docker Compose - For running services
• Node.js 18+ and npm - For local development (optional)
• Go 1.24+ - For backend development (optional)

🏁 Getting Started

Quick Start with Docker (Recommended)

1. Clone the Repository

   git clone https://github.com/rihal-om/almanar-racing.git
   cd almanar-racing
   

2. Start All Services

   docker-compose up -d
   

   This will start:

   • Web Application at http://localhost:3000
   • Strapi CMS at http://localhost:1337
   • PostgreSQL Database on port 5433

3. Access the Applications

   • Website: http://localhost:3000
   • Strapi Admin: http://localhost:1337/admin (create admin account on first visit)

4. Stop Services

   docker-compose down
   

First-Time Setup

On first run, the Strapi database will be automatically seeded with sample content including:

• Articles (news, press releases, events)
• Racing event details
• Store products
• Hero banner content
• Car specifications

1. Clone the Repository (Replaced by Docker Quick Start above)

2. Setup Backend

cd backend
go mod download
go run main.go

The backend server will start at http://localhost:8080

Available endpoints:

• GET /api/health - Health check endpoint

3. Setup Web Application

Open a new terminal:

cd web
npm install
npm run dev

The web application will start at http://localhost:3000

📝 Content Management

Managing Articles and Content

All website content is managed through the Strapi Admin Panel:

1. Access Strapi Admin: http://localhost:1337/admin
2. Create Admin Account (first time only)
3. Manage Content through the Content Manager:
   • Articles: News, press releases, events, announcements
   • Racing Events: Upcoming race details and results
   • Store Products: Merchandise and products
   • Hero Banner: Homepage hero section content
   • Car Specifications: Vehicle technical details
   • About Section: Team information

Article Management

To create or update articles:

1. Login to Strapi Admin Panel
2. Navigate to Content Manager → Article
3. Click "+ Create new entry" or edit existing articles
4. Fill in the fields:
   • Title, Description, Badge (NEWS/PRESS/EVENT/ANNOUNCEMENT)
   • Upload cover image
   • Select author and category
   • Add rich content blocks
   • Set featured status and display order
5. Click "Save" and then "Publish"

📖 Full Guide: See STRAPI_ARTICLE_MANAGEMENT.md for detailed instructions

Strapi Scripts

Useful scripts for managing Strapi content:

# Inside strapi container or cd strapi/
npm run seed:example          # Seed database with sample data
npm run seed:force-home       # Force import home page content
npm run publish:content       # Publish all content
npm run update:badges         # Update article badges
npm run check:content         # Check content status

🧪 Development

Running the Backend

cd backend
go run main.go

Running the Web Application

cd web
npm run dev

Building for Production

Backend:

cd backend
go build -o bin/server main.go
./bin/server

Web Application:

cd web
npm run build
npm run start  # Start production server

📝 Available Scripts

Docker Commands

• docker-compose up -d - Start all services in background
• docker-compose down - Stop all services
• docker-compose logs -f - View logs
• docker-compose restart strapi - Restart Strapi CMS
• docker exec -it almanar-racing-strapi-1 sh - Access Strapi container

Web Application Scripts

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

Strapi Scripts (run inside strapi container)

• npm run develop - Start Strapi in development mode
• npm run seed:example - Seed database with sample data
• npm run publish:content - Publish all content
• npm run update:badges - Update article badges

Backend Commands

• go run main.go - Run development server
• go build - Build binary
• go test ./... - Run tests (when added)

🔧 Configuration

Environment Variables

Web Application (web/.env.local or Docker environment):

• NEXT_PUBLIC_STRAPI_URL - Strapi API URL for browser (default: http://localhost:1337)
• STRAPI_URL - Strapi API URL for server-side (default: http://strapi:1337)

Strapi CMS (strapi/.env or docker-compose.yml):

• DATABASE_CLIENT - postgres
• DATABASE_HOST - Database hostname
• DATABASE_PORT - 5432
• DATABASE_NAME - al_manar_racing
• DATABASE_USERNAME - strapi
• DATABASE_PASSWORD - strapi_password
• JWT_SECRET - Random secret key
• ADMIN_JWT_SECRET - Admin JWT secret
• APP_KEYS - Application keys
• API_TOKEN_SALT - API token salt

Ports

• 3000: Web application
• 1337: Strapi CMS and API
• 5433: PostgreSQL database (mapped from internal 5432)

Web Application API URL

The web application connects to Strapi at http://localhost:1337 (browser) and http://strapi:1337 (server-side). Update API calls in the application if you change the Strapi URL.

📦 Project Status

This is a fully functional racing team website with:

✅ Completed Features

• Next.js Web Application with TypeScript and SCSS
• Strapi Headless CMS for content management
• Docker Compose setup for easy deployment
• PostgreSQL database with seeded content
• SWR Data Fetching with custom hooks
• Homepage Sections:
  • Hero banner with driver statistics
  • Car specifications (Engineered section)
  • Performance/Racing calendar
  • Store products showcase
  • Latest news and updates
• Article Management:
  • Create, edit, publish articles
  • Badge categories (NEWS, PRESS, EVENT, ANNOUNCEMENT)
  • Rich content with dynamic blocks
  • Author and category relations
• Content Types:
  • Articles with cover images
  • Racing event details
  • Store products
  • Hero banners
  • Newsletter sections
• Admin Features:
  • Strapi admin panel for content editing
  • User permissions and roles
  • Media library for images
  • Draft & publish workflow

🚧 In Development

• Backend Go API integration
• E-commerce functionality
• User authentication
• Event registration system

📚 Documentation

• ✅ Main README (this file)
• ✅ Article Management Guide (STRAPI_ARTICLE_MANAGEMENT.md)
• ✅ Strapi seeding scripts
• ✅ API integration examples

⚡ Strapi Data Seeding & Scripts

To populate Strapi with sample data or update content, use the provided scripts. These can be run inside the Strapi container or from the strapi directory:

# Seed the database with example data (articles, events, products, etc.)
docker compose exec strapi node scripts/seed.js
# OR (if running locally)
npm run seed:example

# Force import home page content only
docker compose exec strapi node scripts/force-seed-home.js
# OR
npm run seed:force-home

# Publish all content (set publishedAt)
docker compose exec strapi node scripts/publish-content.js
# OR
npm run publish:content

# Update article badges
docker compose exec strapi node scripts/update-article-badges.js
# OR
npm run update:badges

# Check content status
docker compose exec strapi node scripts/check-content.js
# OR
npm run check:content

Note: If you see errors about missing files (e.g., images in data/uploads), make sure all referenced files exist and are mounted into the container via Docker volumes.

For more details, see the scripts in strapi/scripts/ and the seed data in strapi/data/data.json.

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is proprietary software for Al Manar Racing.