https://github.com/cobbyelsonfx/courses-webapp
Canvas LMS API Integration is a web application that integrates with the Canvas LMS API to display course information. The application retrieves data from Canvas and presents it on a user-friendly web page.
https://github.com/cobbyelsonfx/courses-webapp
expressjs reactjs redux-toolkit
Last synced: 6 days ago
JSON representation
Canvas LMS API Integration is a web application that integrates with the Canvas LMS API to display course information. The application retrieves data from Canvas and presents it on a user-friendly web page.
- Host: GitHub
- URL: https://github.com/cobbyelsonfx/courses-webapp
- Owner: CobbyElsonfx
- Created: 2024-01-04T02:32:24.000Z (over 1 year ago)
- Default Branch: development
- Last Pushed: 2024-01-12T17:04:42.000Z (over 1 year ago)
- Last Synced: 2025-02-18T01:30:25.536Z (3 months ago)
- Topics: expressjs, reactjs, redux-toolkit
- Language: JavaScript
- Homepage:
- Size: 2.21 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Canvas LMS API Integration
# 📗 Table of Contents
- [📖 About the Project](#about-project)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [🚀 Live Demo](#live-demo)
- - [🚀 Live Demo](#screenshots)
- [💻 Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [Install](#install)
- [Usage](#usage)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [❓ FAQ (OPTIONAL)](#faq)
- [📝 License](#license)
## 📖 Canvas LMS API Integration
### Hello World
**Canvas LMS API Integration** is a web application that integrates with the Canvas LMS API to display course information. The application retrieves data from Canvas and presents it on a user-friendly web page.
Client
Server
- **Canvas API Integration:** Connects with the Canvas LMS API to fetch and display course information.
- **User-Friendly Interface:** Provides a simple and intuitive web interface for easy navigation.
- **Code Quality** No linters errors and ensured quality using DRY principle
- [Live Demo Link](https://zoni.onrender.com/)
## 🎨Images of Interface
### Home page
### Courses
### Modules
### Mobile View
To get a local copy up and running, follow these steps.
### Prerequisites
Make sure you have the following prerequisites installed on your machine:
- [Node.js](https://nodejs.org/) (v14.0.0 or newer)
- [npm](https://www.npmjs.com/) (v6.0.0 or newer)
### Setup
1. Clone the repository to your local machine:
```
git clone https://github.com/CobbyElsonfx/courses-webapp.git
```
The project is made up of two main root directories called backed and webapp
with file structures as illustrated below
```
backend/
|-- node_modules/
|-- server.js
|-- package-lock.json
|-- package.json
|-- .gitignore
```
```
webapp/
|-- node_modules/
|-- public/
|-- src/
| |-- assets/
| |-- components/
| |-- pages/
| |-- redux/
| |-- services/
| |-- views/
| |-- App.jsx
| |-- main.jsx
| |-- index.css
|-- .env
|-- .babelrc
|-- .eslintrc.json
|-- .stylintrc.json
|-- index.html
|-- package.json
|-- .gitignore
|-- postcss.config.js
|-- tailwind.config.js
|-- vite.config.js
```
### Install
#### To install the backend
1.Navigate to Backend Directory:
```
cd backend
```
2. Install Dependencies:
```
npm install
```
3. Start the app
```
npm run start
```
#### To install the Front End
1.Navigate to Webapp Directory:
```
cd webapp
```
2. Install Dependencies:
```
npm install
```
3. Create a .env file in the webapp directory and define the necessary environment variables, such as the API endpoint authorisation token
```
VITE_REACT_APP_API_TOKEN =""
```
4. Start the app
```
npm run dev
```
5. Build the App using
```
npm run build
```
👤 **Francis Andoh**
- GitHub: [@CobbyElsonfx](https://github.com/CobbyElsonfx)
- LinkedIn: [@FrancisAndoh](https://www.linkedin.com/in/francis-andoh-133aa7245/)
- [ ] **More animation**
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](../../issues/).
If you like this project and wish to collaborate. Please contact me.
The design idea is originally by Andoh Francis
- **Is it responsive?**
- Yes,it works both on mobile and desktop screens.
This project is [MIT](./MIT.md) licensed.