Project Architecture Design

Features:

• Login page for user registration
• codemirror code arena
• load code from open source projects
• calculate metrics from different keyloggers

Frontend

ReactJS

Backend

Routes

/app - homepage
/app/login - login page
/app/signup - signup page
/app/practice - practice section with lessons, previous coded lesson
/app/practice/:lesson - work on a lesson (maybe show results on this page)
/app/practice/:lesson/results - results of a lesson [alt]

Model

{
	user: "Ankush Bhardwaj",
	username: "ankingcodes",
	signin_date: 11-01-2019,
	bio: "",
	location: "",
	lines_typed: 123,
	college/organisation: "Microsoft",
        previous_lessons: ["name", "another name"],
	lessons: {
		default_lessons: [
			{
				title: "Python-Mercurial",
				code: "",
				type_data: {
					mistyped_chars: ['a','c' ....],
					accuracy: Number,
					typeableCharacters: Number,
					typedCharacters: Number,
					bestTime: Number,
					WPM: [{ date: DATE, WPM: number }]
				}
			}
		]
	}
}

The typing cost analysis should look as follows: