Live Version: Cool School
Repository: GitHub Repo
The app is developed by Iuliia Konovalova.
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.
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.
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.;
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
-
- 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.
-
- 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.
-
- SQLite: was used as a development database.
- PostgreSQL: the database used to store all the data.
-
- 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.
Please refer to the FEATURES.md file for all features-related documentation.
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.
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.
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.
-
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.
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
- During the earliest stages of the project, the database was created using SQLite.
- The database was then migrated to PostgreSQL.
- The ERD was created using Draw.io.
- CustomUser
Extends Allauth's User model.
Name | Database Key | Field Type | Validation |
---|---|---|---|
UserName | username | CharField | max_length=50, blank=False, null=True, unique=True |
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 | 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'),
)
- 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 |
- 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 |
- 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 |
- 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'),
)
- 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 |
- 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 |
- 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'),
)
Please refer to the TESTING.md file for all test-related documentation.
-
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.
- 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.
- 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.