Giter VIP home page Giter VIP logo

school-website's Introduction

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! Β»


school-website's People

Contributors

konhi avatar wybran avatar bkmac511 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.