Omega Primary School 🏫

Professional website for Omega Primary School, built with modern user experience and easy content management in mind.

🌟 Features

• Modern Design: Clean, responsive interface built with Tailwind CSS
• Performance Optimized: Built with Next.js 13 for optimal performance
• SEO Friendly: Optimized meta tags and structured data
• CMS Integration: Contentful for content management
• Analytics: Vercel Analytics integration
• Image Optimization: Lightbox gallery for school photos
• Form Handling: Formik and Yup for contact forms
• Type Safety: Full TypeScript implementation
• Testing: Cypress for end-to-end testing

🛠️ Tech Stack

• Framework: Next.js 13.4.19
• Language: TypeScript 5.2.2
• Styling: Tailwind CSS 3.3.3
• CMS: Contentful 10.5.1
• Forms: Formik 2.4.4, Yup 1.2.0
• Email: Nodemailer 6.9.5, EmailJS 2.2.0
• Analytics: Vercel Analytics 1.0.2
• Gallery: Lightbox.js React 0.8.2
• Maps: Leaflet 1.9.4, React Leaflet 4.2.1
• Markdown: React Markdown 8.0.7
• PDF: React PDF 7.3.3
• Testing: Cypress 13.1.0
• Linting: ESLint with TypeScript support
• Formatting: Prettier

📁 Project Structure

├── components/           # UI Components
│   ├── AboutUs-SocialMedia/
│   ├── ArticlePreviewBox/
│   ├── Button/
│   ├── CalendarEvent/
│   ├── ContactData/
│   ├── Footer/
│   ├── GalleryBox/
│   ├── HeaderWithBubbles/
│   ├── HomePageGallery/
│   ├── ImagePreview/
│   ├── Map/
│   ├── Modal/
│   ├── Navbar/
│   ├── PageHeader.tsx/
│   ├── RecruitmentForm/
│   ├── TeachingStaff/
│   └── WhatWeOffer/
├── hooks/               # Custom hooks
├── pages/               # Next.js pages
│   ├── api/            # API routes
│   ├── aktualnosci/    # News page
│   ├── galeria/        # Photo gallery
│   ├── kalendarz/      # Events calendar
│   ├── kontakt/        # Contact page
│   ├── o-nas/          # About us
│   ├── oferta/         # Educational offer
│   └── rekrutacja/     # Recruitment
├── public/             # Static files
│   ├── assets/         # Images and icons
│   └── email_template/ # Email templates
├── styles/             # CSS styles
├── types/              # TypeScript definitions
└── cypress/            # Cypress tests

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository

   git clone https://github.com/DanielSledz03/omega-school-page.git
   cd omega-school-page

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install
   # or
   bun install

3. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev

4. Open your browser Navigate to http://localhost:3000 to see the application.

📝 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run lint-fix - Fix linting errors
• npm run lint-check - Check for linting errors
• npm run build-and-run - Build and run application
• npm run cypress - Open Cypress testing tool

🎨 Customization

Environment Variables

Create a .env.local file in the root directory:

# Contentful CMS
SANITY_SPACE=your_contentful_space_id
SANITY_ENVIRONMENT=master
SANITY_TOKEN=your_contentful_access_token

# Email Configuration
EMAIL_SERVICE=your_email_service
EMAIL_USER=your_email_user
EMAIL_PASS=your_email_password

# Analytics
NEXT_PUBLIC_GA_ID=your_google_analytics_id

Styling

The project uses Tailwind CSS for styling. Custom styles can be added in:

• styles/globals.css - Global styles
• tailwind.config.js - Tailwind configuration

📄 License

This project is private and proprietary. All rights reserved.

📞 Contact

Omega Primary School

• Website: omegaszkola.pl
• Author: Daniel Śledź

---

Built with ❤️ for Omega Primary School students

Modern education in the heart of Poland