Cool School

Live Version: Cool School

Repository: GitHub Repo

The app is developed by Iuliia Konovalova.

About

Cool School app is a school management application. The main goal Ff this app is to help the school manage the students, teachers, classes, subjects, etc. Moreover, the app is aimed at increasing the efficiency of school management.

User Experience Design

Strategy

Developed for a real early childhood school, the app is designed to be easy to use and intuitive. The main goal of the app is to help the school to manage the students, teachers, classes, subjects, etc. This has been achieved by the use of a simple and intuitive interface. As a final goal, the app is aimed at increasing the efficiency of school management.

Target Audience

The app was developed for all members of the early childhood school.

• Bosses: to control the flow of the school, to manage the students, teachers, classes, subjects, sales, etc.;
• Parents: to control their children attendance, to manage their children's payments, manage their children's schedules, etc.;
• Teachers: to control their classes, to manage their classes' schedules, access students' personal information on time, manage their classes' attendance, etc.;
• Sales Managers: to control sales, manage the sales, manage the payments, manage the schedules, access students' personal information on time, manage the attendance, etc.;
• Receptionists: to control the schedule of the school, manage the schedule, access students' personal information on time, manage the attendance, etc.;

User Stories

First Time Visitor Goals

Issue ID	User Story
#1	As a First Time Visitor, I want to be able to easily understand the main purpose of the app, so that I can learn more about this app.
#2	As a First Time Visitor, I want to be able to easily navigate through the app, so that I can find the content.
#3	As a First Time Visitor, I want to be able to register my account, so that I can learn the benefits of the app as a user.
#4	As a First Time Visitor, I want to be able to find the app useful, so that I can use it according to my needs.

Frequent Visitor Goals

Issue ID	User Story
#5	As a Frequent User, I want to be able to log in to my account, so that I can have a personal account.
#6	As a Frequent User, I want to be able to easily log in and log out, so that I can access my personal account information.
#7	As a Frequent User, I want to be able to easily recover my password in case I forget it, so that I can recover access to my account.
#8	As a Frequent User, I can be able to change my password, so that I can be sure that nobody else can access my account.

Potential Client Goals

Issue ID	User Story
#9	As a Potential client, I want to be contacted by sales managers, so that I can make a prudent decision about becoming a member.

Boss Goals

Issue ID	User Story
#11	As a Boss, I want to be able to view new applications, so that I can control the flow of potential clients.
#13	As a Boss, I want to be able to delete or approve membership, assign a role to a new member, so that I can keep data up to date.
#14	As a Boss, I want to be able to add, edit data on a kid, so that I can have a profile for each student.
#15	As a Boss, I want to be able to delete a member, so that I can control the access to the application.
#16	As a Boss I can see the info about kids provided by the company: name, contact info, classes visited, how many classes left, so that refresh the information about a client.
#17	As a Boss, I want to be able to search for a particular member, so that I can easily access information on this member.
#18	As a Boss, I want to be able to sort members according to a role, so that I can easily access particular group of members.
#19	As a Boss, I want to be able to search for a particular student, so that I can easily access information on this student.
#21	As a Boss, I want to be able to sort students by the urgent sale, so that I can control the sales in the company and preserve clients.
#22	As a Boss, I want to be able to see lessons schedule, so that I can schedule time to talk to a teacher or a parent.
#23	As a Boss, I want to see see information on students for each lesson, so that I can control students’ attendance, learn clients preferences.
#24	As a Boss, I want to be able to see sales' details, so that I can check which sales manager and which parent was involved in a deal.
#51	As a Boss, I want to be able to delete students from the application, so that I can control the flow of the present students.

Teachers' Goals

Issue ID	User Story
#25	As a Teacher, I want to be able to search for a particular student, so that I can easily access information on this student.
#26	As a Teacher, I want to be able to see personal information on a kid, so that I can know student’s personal data.
#28	As a Teacher, I want to be able to see lessons schedule, so that I can manage my time.
#29	As a Teacher, I want to be able to see information on students for each lesson, so that I can be prepared for each student.

Receptionists' Goals

Issue ID	User Story
#30	As a Receptionist, I want to be able to search for a particular student, so that I can easily access information on this student.
#31	As a Receptionist, I want to be able to see personal information on a kid, so that I can know student’s personal data.
#33	As a Receptionist, I want to be able to see lessons schedule and student attending lessons, so that I can arrange the flow of the students.
#34	As a Receptionist, I want to be able to create lessons for a day (day, time, subject, teachers, students), so that I can provide a precise schedule for school members.
#35	As a Receptionist, I want to be able to render lessons for a day (day, time, subject, teachers, students), so that I can provide up to date schedule.

Sales Managers' Goals

Issue ID	User Story
#36	As a Sales Manager, I want to be able to search for a particular student, so that I can easily access information on this student.
#37	As a Sales Manager, I want to be able to see personal information on a kid, so that I can know student’s personal data.
#38	As a Sales Manager, I want to be able to sort students by the urgent sale, so that I can control the sales in the company and preserve clients.
#40	As a Sales Manager, I want to be able to view new applications, so that I can contact a potential client and make profits for a company.
#42	As a Sales Manager, I want to be able to add personal notes on each student that I’m in charge of, so that I can increase the company’s sales.
#43	As a Sales Manager, I want to be able to add or edit information on students, so that I can keep up to date students’ profiles.
#44	As a Sales Manager, I want to be able to review my sales, so that I can control my performance.
#45	As a Sales Manager, I want to be able to add new classes to a child when parents buy classes, so that I can maintain relationships with clients.
#52	As a Sales Manager, I want to be able to delete students from the application, so that I can control the flow of the present students.
#53	As a Sales Manager I can edit information on about a sale so that change the data on a sale if a mistake was made or a parent changed his or her mind.
#54	As a Sales Manager I can delete information on about a sale so that render sales data if a mistake was made or a parent changed his or her mind.
#61	As a Sales Manager I want to control my own sales so that nobody else can edit or delete my sales.

Parents' Goals

Issue ID	User Story
#46	As a Parent, I want to be able to see personal information on my child/children, so that I can check the personal data.
#47	As a Parent, I want to be able to see my child’s attendance (subject, teacher, date), so that I can control my child’s education and my spending.
#48	As a Parent, I want to be able to see lessons schedule, so that I can manage my time and control child’s attendance.
#49	As a Parent, I want to be able to see information on students for each lesson, so that I can prepare my child for a lesson.
#50	As a Parent, I want to be able to see names of teachers for each lesson, so that I can know who is/are teaching a lesson.

---

Technologies used

• Languages:

  • Python 3.8.5: the primary language used to develop the server-side of the website.
  • JS: the primary language used to develop interactive components of the website.
  • HTML: the markup language used to create the website.
  • CSS: the styling language used to style the website.

• Frameworks and libraries:

  • Django: python framework used to create all the logic.
  • jQuery: was used to control click events and sending AJAX requests.
  • jQuery User Interface was used to create interactive elements.

• Databases:

  • SQLite: was used as a development database.
  • PostgreSQL: the database used to store all the data.

• Other tools:

  • Git: the version control system used to manage the code.
  • Pip3: the package manager used to install the dependencies.
  • Gunicorn: the webserver used to run the website.
  • Spycopg2: the database driver used to connect to the database.
  • Django-allauth: the authentication library used to create the user accounts.
  • Django-crispy-forms: was used to control the rendering behavior of Django forms.
  • Render: the cloud platform used to host the website.
  • ElephantSQL: the cloud database used to store all the data.
  • GitHub: used to host the website's source code.
  • VSCode: the IDE used to develop the website.
  • Chrome DevTools: was used to debug the website.
  • Font Awesome: was used to create the icons used in the website.
  • Draw.io was used to make a flowchart for the README file.
  • Coolors was used to make a color palette for the website.
  • BGJar: was used to make a background images for the website.
  • W3C Validator: was used to validate HTML5 code for the website.
  • W3C CSS validator: was used to validate CSS code for the website.
  • JShint: was used to validate JS code for the website.
  • PEP8: was used to validate Python code for the website.

---

FEATURES

Please refer to the FEATURES.md file for all features-related documentation.

---

Design

The design of the application is based on the Material Design principles. The central theme of the application is the simplicity of use. Thus, all the components are designed to be easy to use. The minimalistic approach was used to create something meaningful without moving out of focus. As this application is a multifunctional one and consists of many components, the decision to implement white spaces was made as it helps to create a more pleasant user experience.

Color Scheme

The color scheme of the application is based on the bold colors:

As it may be noticed, the color scheme is based on the Material Design principles as well. The navbar is green with dark blue text. The background is white with light blue waves, which are almost invisible. There is a dark blue button to guide the user on how to find the menu. The footer is a dark blue with white text to stand out.

Since the main content has various functions, two different colors were used as the background for the main boxes. The first one is #001D82, which is the color of the navbar text. The decision to use this color for the login/logout/register boxes was made as it shows that the user isn't logged in. The #93D3FD is the color of the data boxes. This color is consistent with the color scheme throughout the whole application. In addition to this, the blue color is believed to be the preferred color among people and facilitates trust and security.

All buttons except the navbar button are green with the white text editing and cancel functionality and orange for the submission and deletion function.

Typography

The main font used in the application is Lato. The use of this font is consistent with the color scheme. Needless to say, the Lato font was chosen due to its readability, which increases user experience.

To emphasize the importance of the text, the font-weight was set to 900. To make the accent on the buttons, the font-weight was set to 700. For the rest of the text, the font-weight was set to 400.

Imagery

• The main background image was generated with the user of the BGJar tool. The image was generated with the following settings:

  

To generate this particular pattern, I used Contour Line Generator with white background and #93D3FD54 as the color of the lines.

• Images were downloaded from the icons8 website only for the home page. However, the original images were changed manually to match the color scheme.

• The main part is allocated to the use of icons from the font awesome website. The use of icons is essential for the user experience when it comes to multifunctional websites.

Wireframes

• Desktop Wireframes
• Tablet Wireframes
• Mobile Wireframes

---

Flowcharts

This application is aimed at users with different roles to fulfill their expectations and provide all functionality.

The following flowcharts were created to help to understand the application and its functionality.

The flowcharts were created using Draw.io.

• Flowchart for Bosses
• Flowchart for Sales Managers
• Flowchart for Parents
• Flowchart for Teachers
• Flowchart for Receptionist

---

Information Architecture

Database

• During the earliest stages of the project, the database was created using SQLite.
• The database was then migrated to PostgreSQL.

Entity-Relationship Diagram

• The ERD was created using Draw.io.

• Database Scheme

Data Modeling

1. CustomUser

Extends Allauth's User model.

Name	Database Key	Field Type	Validation
UserName	username	CharField	max_length=50, blank=False, null=True, unique=True
Email	email	EmailField	max_length=50, unique=True, blank=False, null=False
First Name	first_name	CharField	max_length=30, blank=False, null=False
Last Name	last_name	CharField	max_length=30, blank=False, null=False
Phone Number	email	CharField	max_length=30, blank=False, null=False
Role	phone	IntegerField	choices=ROLES, default=5

    # Roles to assign to users
    ROLES = (
        (0, 'boss'),
        (1, 'teacher'),
        (2, 'sales'),
        (3, 'receptionist'),
        (4, 'parent'),
        (5, 'potential user'),
    )

2. Teacher

It was created in order to provide more room for manipulation of the database and provide opportunities for future developments. Users with the role of teacher will be automatically assigned to this table.

Name	Database Key	Field Type	Validation
Teacher	user	ForeignKey	CustomUser, on_delete=models.CASCADE

3. Receptionist

It was created in order to provide more room for manipulation of the database and provide opportunities for future developments.

Name	Database Key	Field Type	Validation
Receptionist	user	ForeignKey	CustomUser, on_delete=models.CASCADE

4. SalesManager

It was created in order to provide more room for manipulation of the database and provide opportunities for future developments. Users with the role of sales manager will be automatically assigned to this table.

Name	Database Key	Field Type	Validation
Sales Manager	user	ForeignKey	CustomUser, on_delete=models.CASCADE
Sales Total	total_sold	IntegerField	default=0, blank=True, null=True

5. Parent

It was created in order to provide more room for manipulation of the database and provide opportunities for future developments. Users with the role of the parent will be automatically assigned to this table.

Name	Database Key	Field Type	Validation
Sales Manager	user	ForeignKey	CustomUser, on_delete=models.CASCADE
Relation to a student	relation	IntegerField	choices=GUARDIAN_RELATION, default=5

    # Guardian's relation to the student
    GUARDIAN_RELATION = (
        (1, 'father'),
        (2, 'mother'),
        (3, 'grandfather'),
        (4, 'grandmother'),
        (5, 'other'),
    )

6. Student

This table does not inherit from the CustomUser model. This is because the students are not users. Instead, they are the main table of the application.

Name	Database Key	Field Type	Validation
First Name	first_name	CharField	max_length=50, blank=False, null=False
Last Name	last_name	CharField	max_length=50, blank=False, null=False
Parents	parent	ManyToManyField	Parent, related_name='child'
Birthday	birthday	DateField
Address	address	CharField	max_length=100, blank=True, null=True
Date of enrollment	enrolled	DateTimeField	auto_now_add=True
Classes left	classes_left	IntegerField	default=0, blank=True, null=True
Sales Manager	sales_manager	ManyToManyField	SalesManager, related_name='student'
Notes	notes	TextField	blank=True

7. Sales

This table is needed to conduct sales operations. It controls the sales of the products. It also adds classes to a particular student and adds total classes sold to a sales manager. A separate field "student_id" was added in order to prevent a circular import but allow sales to be in control of classes added to a particular student or reduced (For example, when parents ask for a refund).

Name	Database Key	Field Type	Validation
Sales Manager	sold_by	ForeignKey	SalesManager, on_delete=models.CASCADE, related_name='sold'
Client(Parent)	sold_to	ForeignKey	Parent, on_delete=models.CASCADE, related_name='bought'
Classes Number	amount	IntegerField
Date of Sale	date	DateTimeField	auto_now_add=True
Student	amount	IntegerField	default=0

8. Lesson

This table is necessary to control the lessons and provide data for the schedule.

Name	Database Key	Field Type	Validation
Class's Date	date	DateField
Class's Time	time	IntegerField	choices=TIME_PERIODS, default=0
Subject	subject	IntegerField	choices=SUBJECTS, default=1
Teachers	teachers	ManyToManyField	Teacher, related_name='lessons'
Students	students	ManyToManyField	Student, related_name='lessons'

    # Time periods variations
    TIME_PERIODS = (
        (0, '9:00-9:45'),
        (1, '10:00-10:45'),
        (2, '11:00-11:45'),
        (3, '14:00-14:45'),
        (4, '15:00-15:45'),
        (5, '16:00-16:45'),
        (6, '17:00-17:45'),
        (7, '18:00-18:45'),
    )

    # Subject variations
    SUBJECTS = (
        (1, 'art'),
        (2, 'math'),
        (3, 'casa'),
        (4, 'chinese'),
        (5, 'toddlers'),
        (6, 'music'),
        (7, 'english'),
        (8, 'sport'),
        (9, 'cooking'),
        (10, 'infants'),
    )

---

Testing

Please refer to the TESTING.md file for all test-related documentation.

---

Deployment

• The app was deployed to Render.

• The database was deployed to ElephantSQL.

• The app can be reached by the link.

Please refer to the DEPLOYMENT.md file for all deployment-related documentation.

---

Credits

• GitHub for giving the idea of the project's design.
• Django for the framework.
• Render: for the free hosting of the website.
• ElephantSQL: for the free hosting of the database.
• BGJar: for the free access to the background images build tool.
• Font awesome: for the free access to icons.
• Heroku: for the free hosting of the website.
• jQuery: for providing varieties of tools to make standard HTML code look appealing.
• Coolors: for providing a free platform to generate your own palette.
• Icons8: for providing free access to amazing icons and illustrations.
• Postgresql: for providing a free database.
• Codemy.com: for providing a free video on how to implement pagination in the project.
• Responsive Viewer: for providing a free platform to test website responsiveness
• GoFullPage: for allowing to create free full web page screenshots;
• Favicon Generator. For real.: for providing a free platform to generate favicons.

All names are fictional (the majority of the names were taken from "The Simpsons" and "Rick and Morty" cartoons), and any resemblance to actual events or locales or persons, living or dead, is entirely coincidental.

---

Acknowledgments

• Tim Nelson was a great supporter of my bold idea of a project. Tim helped me to understand the concept of a database for the school app and greatly motivated me to do my best throughout the whole development stage.
• Aleksei Konovalov, my husband and coding partner, who assisted me greatly in understanding AJAX implementation and helped me to stay sane.
• My current workplace for providing me with the main idea for the project and incentivizing me to work on it.