🎒 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.graphqlthat 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.cssin📁 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
| 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 |
---
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.
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.