CodeFusion CodeFusion is an online learning platform designed for aspiring developers, beginners, and professionals looking to enhance their programming abilities. The CodeFusion platform offers a comprehensive suite of courses tailored to the world of coding and provides an intuitive, interactive environment, where learners can engage with high-quality course content and participate in hands-on projects within a secure and user-friendly interface.
Create and Access an Account
- Create an account by providing my email and password
- Log in using my credentials
Browse and Select a Course
- Browse a list of available courses
- View detailed information about a course, including syllabus, instructor, and price
- Enroll in a course by completing the payment process
Safely Pay for Course Access
- Make payments securely
- Receive a confirmation message after successful payment
- Access my enrolled courses from my dashboard
Manage user accounts:
- view, edit, and deactivate learner accounts
Manage Courses:
- Create new courses by adding titles, descriptions, modules, and pricing
- Update course details and materials
- Remove courses that are outdated or no longer needed
Responsive Design
- Access the platform on various devices (desktop, tablet, mobile),
Intuitive Navigation
- Navigate the platform easily using a clear and consistent menu structure,
Secure Data Handling
- Know that my data is handled securely,
Naviagtion is kept clean and simple. While larger screens afford the full size nav menu, nav display on smaller screens is condensed into a burger menu. It also responds to the type of user that is logged in, providing additional features for users with the appropriate permissions.
The landing page is available to all, including anonymous users. The image was chosen to give a sense of mystery with the strong Matrix vibe while the text encouraging users to start learning should make them feel like it is something that they can be a part of. Underneath there is a brief description of wha CodeFusion is, who it is for and why potential students should choose to study with CodeFusion.
%20(1).png)
%20(1).png)
Other than the landing page everything is secured behind a user account. User data is securely stored using Django-allauth.
The dashboard provides a space for users to store their profile information. Some of this is taken at user signup but only basic info like username and email. The remaining fields are optional and allow users to customise their profile as much or as little as they like.
The second section of the dashboard provides a quick glance at the courses that the user is currently enrolled on.
The course list clearly displays courses, giving users a clear indication of what the course is about at a glance. A brief description is included to give the user a bit more information on what is covered and who the course is aimed at. Finally, the price and add to basket button at the bottom.
As these cards are also links to the course content, should a user attempt to access a course that they ae not enrolled in a simple message is displayed to indicate that the content is restricted. This message automatically times out after a few seconds.
Each lesson is a video so users can follow along with the course material at their own pace and revisit any topics they wish to at their leisure. Navigation buttons are placed underneath the video for convenient navigation between lessons. Whilst viewing is possible in prtrait mode, landscape is very much recommended.
Courses that have been aded to the basket appear here. Each course gives some information about the course such as title, instructor and price. There is also a remove button should users change their mind. Each item added to the basket will bring the user to the basket so a continue browsing button is placed at the bottom for conveniently returning to brose more courses. When the user is ready to checkout the checkout button will take them to process payment.
Stripe checkout takes care of payments. Form is fully validated and secure and provides options for remembering users and faster checkouts using link.
If a user cancels they are taken back to the site via a cancel confirmation page which automatically redirects to the basket after a few seconds. If this fails there is a button that can be clicked or the navigation menu can be used so the user isnt stranded.
Once checkout is completed a success message is displayed for a few seconds before automatically redirecting back to the dashboard where the user can see theie purchased courses in the enrollment list. Again, should the redirection fail there is a button or the navigation menu to rescue the user.
Currently, admins can access the course management section from here. From here admins have full control over CRUD functionality for all course and lesson content. The delete button on courses is defensively programmed to avoid accidental deletions.
There are many features I didnt have time to implement that would improve the user experience. Below are a few.
- Prevent user from being able to purchase a course they are already enrolled on
- Resume learning from the dashboard
- Changing quotes on the basket redirect page
- Prevent lessons being created with the same order number
- Auto increment order number so that the user doesnt have to remember to set each one
- Access to all courses by default for admin/staff users
- Various success and other feedback messages. Most things are fairly clear when they have or havent succeeded but that extra layer of feedback for the user would be nice
- Feedback if a user tries to add the same course to the basket twice. Currently this is not possible but a message would make this clearer to the user
The schema for this project called for a variety of relationship types between tables.
The flow chart
| Expectation | Implementation |
|---|---|
| I want to create an account by providing my email and password, so that I can securely access and personalize my learning experience. | Users are able to create an account via the register page. Anonymous users cannot access restricted pages, even with a url |
| I want to log in using my credentials, so that I can access my enrolled courses and progress. | Once registered users can login to their account securely |
| I want to reset my password through my registered email, so that I can regain access to my account without hassle. | Reghistered users can request a password reset email from their user dashboard |
| I want to browse a list of available courses, so that I can choose courses that interest me. | The courses page provides a list of all courses that are available to study |
| I want to view detailed information about a course, including syllabus, instructor, and price, so that I can make an informed decision before enrolling. | Each course has a title, image and description that give the user a clear idea of the course content and the level of difficulty |
| I want to enroll in a course by completing the payment process, so that I can gain access to course materials and start learning. | Users can pay for courses in order to gain access to the content |
| I want to make payments securely so that I can ensure my financial information is protected during transactions. | Payments are made secure using Stripe checkout. Users can be confident their data is safe |
| I want to receive a confirmation message after successful payment, so that I know my enrollment has been processed. | Users are taken to a confirmation message after successful payment |
| I want to navigate through different modules or sections within a course, so that I can follow the course content easily. | Course lessons are ordered and navigation on each lesson page helps users stay on track |
| I want to update my profile information, such as my name and contact details, so that my account information remains current and accurate. | Users are able to update their profile from the dashboard |
| I want to view a history of all courses I have enrolled in, so that I can easily revisit past courses or track my learning progress. | Enrolled course are displayed in the user dashboard |
| Expectation | Implementation |
|---|---|
| I want to create new courses by adding titles, descriptions, modules, and pricing, so that I can expand the platform’s offerings to attract more learners. | Admin users are able to access the Course Management interface and create courses and lesson content |
| I want to update course details and materials, so that I can ensure that the content remains current and relevant. | Admin users are able to access the Course Management interface and edit courses and specific lesson content |
| I want to remove courses that are outdated or no longer needed, so that the platform remains organized and focused on quality content. | Admin users are able to access the Course Management interface and delete courses |
| I want to add, edit, or reorder modules within a course, so that the course structure is logical and effective for learners. | Admin users are able to access the Course Management interface and edit specific lesson content |
| Expectation | Implementation |
|---|---|
| I want to access the platform on various devices (desktop, tablet, mobile), so that I can use the platform conveniently from anywhere. | The platform has been designed and tested throughout to ensure compatibility across a range of devices and screen sizes |
| I want to navigate the platform easily using a clear and consistent menu structure, so that I can find the features and information I need without confusion. | Navigation is simple and consistent, changing only depending on screen size or for additional admin navigation |
| I want to know that my data is handled securely, so that I can trust the platform with my personal and financial information. | Django allauth and Stripe are well regarded as being safe and secure means of handling user data |
The HTML validator was unable to assess and validate by URL for any pages that required authentication to access. In order to assess the HTML I copied the code from the dev tools in Chrome and pasted into the validator.
During validation I discovered a duplicated id attribute as a consequence of generating an element with an id programmatically. The id was required for a JavaScript function to attach to so this was re-allocated to a class instead and the JavaScript updated. This then lead to another issue where the JavaScript was trying to run on every page but throwing a type error because it couldnt find the class. To solve this I moved the script into its own script file and called it only in the template where it was required.
This project can be cloned or forked in order to make a local copy on your own system.
You will need to install packages found within the requirements.txt file and set environment variables in an env.py file saved to the root directory.
By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository.
You can fork this repository by using the following steps:
- Log in to GitHub and locate the CodeFusion GitHub Repository
- At the top of the Repository (not the top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- Once clicked, you should now have a copy of the original repository in your own GitHub account!
There are several methods available to clone a repository but this guide will use Visual Studio Code.
-
Go to the CodeFusion GitHub repository
-
Copy the url from the address bar or click on the green 'code' button and copy the url from there
-
In VS Code select Clone Git Repository from the welcome screen or push ctrl + shift + P on your keyboard to open the pallette and type 'clone'. From the list select Git:clone and paste in the repository URL. Push enter or click the URL
-
VS Code will prompt you to select a destination folder for the cloned repository. Once selected the repo will be cloned and VS Code will prompt again to open the cloned repository.
-
It is advisable to setup a virtual environment before installing packages. Hit ctrl + shift + P and in the pallette type Python:Create environment. Hit enter or click and choose venv, then select your Python interpreter. As there is a requirements.txt file in the repository you may be prompted to select dependencies to install. If so check the box for requirements.txt and give VS Code a moment to set everything up. When the environment is ready VS Code will display a small message in the corner and a (.venv) should appear in your terminal.
-
If the option to install dependencies wasnt offered then once the venv is setup go to your terminal and type:
pip install -r requirements.txt
Wait while dependencies are installed
-
Create env.py file in root directory and assign environment variables
import osos.environ['SECRET_KEY'] = 'yourdjangosecretkeygoeshere'os.environ['STRIPE_SECRET_KEY'] = 'yourstripesecretkeygoeshere'os.environ['STRIPE_PUBLISHABLE_KEY'] = 'yourstripepublishablekeygoeshere'
-
Before running the server initialise a database. In the terminal type:
python manage.py makemigrations
Once that has completed, in the terminal type:
python manage.py migrate
You should now have an empty sqlite3 database for local development
-
Make sure DEBUG is set to True in settings.py and in the terminal run:
python manage.oy runserver
VS Code should prompt to open a browser but if not ctrl + click the development server address in the terminal. If you encounter a warning from Django regarding allowed hosts go back to settings.py and in the ALLOWED_HOSTS list add your local IP address.
-
The final thing to do is create an admin user. In the terminal type:
python manage.py createsuperuser
You will be prompted for some credentials (email isnt necessary, push enter to skip and you will not be able to see the password you type in, this is normal)
-
Run the server if it isnt already running and login with the superuser credentials. If you need to access the django admin features just add /admin to the local address in the browser address bar.
-
In your IDE terminal type the following commands to setup your repository:
git remote add origin https://github.com/your-username/new-repo.gitgit push -u origin main
This covers deploying with Heroku but steps should be similar for other hosting platforms.
Settings.py is basically ready to go but be sure to turn DEBUG to False before deploying. You will also need a postgres database and your choice of host for serving static and media files such as Amazon S3. This process assumes an S3 setup however it is worth being mindful of settings.py as even if using S3 some settings may differ such as the region Amazon picks for your bucket. Double check the settings in settings.py and verify they are suitable for your setup.
Deployment steps are as follows:
Before setting up in Heroku you will need your postgres url, your Amazon S3 bucket details and if you want to send emails an SMTP email.
This process connects your GitHub repository to Heroku. Alternatively you can follow the instructions on Heroku to deploy using the Heroku CLI
- Select New in the top-right corner of your Heroku Dashboard, and select Create new app from the dropdown menu.
- Your app name must be unique, and then choose a region closest to you (EU or USA), and finally, select Create App.
- From the new app Settings, click Reveal Config Vars, and set your environment variables.
| Key | Value |
|---|---|
SECRET_KEY |
yourdjangosecretkeygoeshere |
STRIPE_SECRET_KEY |
yourstripesecretkeygoeshere |
STRIPE_PUBLISHABLE_KEY |
yourstripepublishablekeygoeshere |
DATABASE_URL |
postgres://urlgoeshere |
USE_AWS |
True |
AWS_ACCESS_KEY_ID |
yourawsaccesskeygoeshere |
AWS_SECRET_ACCESS_KEY |
yourawssecretaccesskeygoeshere |
AWS_STORAGE_BUCKET_NAME |
awsbucketnamegoeshere |
EMAIL_HOST_USER |
youremailhost@usergoeshere.com |
EMAIL_HOST_PASSWORD |
emailhostpasswordgoeshere |
DEFAULT_FROM_EMAIL |
defaultfromemailgoeshere |
- Back in the deploy tab in Heroku choose connect to github and connect your github account.
- Type or paste the repository name into the search box and select your repository
- Select Automatic Deployment from the Heroku app.
- Select the main branch to deploy from and click deploy
Heroku will now build the app. When finished click view or open app from Heroku to visit the deployed version.
A Procfile must be present for Heroku to deploy correctly and all requirements packages must be installed. These are included in the github repo.
- HTML
- CSS
- JavaScript
- Python
Django course image courtesy of Roberto Huertas
HTML course image courtesy of Wikimedia Commons
Django Basket Building Reference
Image resizing courtesy of TinyPNG
Matt Freire - Django Stripe setup
AdamJ.eu - Working with Django and JavaScript
Markus Spiske - Landing page Hero Image
Scaler Topics - Riya Verma - JavaScript Reference
Special thanks goes to Ronan, my Code Institute mentor who deserves so much more than to be a footnote in a README that most will probably never see. His help and knowledge has been invaluable throughout my experience with Code Institute
Also a huge thanks to Stephen Gray who rescued my from the bowels of despair after I had been battling an issue that even Code Institute tutor support couldnt help me with after 4 hours of trying