/learn-to-code-lms

A learning management system for to teach users the fundamentals of web development

Primary LanguageJavaScriptMIT LicenseMIT

Learn To Code

Landing Page ScreenShot

What problems does it solve and how does it solve them?

After teaching a few of the Learn To Code Seattle classes, I saw an opportunity to improve the learning experience for the students, while also improving the teaching experience for the instructor. I decided to revamp the lessons and translate them from slide deck presentations to articles in a learning managment system.

I added text areas with text highlighting, indentation, and warnings so that students can write all of their code without leaving the application. I connected the student's code snippets to a code evaluator, so that they can see their code being run in real time. All of their code is auto-saved to a postgres database so that it is always there when they want to review it.

This makes both learning and teaching much more streamlined.

Who has this problem?

Learn To Code is currently geared towards the intro classes and students. It is a great tool for someone that knows little to nothing about web development. In the future, I would like to incorporate advanced lessons, and a social aspect so that students and instructors can connect more easily.

What web APIs does it use?

  • The replit-client API for JavaScript evaluation
  • The Cloud9 Ace Editor API for syntax highlighting, indentation, and code warnings.
  • The Meetup API for Oauth and event registration.

What technologies does it use?

  • Babel
  • Brunch
  • CSS3
  • Express
  • Heroku
  • HTML5
  • Joi
  • JS (ES6/2015)
  • JSX
  • Knex
  • Material-UI
  • Node.js
  • Postgresql
  • React
  • Redux
  • SASS

What was the biggest technical challenge?

I was challenged by by many nested api calls. I spent a lot of time learning how to properly link up axios calls on the client to routes on my server, and then passing the proper data back in the response.

I also swore off grid systems at the beginning of this project and decided to create my entire layout with flexbox and media queries. I put a lot of effort into making a very responsive layout.