School

School website React/Nextjs + ASP.NET CORE

Simple school app with microservice architecture, material design and Firebase authentification. 

Stack

• React
• Next.js
• Material-UI
• Material-table
• Firebase auth
• Express
• ASP.NET Core
• GraphQL

 

Application arhitecture

User tries to login

Admin opens page with users

Admin adds user

 

MVP

Two types of users:

• teacher
• admin

Admin can:

• add user (teacher or another admin)
• edit/remove user
• give teachers access to their classes and subjects
• add/edit/remove classes
• get class students
• add/edit/remove students to the common storage
• add student to the certain class
• add/edit/remove subjects to the certain class
• add/edit/remove grades to the certain student
• get auto-generated report card for the certain student

Teacher can:

• get students of the classes, they have access to
• add/edit students to the common storage
• add/remove students to the classes, they have access to
• add/edit/remove grades to the certain student
• get auto-generated report card for the certain student

Screenshots

Login page

There is no sign up page, because admin adds users. 

Page with all users

In the table you can search by specific words and sort columns. 

Add user page

Edit user page

Student storage page

Classes page

Class students page

Class subjects page

Subject grades page

Grade column modal

Student report card

 

Local development

Before running containers, in auth and nextjs-school directories you need to enter environment variables into .env files. List with all the neccessary variables you can find in .env.example files.

Run container with auth server

docker-compose up --build -d auth

Run container with Next.js server

docker-compose up --build -d nextjs

Run container with graphql server

docker-compose up --build -d graphql

Open localhost:3000