DEV Community

Cover image for JU Query: Web App for community based learning (Project)
Aswin Barath
Aswin Barath

Posted on

JU Query: Web App for community based learning (Project)

GitHub Repo: AswinBarath/ju-query
Deployed Link: 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

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 to view the detailed - Google OAuth & Homepage Demo

Registration & Login

JU-Query Registration & Login Demo

Facebook OAuth

JU-Query Facebook OAuth Demo


Screenshots

Registration page

Registration page

Home page

Home page

Add Query feature

Add Query feature

Add Answer feature

Add Answer feature


Technologies

JavaScript

React JS

Redux JS

Firebase


What's unique in this Project

Functional programming using functional components

Functional programming using functional components

  • 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

State management using Redux.js library 1

  • 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.

State management using Redux.js library 2

  • 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

Specific re-rendering using ReactDOM in React.js

  • 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

Secure API authentication using Firebase

  • 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

Real time fetching data using Firebase Firestore database

  • 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

Architecture

Use case diagram

Use case diagram

JU Query Activity Diagram for User Side

JU Query Activity Diagram for User Side

JU Query Activity Diagram for Admin Side

JU Query Activity Diagram for Admin Side

Class Diagram

Class Diagram

JU Query Sequence Diagram for User Side

JU Query Sequence Diagram for User Side

JU Query Sequence Diagram for Admin Side

JU Query Sequence Diagram for Admin Side

ER Diagram

ER Diagram


Contributors


IEEE publication


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🙂.

Top comments (0)