noWarm / LMS-frontend

a simple CRUD front end for a web application with features such as course creation, material file uploading, downloading using React

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Welcome to my First Step Project

This project is for the Individual Study under P'toto (myCourseVille) supervisation 🙏🙏 during my time at Chulalongkorn University Year 3 2022/1. It is my first serious Front End Web Application created with React. The accompanying Back End API written in Laravel is here.

Managing between RUSHING to learn and understand the Web technologies to make this project while also taking six other University subjects was surely a big mistake and it cost me my sanity. This was a mistake but I'm glad I paid the price and pulled through. I also learned from many more mistakes (see link below for details)

Features

  • Users (students & teachers) can register, login & logout of the system
  • Users stays logged in the application within 1 hour if they didn't logout
  • Teachers can create new Courses
  • Teachers can create new Materials for each Courses by uploading a File
  • Teachers can download the uploaded Material Files
  • The system will display a "Loading" message while fetching data from the back end.

Techniques Learnt

  • state and props
  • useState, useEffect
  • useContext, useProvider
  • router, navigation, redirect
  • localStorage
  • conditional rendering
  • reusing and DRY code

Development Lessons Learnt

  • stick to the planned diagrams/schemas, otherwise scope creep (and eventually EMOTIONAL DAMAGE!)
  • list out all the functional requirements (both todo and the NOT gonna dos)
  • quickly rolled out a working prototype as fast as possible instead of going down the refactoring hole
  • learnt to prioritize structure over decorations
  • choose tools based on pros/cons matrix instead of gut feeling/trends
  • learnt to read documents and asked for help

For a detailed journaling of the process and lessons learnt please check out this medium article-THAI

This project was bootstrapped with Create React App.

To start the program, in the project directory

  • npm start

Also make sure that the backend server is running

  • if you're using Xampp, start Apache & mySql server
  • php artisan serve

About

a simple CRUD front end for a web application with features such as course creation, material file uploading, downloading using React


Languages

Language:JavaScript 96.7%Language:HTML 3.3%