Skip to content

ElektronPlus/school-website

Repository files navigation

Projekt graficzny strony

Components Preview (Chromatic) Vercel status

πŸŽ’ School Website Starter

Accessible and extremely user-friendly website template for schools, built on fun and modern stack.

Folder Structure

  • πŸ“ apps
    • πŸ“ backend: headless CMS (API) that uses Strapi.
    • πŸ“ frontend
      • πŸ“ queries: GraphQL queries. Just create a .graphql that you will want to use.
      • πŸ“ generated: Generated GraphQL queries with GraphQL Code Generator. Runs automatically while developing. You import types and queries from there (not from πŸ“ queries!)
      • πŸ“ stories: Storybook stories.
      • πŸ“ pages: Next.js pages.
      • πŸ“ public: Next.js static file serving.
      • πŸ“ styles: Global CSS Styles. It's better to use CSS modules (component.module.css in πŸ“ components
      • πŸ“ lib: Libraries wrappers (such as for Apollo Client) and configs.
      • πŸ“ components: React components and their styles. There's also a Next.js Layout

Features

  • ⚠️ Alerts: customizable information on top of the page
  • πŸ“… Substitusions: inform about changes in a timetable
  • πŸ”Ž Search Bar: let users quickly find what they're looking for
  • ✨ Rich Footer: customizable social media icons, e-mail, copyright, related links

Technology

Next JS React TypeScript Storybook Chakra Vercel GraphQL MySQL Sentry

Technology Description
Doppler Doppler streamlines secrets management with a beautiful and intuitive dashboard, powerful CLI, and integrations for syncing secrets across development environments, cloud providers, hosting platforms, CI/CD tools, Docker, Kubernetes, and Terraform.

Front-end

Technology Description
Next.js The React Framework for Production. Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
React The most popular JavaScript library for building user interfaces.
TypeScript TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
Storybook Tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.

UI Libs

Library Description
Chakra UI Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. We use templates from Chakra Templates.
React Masonry CSS A Masonry component leveraging CSS and native React rendering, for fast, responsive masonry layouts.
React Accessible Headings Makes it easier to keep heading levels semantic and accessible (WCAG)

Fetching

Technology Description
GraphQL Main way to fetch data from the Strapi API. Gives us automatic TypeScript support thanks to GraphQL Code Generator. We use Apollo Client
REST API REST is rarely used, but sometimes it works out better with Strapi plugins, for example Navigation. External developers also might want to prefer use it in their projects. See documentation Β»

Back-end

Technology Description
Strapi Design APIs fast, manage content easily. Strapi is the leading open-source headless CMS. It’s 100% JavaScript, fully customizable and developer-first.
MySQL Database with PhpMyAdmin. Might be changed to PostgreSQL.
Meilisearch Meilisearch is a RESTful search API. It aims to be a ready-to-go solution for everyone who wants a fast and relevant search experience for their end-users βš‘οΈπŸ”Ž

Analytics

Technology Description
Sentry From error tracking to performance monitoring, developers can see what actually matters, solve quicker, and learn continuously about their applications - from the frontend to the backend.

Strapi Plugins

Links


API

API is based on Strapi and it's publicly available - you're free to use it in your project! It's recommended to use GraphQL API.

Here are some REST API routes:

License & Open-Source

  • The project is open-sourced and available on βš– MIT License.
  • We offer free assistance with implementation as needed for schools and educational organizations. Contact Us! Β»
  • You noticed a mistake or want to suggest something? Create an Issue Β» or Contact Us! Β»

Infrastructure

This section explains this specific instance infrastructure. You're free to use anything you want.

Type Infrastructure Instance Description
Frontend β–² Vercel dev.elektronplus.pl Website
Backend Self-hosted VPS strapi.elektronplus.pl Strapi (Headless CMS), MySQL Database
Meilisearch Koyeb zseis-zgora-meilisearch-konhi.koyeb.app Search Engine
Developer-only Chromatic See components Β» Storybook

Powered by Vercel

This project is proudly powered by Vercel - a platform for frontend frameworks and static sites, built to integrate with your headless content, commerce, or database that provide a frictionless developer experience to take care of the hard things: deploying instantly, scaling automatically, and serving personalized content around the globe.

Interested? Check β–² Vercel! Β»