Learn Code Share Repeat

I aim to address the existing limitations in online video-sharing platforms where educational content related to programming and coding becomes outdated, irrelevant, and plagued by non-constructive comments.

I want to develop a solution that empowers coders to share their knowledge through video content in a way that ensures the content remains up-to-date, well-explained, and transparent and fosters constructive interactions among users.

The goal is to create an innovative web application that serves as a tool to enhance knowledge and understanding, taking inspiration from the Richard Feynman technique, where the quality of content is paramount, and the community of learners and experts collaborates to enhance the learning experience.

• UX/UI
• Agile
  • Future Implementations
• Schema
• API
• Deployment
  • Local
  • Remote
• References
  • Inspiration
  • Design
    • References | Images
    • References | Videos
  • Django
  • React
    • Packages / Libraries
  • Docker
  • GraphQL
  • Progressive Web App (PWA)
  • Additional
    • Newsletter Emails

UX/UI

For further details see the following documentation:

• Define and Ideate
• Five Planes of Design

Agile

Future Implementations

• Search and Discover: Improve search and discovery functionalities, allowing users to find videos by title, tags, and content type.
• Content Moderation: Strengthen content moderation to maintain a positive and safe user experience.
• Open-Source Components: Explore integrating open-source components for video hosting, content management, and other system-level improvements to enhance efficiency and stability.
• Generative AI: Introduce generative AI for advanced content recommendation, summarisation, and user engagement insights.
• Micro-Learning Modules: Introduce micro-learning modules alongside video uploads, where users can engage with short, interactive coding challenges or quizzes related to the video content.
• Interactive Coding Environment: Offer an in-browser coding environment that allows users to practice coding while watching tutorial videos.
• Real-Time Coding Collaboration: Enable real-time coding collaboration between users, where they can work on coding projects together.
• AI-Driven Video Analytics: Implement AI-driven video analytics to track user interactions within videos.
• Live Streaming Workshops: Introduce live streaming workshops and webinars where coding experts can provide real-time instruction.
• Personalised Learning Paths: Develop an AI-based recommendation system that offers personalised learning paths for users.
• Virtual Coding Mentor: Implement a virtual coding mentor powered by AI, which can provide personalised feedback and guidance based on a user’s coding activity and progress.
• AI-Enhanced Collaboration: Use AI to enhance real-time coding collaboration. It can suggest solutions, identify errors, and provide real-time code analysis.
• Gamification and Tournaments: Introduce gamification elements and coding tournaments where users can compete and earn badges or rewards for achieving coding milestones.
• Multilingual Learning: Expand the platform to support multiple languages, making coding education accessible globally.
• Blockchain-Based Credentials: Explore blockchain technology to issue verifiable certificates or credentials for completed courses and coding challenges.

Schema

API

For further details see the following documentation:

• API Overview

Deployment

This is a Monolithic Full-Stack Django-React Application with Vite and Yarn. For further details regarding deployment see the following documentation:

• Deploy Unified Django‐React Project on Heroku

Local

1. Ensure the following is installed on your machine:

   • Docker
   • Docker Compose
   • Python 3
   • Node.js
   • Yarn

2. Create .env file and add environment variables:

   cd backend
   mv .env.sample .env

   • Add the following environment variables to the .env file:

     SECRET_KEY=your_secret_key
     DEBUG=True
     DJANGO_ALLOWED_HOSTS=localhost,
     DATABASE_URL=postgres://postgres:postgres@db:5432/postgres
     
     PIXABAY_API_KEY=https://pixabay.com/api/docs/
     PIXABAY_API_URL=https://pixabay.com/api/
     
     CLOUDINARY_URL=https://cloudinary.com/documentation/image_upload_api_reference
     CLOUDINARY_NAME=your_cloudinary_name
     CLOUDINARY_API_KEY=your_cloudinary_api_key
     CLOUDINARY_SECRET=your_cloudinary_secret
     
     EMAIL_HOST=smtp.sendgrid.net
     SENDGRID_API=your_sendgrid_api_key
     SENDGRID_FROM_EMAIL=your_sendgrid_from_email
     
     EMAIL_HOST_USER=apikey
     EMAIL_HOST_PASSWORD=your_sendgrid_api_key
     EMAIL_PORT=587
     EMAIL_USE_TLS=True
     
     SQL_ENGINE=django.db.backends.postgresql
     SQL_DATABASE=postgres
     SQL_USER=postgres
     SQL_PASSWORD=postgres
     SQL_HOST=db
     SQL_PORT=5432

3. Clone the repository:

   git clone https://github.com/halfpintutopia/learn-code-share-repeat.git

4. Create a virtual environment:

   python3 -m venv venv

5. Activate the virtual environment:

   source venv/bin/activate

6. Start backend server:

   cd backend
   docker compose up -d --build
   docker compose exec video-sharing python manage.py migrate
   docker compose docker compose exec video-sharing python manage.py createsuperuser

7. Open the browser and navigate to http://localhost:8000/admin.

8. Start frontend server:

   cd ../frontend
   yarn install
   yarn dev

9. Open the browser and navigate to http://localhost:3001.

Remote

1. Ensure the following is installed on your machine:

   • Docker
   • Docker Compose
   • Python 3
   • Node.js
   • Yarn

2. Create a Heroku app

   • via Heroku CLI

     heroku create your_heroku_app_name

   • or via Heroku Dashboard

3. Add the following environment variables as config vars in Heroku (1 in image below)

   

   BUILDPACK_URL=https://github.com/heroku/heroku-buildpack-multi.git
   SECRET_KEY=your_secret_key
   DJANGO_ALLOWED_HOSTS=your_heroku_app_name.herokuapp.com,
   DATABASE_URL=postgres://postgres:postgres@db:5432/postgres
   PIXABAY_API_KEY=https://pixabay.com/api/docs/
   CLOUDINARY_URL=https://cloudinary.com/documentation/image_upload_api_reference
   CLOUDINARY_NAME=your_cloudinary_name
   CLOUDINARY_API_KEY=your_cloudinary_api_key
   CLOUDINARY_SECRET=your_cloudinary_secret
   SENDGRID_API=your_sendgrid_api_key
   SENDGRID_FROM_EMAIL=your_sendgrid_from_email

4. Add the following URL to Heroku app Buildpacks (2 in image above)):

   https://github.com/negativetwelve/heroku-buildpack-subdir

5. Set up deployment from GitHub repository:

   

   • via CLI (ensure you are in the root directory of the project)

     heroku git:remote -a your_heroku_app_name
     git subtree push --prefix backend heroku main

   • or via Heroku Dashboard

     • Connect to GitHub
       • Connect to GitHub > Search > Connect
     • Enable Automatic Deploys
     • For Manual Deploy, select the branch and click Deploy Branch
     • For Automatic Deploys, select the branch and click Enable Automatic Deploys
     • Click Deploy Branch
     • Click Open App, at the top of the page, to launch the app
     • Click More > View Logs to view the logs

References

Inspiration

• How to Learn Anything with the Feynman Technique
• The Feynman Technique Can Help You Remember Everything You Read
• The Feynman Technique | YouTube
• Building in brighton covered in graffiti
• YouTube
• FrontendMasters
• Vimeo

Design

• Adobe Color

References | Images

• Computer Program Language Text | Photo by Jorge Jesus

References | Videos

• Digital Presentation Of information On A Screen Monitor | Video by Pressmaster
• Person Encoding in a Computer | Video by Nino Souza

Django

• Django Authentication Tutorial | Auth0
• Django | Auth0
• Secure Your Django web apps with Auth0
• Tutorial | Django Girl
• Adding Social Authentication to Django
• Simple JWT

React

• Complete Intro to React, v8
• Separation of Concerns in React - How to Use Container and Presentaional Components
• Creating a Single-Page App (SPA) in React using React Router
• React Router 6: Authentication

Packages / Libraries

• React Query - Tanstack Query v5
• Vite
• Prettier
• React | Adding a Sass Stylesheet
• Bootstrap RFS (Standalone)
• React Router
• How to Use React Helmut - With Example Use Case

Docker

• How to dockerize a Django and React application
• React + Django + Postgres

GraphQL

• Code using GraphQL
• GraphQL in Django Backend (Graphene) - React Tutorial 63
• Django + GraphQL + React —1. Integrate GraphQL into your Django project
• Django + GraphQL + React —2. Integrate GraphQL into your Django project

Progressive Web App (PWA)

• Make PWA of a Django Project

Additional

• Cloud Covert | MP4 to WEBM Converter
• Self-hosting fonts explained (including Google fonts) // @font-face tutorial
  • GDR compliant
• How to Use Sass and Styled Components in a React JS Application | Tim Smith
• react-fontawesome not displaying icons | StackOverflow
• Beautiful CSS box-shadow examples
• Creating a reusable pop-up modal in React from scratch
• Create Accessible Tabs with HTML, CSS & JS | Kevin Powell
  • Heydon Works
• Free Responsive HTML Email Template
• Handling Tabs Using Page URLs and React Router Doms
• Stately
• X State
• You need to fix your line-hegiht
• MDN Web Docs
• Sendgrid
• A better image reset for your CSS
  • The Ultimate Low-Quality Image Placeholder Technique
• How to code a carousel with HTML, CSS and JavaScript - from scratch (part 1)
• How to code a carousel with HTML, CSS and JavaScript - from scratch (part 2)
• Django React Docker Heroku Template
• How to Create An Animated Image Carousel with CSS/JavaScript

Newsletter Emails

• Choosing a Responsive Email Framework: MJML vs Foundation for Emails
• Best Free Responsive HTML Email Template Builders for 2023
  • mjml
  • heml
• Email BoilerPlate