Sparkling Minds club is a fictional club for children to join in . It reflects the wide range of activities and courses that kids’ clubs typically offer.
To visit the live link click: Sparkilng Minds Club
- Sparkling Minds Club
- User Experience Design(UX)
- The-Scope-Plane
- The Structure Plane
- The-Surface-Plane
- Testing
- Deployment
- Credits
- Acknowledgments
Table of contents generated with markdown-toc
-
-
-
Overview:
Sparkling Minds Club website aims to provide a diverse array of options for parents to enroll their children in various courses, sports, and activities. The primary goal is to create a user-friendly platform where parents can easily explore, select, and register their kids for enriching experiences.
-
Key Objectives:
-
User-Friendly Interface: The website prioritizes ease of use and navigation, ensuring that parents can quickly find relevant information and enroll their children in desired activities.
-
Diverse Offerings: We offer a wide range of courses, sports, and activities to cater to different interests, ages, and skill levels of children.
-
Convenient Registration Process: Parents can easily register and add their children for courses and activities.
-
Transparent Information: We provide detailed information about each course and activity, including schedules and instructors enabling parents to make informed decisions.
-
Engaging Content: The website features engaging content, including photos, and testimonials, to showcase the excitement and benefits of participating in our programs.
-
-
-
The Agile planning for Sparkling Minds Club involved breaking down the project into smaller, manageable tasks and iterations, prioritizing them based on value, and adapting to changes as needed.
-
-
As a First Time Users:
- I want to be able to easily understand the main purpose of the app, so that I can learn more about this app.
- I want to be able to easily navigate through the app, so that I can find the content.
- I want to be able to register my account, so that I can learn the benefits of the app as a user.
-
As a Frequent Users:
- I want to be able to log in to my account, so that I can have a personal account.
- I want to be able to easily log in and log out.
- I want to be able to easily recover my password in case I forget it, so that I can recover access to my account.
- I can be able to change my password, so that I can be sure that nobody else can access my account.
- I would like to be able to add my child/children to the site and enrol him/them on the desired program.
- I would like to be able to edit my child/children information so that I can make changes when needed.
- I would like to be able to delete my child/children information when they are done or no longer participating in the program.
-
As a Site Owner:
I want parents and kids to have a blast using the app! I envision an experience where families can easily check out all the cool activities and courses we offer. Parents should feel informed, and kids should be super excited to join in. My goal is to make the app easy to use, fun to explore, and full of awesome opportunities for learning and growth.
-
As a developer:
- I need to create the navbar so that users can navigate the website from any device.
- I need to create the base.html page and structure so that other pages can reuse the layout.
- I need to create static resources so that images, css and javascript work on the website.
- I need to set up the project so that it is ready for implementing the core features.
-
-
- Responsive Design - Site should be fully functional on all devices.
- Hamburger menu for tablet/mobile devices
- Ability to perform CRUD functionality on Users and child/children added by the users.
-
The website includes a home page, a login page, a registration page, a profile page, and a calendar page. Every page is designed to adapt seamlessly to various devices, ensuring full responsiveness across different screen sizes.
All pages have:
contains an image and a text of the logo at the far left and a navigation bar at the right. The Navigation bar has the links of Home page, Features [About us, Gallery, Teachers, Testimonials] subheadings in the main page, courses page, contact Us page and a dropdown of User font awesome icon.
-
If the user is new or not registered, the user fontaweson will dropdown to two links: Sign in and Register.
-
If the user is registered or signed in, the user fontawesome icon will dropdown to two links: Profile and Sign out.
On the mobile version of the website, the navigation bar will have a hamburger menu icon.
contains the following sections:
- Get in Touch with address, phone number, email address and social media links that open in a new tap.
- Quick Links to some sections or pages on the website.
- Photo Gallery which contains a sample photo of the Gallery Section.
- Section for the copy right with an image of the logo and reference to the designer, distributer, developer of the website.
On the mobile/ tablet version these sections will layout on top of each other.
-
The pages of the website are:
-
- Give the user to choose whether he wants to delete his account.
- Make the course/Activities with various prices that suits the parents with coupons feature.
- Use a safe payment method.
-
-
This is the basic outline of the database design and data modeling for the Sparkling Minds kids club project using MongoDB, taking in consideration the different entities and their relationships within the application:
-
Entities:
- Users: Store information about registered users.
- Kids: Store information about children registered by users.
- Courses: Store information about available courses or activities for kids.
-
Database Schema:
- Users Collection:
- _id: Unique identifier for the user (automatically generated by MongoDB).
- username: Username of the user.
- first-name: First name of the user.
- last-name: Last name of the user.
- email: Email address of the user.
- password: Hashed password of the user.
- security-question: Security question for password recovery.
- security-answer: Answer to the security question.
- Kids Collection:
- _id: Unique identifier for the child (automatically generated by MongoDB).
- username: Username of the parent (related to the Users collection).
- childfname: First name of the child.
- childlname: Last name of the child.
- date_of_birth: Date of birth of the child.
- school_name: Name of the school the child attends.
- school_year: Current academic year of the child.
- child_choice: List of courses or activities chosen by the child(related to the Courses collection).
- child_med_conditions: Medical conditions or allergies of the child.
- Courses Collection:
- _id: Unique identifier for the course (automatically generated by MongoDB).
- course_name: Name of the course or activity.
- description: Description of the course or activity.
- age_group: Suitable age group for the course.
- schedule: Schedule or timings of the course.
- Users Collection:
-
Data Modeling:
- Users Collection:
{ "username": "john34", "first-name": "John", "last-name": "Doe", "email": "john@example.com", "password": "hashed_password", "security-question": "What is your favorite teacher's name?", "security-answer": "Mrs.Baker" }
- Kids Collection:
{ "username": "John", "childfname": "Alice", "childlname": "Doe", "date_of_birth": "2010-05-15", "school_name": "ABC School", "school_year": "Year 4", "child_choice": ["Football", "Englisg Course"], "child_med_conditions": "None" } ```
-
Courses Collection:
{ "course_name": "Maths Course", "Teacher": "Elena Jacobs", "School_year": "1 - 6", "course_Days": "Saturday - Sunday", "course_time": " 10:00 - 11:00 AM" }
-
-
-
- The fonts for the website were imported using Google Fonts.
- The main font is ‘Heebo’ as a clear, legible font suitable for body text. and ‘San Serif’ as a fallback font for the text on screens of all sizes.
- The Headings are ‘cursive’ to add a playful and whimsical touch to the website, and ‘Lobster Two’ as a fallback font for the text on screens of all sizes. In fact, by combining the features of both fonts and design principles, The Sparkling Clubs Website can effectively capture the attention and imagination of its young audience while providing an enjoyable and informative online experience.
-
- The Website logo was made by Ussama Youssif as copyright.
- The images were taken from google.
-
-
- Python 3.11: 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.
-
- Flask: python framework used to create the application.
- Javascript and jQuery User Interface were used to create interactive elements.
-
- Mongo Database: 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.
- GitHub: used to host the website's source code.
- Chrome DevTools: was used to debug the website.
- Font Awesome: was used to create the icons used on the website.
- Google: was used to for random photos of children and teachers.
- 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.
- BootStrap5: was used to create responsive elements.
-
Test cases and results can be found in the TESTING.md file.
Whether deploying using Heroku or Localy you need to have a Github account, MongoDB Atlas account and a Heroku account to deploy this project.
For Mongo Atlas account follow the instructions here.
To use the project, navigate to this GitHub Repository Sparkling Minds Club and click the fork button which will create a duplicate of the full project in your GitHub Repository. Make sure to add the env.py as shown below.
-
Navigate to this GitHub Repository Sparkling Minds Club
-
Click on the code drop down button.
-
Click on HTTPS
-
Copy the repository link
-
In your prefered IDE type
git clone 'https://github.com/Jawahir01/Sparkling-Minds-Kids-Club.git'
The project is now cloned on your local machine.
-
Create the env python file then add it to the .gitignore file. Type:
nano env.py
- Add this code to the env.py
import os
os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", "You-Secret-Key")
os.environ.setdefault(
"MONGO_URI", "mongodb+srv://<username>:<password>@<cluster_name>-$$$$$.mongodb.net/<database_name>?retryWrites=true&w=majority")
os.environ.setdefault("MONGO_DBNAME", "sparkling_minds_club")
*Note: After finishing the deployment, set the debug to False in app.py.
To deploy into heroku, follow these steps:
-
In your terminal type the command
pip freeze > requirements.txt
. -
Type
echo web: python app.py > Procfile
. -
Push the files into your GitHub.
-
In Heroku dashboard, click "New" and give the app a name.
-
Click "Deploy" > "Deployment method" and select GitHub.
-
Choose the GitHub Repository.
-
Click "Settings" > "Reveal Config Vars".
-
Set debug to False in settings.py
-
Set the following config:
Key | Value |
---|---|
DEBUG | FALSE |
IP | 0.0.0.0 |
MONGO_URI | mongodb+srv://<username>:<password>@<cluster_name>-$$$$$.mongodb.net/<database_name>?retryWrites=true&w=majority |
PORT | 5000 |
SECRET_KEY | <secret_key> |
- Click "Deploy".
- "Manual Deployment" > click "Deploy Branch".
- Now the site is successfully deployed.
-
The Live Link: https://sparkling-minds-ffd249568f6d.herokuapp.com/
- Codeanywhere: the IDE used to develop the website.
- ThemeWagon: For providing a free Responsive HTML5 Bootstrap 5 Educational Website Templates.
- ChatGPT: was used to write the update form code, username joind with user-icon and to give more formal sentences for the website and README file.
- Favicon.io: was used to convert the logo image into favicon.
- Stack Overflow - was used to search for code related errors and bugs.
- jeda.ai: was used to make wireframes for the website.
- generated.photosi: was used to generate fake photo for the football coach.
- Iuliia Konovalova :My Mentor Guidance at Code Institute for her professional teaching and helping throughout the project time.
- Manu Perez : My supervisor at City of Bristol College for his patience, support and encouragement all the time.
- Ussama Youssif : For his exceptional contribution and creative input in designing the logo for my project.
- community-london in Slack and WhatsApp: for their continuous support and availability. Special thanks to Erikas Ramanauskas for his dedicated efforts in assisting with code-related issues
- Student Care :for their support.
- Gareth-McGirr :a GitHub user whose project inspired me to create my README file.