InstiWise Platform – Frontend Documentation

The InstiWise Platform is a comprehensive solution for institutes, designed to connect students, improve academic management, enable project sharing, and provide real-time updates through news and announcements. This repository contains the frontend application, developed using React and Redux, and integrated with Firebase for authentication and data handling.

---

Table of Contents

• Overview
• Architecture
• Technologies
• Setup Instructions
• Directory Structure
• Core Features
• Testing
• Deployment
• Future Improvements
• Support

---

Overview

InstiWise empowers students and administrators with tools to:

• Manage and view academic resources (lessons, rooms, classes).
• Share and explore student projects.
• Stay informed with real-time news & announcements from student organizations and administration.
• Connect with peers for collaboration and community building.

The platform enhances communication, accessibility, and efficiency within institutes.

---

Architecture

Components

• React (Frontend) – Builds user interface and interactive views.
• Redux Toolkit – Manages application state (auth, lessons, rooms, projects).
• Firebase – Handles authentication, file storage, and project sharing.
• REST API Integration – Communicates with the backend for lessons, rooms, and academic data.

Directory Structure

instiwise-frontend/
├── public/                  # Static assets
├── src/
│   ├── components/          # Reusable UI components
│   ├── pages/               # Application pages (Dashboard, Lessons, Projects, News)
│   ├── redux/               # Redux store and slices
│   ├── app.css              # Global styles
│   ├── App.js               # Main App entry
│   ├── dummyData.js         # Mock data for testing
│   ├── firebase.js          # Firebase config
│   ├── index.css            # Root CSS
│   ├── index.js             # App bootstrap
│   ├── requestMethod.js     # Axios instance for API requests
├── package.json             # Dependencies
├── README.md                # Documentation

---

Technologies

• React (v18) – Component-based frontend framework
• Redux Toolkit – Global state management
• Firebase – Authentication & storage
• Axios – API requests
• Moment.js – Date/time formatting
• CSS3 – Styling

---

Setup Instructions

Prerequisites

• Node.js v18+
• npm or yarn
• Firebase project credentials

Installation

1. Clone the repository:

   git clone https://github.com/mixro/instiwise-frontend
   cd instiwise-frontend

2. Install dependencies:

   npm install

3. Configure Firebase:

   • Create a project on Firebase Console.
   • Enable Authentication & Firestore/Storage.
   • Add your config details in src/firebase.js.

4. Run the app:

   npm start

   The app runs at http://localhost:3000.

---

Core Features

• Student Networking – Profiles, connections, and collaboration tools.
• Project Sharing – Upload, explore, and collaborate on projects.
• News & Announcements – Real-time updates from administration & student orgs.
• Academic Resources – Lessons, schedules, and room availability.

---

Testing

• Dummy Data in dummyData.js is provided for UI testing.
• For manual testing, run:

  npm test

---

Deployment

Local

npm run build
serve -s build

Production

Deploy to:

• Firebase Hosting
• Vercel
• Netlify

---

Future Improvements

• Advanced analytics dashboards.
• Mobile application support.
• AI-powered project recommendations.
• Offline access to class schedules.

---

Support

For issues or inquiries:

• Contact the development team via [josephchongola43@gmail.com].
• Raise issues on the GitHub repository.