Designing a online Kids Learning Web Application with Python and JavaScript.
This Website was created with the purpose of providing educational online courses for children and teenagers. First, people will have the option to view the page and the available courses, with the option of registering to be able to browse the section of available courses, filter them by categories and by words. They will also be able to see details of each available course, which includes an image, description, rating and review in which they will be able to qualify and give their opinion. Second, I wanted each user to have more options when making their purchase, therefore, each available course will have a special addition and free additions with which the registered user will feel more comfortable when making their purchase. Third, registered users will be able to add or delete courses from the shopping cart, to be able to buy the courses, to view the purchase orders and the status of the transaction. Finally, after the user makes his purchase, the user can read a thank you message in order to strengthen them and make him a constant buyer.
- This web application must utilize Django (including at least one model) on the back-end and JavaScript on the front-end.
Meet this requirement
- This application must be mobile-responsive.
Meet this requirement
- In a README.md in your project’s main directory, include a writeup describing your project, what’s contained in each file you created, and (optionally) any other additional information the staff should know about your project. This file should also provide your justification for why you believe your project satisfies the distinctiveness and complexity requirements, mentioned above.
This file
- If you’ve added any Python packages that need to be installed in order to run your web application, be sure to add them to a requirements.txt file!
#
# This file is autogenerated by: pip freeze > requirements.txt
#
appdirs==1.4.4
asgiref==3.2.10
certifi==2020.12.5
cffi==1.14.4
chardet==4.0.0
cryptography==3.2.1
distlib==0.3.1
Django==3.0.8
django-crispy-forms==1.10.0
filelock==3.0.12
idna==2.10
markdown2==2.3.9
Pillow==8.0.1
pycparser==2.20
pytz==2020.1
requests==2.25.1
six==1.15.0
sqlparse==0.3.1
urllib3==1.26.2
virtualenv==20.0.26
- The website is called Play and Learn, at the beginning you will see a personalized card addressed to the client.
- Everyone can see the available courses and have the option to register.
- Registered users will be able to sign in and sign out from the website.
- Search implementation to find available courses using a filter by categories and words into the course’s titles and descriptions.
- Show course details and prepare an order with course additions. Some of the additions are charged, some others are free.
- Registered users can add or delete orders from the shopping cart. An Order includes course, additions, items prices and total price.
- Show orders in the shopping cart and an icon of the cart with the number of selected courses.
- Registered users will be able to rate and make a comment in each available curse.
- An anchor was created to redirect the hyperlinks to the available courses and not to the beginning of the page.
- After the user makes his purchase, the user can read a thank you message in order to strengthen them and make him a constant buyer.
- courses: Application folder
- media: Courses images (in .jpg and .png)
- migrations: Migrations files ( .py)
- static
- courses: Static folder
- css
- kids.css: Style sheet
- kids.css.map: Map file create by the scss compiler.
- kids.scss: Sass file that compiles to kids.css
- image
- kids.jpg: background page
- play.jpg: card image
- js
- kids.js: JavaScript code for filter by categories and words into the course’s titles and descriptions, rating and write opinions.
- css
- courses: Static folder
- templates
- courses: Templates for courses application
- coursereview.html: review each available course.
- error.html: general error template.
- index.html: list available courses and allows filter.
- layout.html: root template from which every other template inherits.
- login.html: login page.
- register.html: new user registration form.
- shoppingcart.html: list orders, items and subitems, display a modal dialog with order contents, allowing to choose course additions.
- showpurchase.html: show successful payment results and a modal dialog with details.
- notfound.html: Personalized 404 http error page.
- courses: Templates for courses application
- templatetags/: Template tags used in django templates.
- admin.py: For registering models to be accessed from /admin. All the models in models.py are registered.
- apps.py: registered apps for the current project.
- models.py: app models.
- User(AbstractUser): A User can create many orders and can write reviews for many courses.
- DistribCourse: Can proved many Courses.
- Course: A Course have one DistribCourse.
- CategoCourse: Is associated with many Courses.
- AddCourse: Belongs to one Course, a course have cero o many AddCourses.
- ReviCourse: A course review/rating is written by a User for a Course.
- Order: Associated with the user.
- OrderCourse: Part of only one Order, and is associated with one Course.
- OrderSubitem: Part of only one OrderCourse, and is associated with one AddCourse.
- test.py: file for tests.
- urls.py: html app routes.
- views.py: app controllers responding to routes.
- finalproject: The project Folders
- asgi.py: ASGI config for finalproject project.
- setting.py: project setting file (Django settings).
- urls.py: html project routes.
- wsgi.py: WSGI config for finalproject project.
- db.sqlite3: The databse file.
- manage.py: Django's command-line utility for administrative tasks.
- README.md: This file.
To complete the final project. I encountered a variety of problems that I had to deal with. Then, I outlined the main issues that would be involved in project completion and worked backward to break down the work that should be done at each stage
I created a list of all the possible risks that could prevent me from reaching my goal, and then added some extra time to the schedule in case something unexpected came up. I also made sure to dedicate enough time to each part of the project according to its complexity. The project was completed on time, but looking back, I realize there were some issues that could have been avoided. For example, I would have avoided being so meticulous in design to avoid some of the minor programming problems I encountered. Having said that, it's always easier to see what it is that I learned after I complete the project, and now I know what I would do differently next time
Also, I want to say that this project has been a challenge, with its complexities and errors, I learned a lot and I know that I will be able to apply what I learned in future projects oriented to this same field, I really enjoyed doing all the projects and it was a pleasure always listen to the videos and I was able to make what I had in mind come true, thanks for everything.
⌨️ with ❤️ from Raul J Rivera. 😊 🛠️