Kanbas teaching management system

A full-stack React web application that demonstrates modern web development practices using React.js, Redux, Node.js, and MongoDB. Northeastern University Khoury 5610 Professor:Jose Annunziato

backend server repo link :https://github.com/JOBEBOLDER/kanbas-node-server-app

📋 Overview

This project is a full-stack web application that covers HTML, CSS, JavaScript, React.js, Redux, Node.js, and MongoDB. It implements best practices for modern web development and serves as a learning resource for full-stack development.

🚀 Getting Started

Project already remotely deployed on: https://kanbas-react-web-app-jieyao.netlify.app

This project was bootstrapped with Create React App

Prerequisites

• Node.js (v14 or later)
• npm or yarn
• MongoDB (for backend functionality)

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/kanbas-react-web-app.git
   cd kanbas-react-web-app

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

📜 Available Scripts

In the project directory, you can run:

npm start

Runs the app in development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

🧰 Project Structure

kanbas-react-web-app/
├── public/              # Static files
├── src/                 # Source files
│   ├── App.css          # Main application styles
│   ├── App.tsx          # Main application component
│   ├── index.css        # Global styles
│   ├── index.tsx        # Application entry point
│   ├── logo.svg         # App logo
│   ├── react-app-env.d.ts   # Type declarations
│   ├── reportWebVitals.ts   # Performance measuring
│   └── setupTests.ts    # Test configuration
├── .gitignore           # Git ignore file
├── package-lock.json    # Dependency lock file
├── package.json         # Project metadata and dependencies
├── README.md            # Project documentation
└── tsconfig.json        # TypeScript configuration

🛠️ Technologies Used

This project uses a number of modern web technologies:

• Frontend:

  • React.js
  • TypeScript
  • HTML5 & CSS3
  • Redux (for state management)

• Development Tools:

  • Create React App
  • TypeScript
  • ESLint
  • Jest (for testing)

📊 Project Stats

• Languages: HTML (39.9%), TypeScript (38.5%), CSS (21.6%)

📝 Notes

This repository includes both assignments and a full-stack project showcasing my progress in learning modern web development techniques. The code demonstrates best practices for React development and full-stack integration.

🔮 Future Development

• Integration with backend API
• Enhanced state management with Redux
• Additional features and UI improvements
• MongoDB data persistence

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---