Skip to content

README.md

Latest commit

 

History

History
207 lines (161 loc) · 5.78 KB

README.md

File metadata and controls

207 lines (161 loc) · 5.78 KB
Raw

School Website Templates

A professional, Next.js-based website template system for schools. This project provides three distinct, customizable templates that can be dynamically assigned to different schools through the backend API.

🎨 Available Templates

1. Modern Template (MODERN)

  • Glassmorphism design with vibrant colors
  • Smooth animations and hover effects
  • Mobile-first responsive design
  • Perfect for contemporary, forward-thinking schools

2. Classic Template (CLASSIC)

  • Traditional, professional layout
  • Serif typography for an academic feel
  • Sidebar-based content layout
  • Ideal for established, heritage-focused institutions

3. Minimal Template (MINIMAL)

  • Clean, distraction-free design
  • Large typography and whitespace
  • Subtle grayscale aesthetics
  • Best for modern, design-conscious schools

4. Creative Template (CREATIVE)

  • Vibrant gradient backgrounds
  • Playful, colorful card designs
  • Animated elements and fun emojis
  • Perfect for elementary schools and creative academies

5. Corporate Template (CORPORATE)

  • Professional business aesthetic
  • Stats-driven hero section
  • Clean, structured layouts
  • Ideal for technical colleges and business schools

🚀 Features

  • Dynamic Template Selection: Schools can switch templates via the backend WebsiteSettings model
  • API-Driven Content: All content (News, Events, Settings) is fetched from Django REST API
  • SEO Optimized: Server-side rendering with Next.js for excellent SEO
  • Fully Responsive: Mobile, tablet, and desktop optimized
  • Mock Data Fallback: Works offline with built-in mock data during development

📦 Tech Stack

  • Framework: Next.js 16 (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS 4
  • Icons: Lucide React
  • Backend Integration: Django REST Framework

🛠️ Setup Instructions

Prerequisites

  • Node.js 18+ installed
  • Backend API running at http://localhost:8000

Installation

  1. Install dependencies:

    npm install --legacy-peer-deps

  2. Set environment variables (optional): Create a .env.local file:

    NEXT_PUBLIC_API_URL=http://localhost:8000/api/website

  3. Run development server:

    npm run dev

  4. Build for production:

    npm run build
npm start

📁 Project Structure

schools_web_templates/
├── app/                      # Next.js App Router
│   ├── page.tsx             # Main homepage with template selector
│   └── globals.css          # Global styles
├── components/
│   ├── templates/           # Complete template assemblies
│   │   ├── ModernTemplate.tsx
│   │   ├── ClassicTemplate.tsx
│   │   └── MinimalTemplate.tsx
│   ├── layout/              # Header & Footer components
│   │   ├── ModernHeader.tsx
│   │   ├── ClassicHeader.tsx
│   │   ├── MinimalHeader.tsx
│   │   └── ...Footers
│   └── ui/                  # Reusable UI components
│       ├── ModernHero.tsx
│       ├── ModernNews.tsx
│       └── ...
├── lib/
│   └── api.ts              # API client with mock data
├── types/
│   ├── index.ts            # Data model types
│   └── template.ts         # Template prop types
└── package.json

🔌 Backend Integration

The templates consume data from the following Django API endpoints:

  • Settings: /api/website/settings/ - Returns website configuration including template choice
  • News: /api/website/news/ - Published news articles
  • Events: /api/website/events/ - Upcoming events

Backend Models

# school_website/models.py
- NewsArticle: title, slug, summary, content, image, published_at
- Event: title, slug, description, location, start_datetime, end_datetime, image
- WebsiteSettings: hero_title, hero_subtitle, template (MODERN/CLASSIC/MINIMAL), primary_color, etc.

🎨 Customizing Templates

Each school can customize:

  • Template Choice: Set template field in WebsiteSettings
  • Brand Colors: primary_color and secondary_color (hex codes)
  • Content: Hero text, about section, social links
  • Visibility: Toggle show_news, show_events, show_staff

Example: Changing Template

Update via Django Admin or API:

settings = WebsiteSettings.objects.first()
settings.template = 'CLASSIC'  # or 'MODERN' or 'MINIMAL'
settings.primary_color = '#1E40AF'  # Navy blue
settings.save()

The website will automatically reflect changes on next page load (revalidated every 60 seconds).

📱 Responsive Design

All templates are fully responsive with breakpoints:

  • Mobile: < 768px
  • Tablet: 768px - 1024px
  • Desktop: > 1024px

🧪 Development

Adding a New Template

  1. Create template components in components/templates/:

    export default function YourTemplate({ settings, news, events }: TemplateProps) {
  // Your design
}

  2. Add to template selector in app/page.tsx:

    case 'YOUR_TEMPLATE':
  return <YourTemplate settings={settings} news={news} events={events} />;

  3. Update backend TEMPLATE_CHOICES in WebsiteSettings model

🚢 Deployment

Vercel (Recommended)

vercel --prod

Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --legacy-peer-deps
COPY . .
RUN npm run build
CMD ["npm", "start"]

📝 License

This project is part of the School Management System.

🤝 Contributing

To contribute a new template:

  1. Follow the design system patterns from existing templates
  2. Ensure mobile responsiveness
  3. Test with different color schemes
  4. Submit with screenshots

Built with ❤️ for Schools