JU Query: Web App for community based learning (Project)
Tags: showdev, webdev, javascript, react
Published: 2023-09-02 08:49:59

GitHub Repo: [AswinBarath/ju-query](https://github.com/AswinBarath/ju-query)
Deployed Link: [https://ju-query.web.app/](https://ju-query.web.app/)

An **Online QnA (Question and Answer) platform** for students and faculties of Jain University.

- “JUQuery” web application is a deliverable for students and faculties of the university
  incorporated with production-grade coding standards.

- It is platform university students and faculties to provide complete information about 
  campus life from a student point of view, and academic information from university point of view. 

- It features a simple and attractive user interface for posting a query, giving an
  answer to a query.

- Students can register/ host any campus related events and also can take the feedback from
  other students through this platform.

---

## Table of content

- [Demo](#Demo)
- [Screenshots](#Screenshots)
- [Technologies](#Technologies)
- [What's unique in this Project](#whats-unique-in-this-project)
- [System Design](#system-design)
- [Contributors](#Contributors)
- [Developer instructions](#developer-instructions)
- [IEEE publication](#ieee-publication)

---

## Demo

### Google OAuth & Homepage
  - Google OAuth Login
  - Asking Question on the platform
  - Answer the question

**Note:** Due to the size of the gif file being huge, I recommend you visit the GitHub Repo: [AswinBarath/ju-query](https://github.com/AswinBarath/ju-query) to view the detailed - Google OAuth & Homepage Demo

### Registration & Login

![JU-Query Registration & Login Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7e2327x67wt67o1xzjp8.gif)

### Facebook OAuth

![JU-Query Facebook OAuth Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5j51tm8im3wkl277zgq.gif)

---

## Screenshots

### Registration page

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/screenshots/JU%20Query%20Registration%20Page.png" alt="Registration page" width=800px />
</p>

### Home page

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/screenshots/JU%20Query%20Feed.png" alt="Home page" width=800px />
</p>

### Add Query feature

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/screenshots/JU%20Query%20Add%20Query.png" alt="Add Query feature" width=800px />
</p>

### Add Answer feature

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/screenshots/JU%20Query%20Add%20Answer.png" alt="Add Answer feature" width=800px />
</p>

---

## Technologies

![JavaScript](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E)

![React JS](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)

![Redux JS](https://img.shields.io/badge/Redux-593D88?style=for-the-badge&logo=redux&logoColor=white)

![Firebase](https://img.shields.io/badge/firebase-ffca28?style=for-the-badge&logo=firebase&logoColor=black)

---

## What's unique in this Project

### Functional programming using functional components

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/Functional%20programming%20using%20functional%20components.png" alt="Functional programming using functional components" />
</p>


- Functional programming is a concept of creating pure functions for software logic 
  and depends only on the arguments passed to the function.

- Functional programming is based more on expressions and declarations
  rather than the statements.

- JU Query incorporats functional programming using functional components
  where we pass data as shared state through functional arguments.

### State management using Redux.js library

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/Redux.jpg" alt="State management using Redux.js library 1" width=800px />
</p>

- Redux is a predictable state container that stores the state of the application in a store, 
  and each component can access any state that it needs from this store.

- State management is essentially a way to facilitate communication and sharing of data
  across components.

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/Redux%20state%20tree.png" alt="State management using Redux.js library 2" width=800px />
</p>

- It creates a tangible data structure to represent the state of the web app that we can read from
  and write to.

- JU Query manages the state of the platform event triggers such as user login/logout, show/hide popup,
  user inputs to provide a user friendly experience.

### Specific re-rendering using ReactDOM in React.js

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/State%20-%20action%20-%20UI%20using%20React%20Redux.jpg" alt="Specific re-rendering using ReactDOM in React.js" width=800px />
</p>

- In React every UI part is a component, and each component has a state.

- React follows the observable pattern and listens for state changes.

- When the state of a component changes, React updates the virtual DOM tree.

- ReactDOM.render() controls the contents of the container node you pass in. Any existing
DOM elements inside are replaced when first called. Later calls use React’s DOM diffing
algorithm for efficient updates.

- JU Query takes advantage of this React.js feature to re-render only those parts of the website
which require a refresh, saving a lot of data usage from the user experience with our
platform.

### Secure API authentication using Firebase

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/Firebase.png" alt="Secure API authentication using Firebase" width=800px />
</p>

- Firebase Authentication is an extensible token-based auth system and provides out-of-the box
integrations with the most common providers such as Google, Facebook, and Twitter,
among others.

- JU Query takes leverage over this secure features of Firebase Authentication API to keep our users
secure and gain their trust over our platform's user experience.


### Real time fetching data using Firebase Firestore database

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/Firebase%20firestore.png" alt="Real time fetching data using Firebase Firestore database" width=800px />
</p>

- Firestore features richer, faster queries and scales further which is very helpful.

- Real time fetching of data from backend and rendering data on front-end with a very low
  latency which makes the user experience very effective.

- JU Query uses these technologies and techniques along with testing each component of the 
  codebase locally and in production using in-built react-testing-library.

- In JU Query, React components follows the separation of concern principle which is connected 
  together using Dependency injection and component re-rendering to make coding implementation 
  effective along with ease to extend and maintain in the future making it scalable and flexible.

- This component structure provides the user with on-time delivery of update releases and
  upgrades.

---

## System Design

### Architecture

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/system-design/JU%20Query%20Architecture%20Diagram.jpeg" alt="Architecture" width=800px />
</p>

### Use case diagram

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/system-design/JU%20Query%20Use%20Case%20Diagram.png" alt="Use case diagram" width=800px />
</p>

### JU Query Activity Diagram for User Side

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/system-design/JU%20Query%20Activity%20Diagram%20for%20User%20Side.png" alt="JU Query Activity Diagram for User Side" width=800px />
</p>

### JU Query Activity Diagram for Admin Side

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/system-design/JU%20Query%20Activity%20Diagram%20for%20Admin%20Side.png" alt="JU Query Activity Diagram for Admin Side" width=800px  />
</p>

### Class Diagram

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/system-design/JU%20Query%20Class%20Diagram.png" alt="Class Diagram" width=800px />
</p>


### JU Query Sequence Diagram for User Side

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/system-design/JU%20Query%20Sequence%20Diagram%20for%20User%20Side.jpg" alt="JU Query Sequence Diagram for User Side" width=800px />
</p>


### JU Query Sequence Diagram for Admin Side

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/system-design/JU%20Query%20Sequence%20Diagram%20for%20Admin%20Side.jpg" alt="JU Query Sequence Diagram for Admin Side" width=800px />
</p>


### ER Diagram

<p>
<img src="https://raw.githubusercontent.com/AswinBarath/ju-query/main/assets/system-design/JU%20Query%20ER%20Diagram.png" alt="ER Diagram"  width=800px />
</p>


---

## Contributors

- T Aswin Barath <https://github.com/AswinBarath>
- Souvik kar <https://github.com/souvik-21>
- Sri Sarvesh <https://github.com/SriSarveshA1>
- Vyshnav Raj <https://github.com/vyshnav99>
- G Kishore <https://github.com/gkrockz>

---

## IEEE publication

- This project has also been published as an IEEE paper titled **JU QUERY - Web App for community based learning**
- IEEE paper publication: [https://ieeexplore.ieee.org/document/9917861](https://ieeexplore.ieee.org/document/9917861)
- We have also hosted the project over here: [https://ju-query.web.app/](https://ju-query.web.app/)

---

## Who Am I?

I’m Aswin Barath, a Software Engineering Nerd who loves building Web Applications, now sharing my knowledge through Blogging during the busy time of my freelancing work life. Here’s the link to all of my socials categorized by platforms under one place: https://linktr.ee/AswinBarath

Thank you so much for reading my blog🙂.