JU查询:用于社区学习的Web应用程序(项目)
#javascript #网络开发人员 #react #showdev

github repo:AswinBarath/ju-query
部署链接:https://ju-query.web.app/

在线QNA(问答)平台 ja那教大学的学生和学院。

  • juquery -Web应用程序是大学的学生和学院的交付
    与生产级编码标准合并。

  • 是平台大学的学生和学院,提供有关
    的完整信息 从学生的角度来看,校园生活,从大学的角度来看。

  • 它具有一个简单而有吸引力的用户界面,用于发布查询,给出
    回答查询。

  • 学生可以注册/主持任何与校园相关的活动,也可以从
    中获取反馈 通过此平台的其他学生。


表中的内容


演示

Google Oauth&Homepage

  • Google Oauth登录
  • 在平台上提出问题
  • 回答问题

注意:由于GIF文件的大小很大,我建议您访问github repo:AswinBarath/ju-query查看详细信息-Google oauth&homepage demo

注册和登录

JU-Query Registration & Login Demo

Facebook Oauth

JU-Query Facebook OAuth Demo


屏幕截图

注册页面

Registration page

主页

Home page

添加查询功能

Add Query feature

添加答案功能

Add Answer feature


技术

JavaScript

React JS

Redux JS

Firebase


这个项目的独特之处

使用功能组件的功能编程

Functional programming using functional components

  • 功能编程是为软件逻辑创建纯函数的概念
    并且仅取决于传递给函数的参数。

  • 功能编程更多地基于表达式和声明
    而不是语句。

  • ju query comports使用功能组件
    我们通过功能参数将数据作为共享状态传递给数据。

使用redux.js库的状态管理

State management using Redux.js library 1

  • redux是一个可预测的状态容器,将应用程序的状态存储在商店中,
    每个组件都可以访问该商店所需的任何状态。

  • 国家管理实质上是促进数据沟通和共享数据的一种方式
    跨组件。

State management using Redux.js library 2

  • 它创建了一个有形的数据结构来表示我们可以从
    中读取的Web应用程序的状态 并写入。

  • ju query管理平台事件的状态触发,例如用户登录/注销,显示/隐藏弹出,
    用户输入以提供用户友好的体验。

使用Reactdom在React.js中的特定重新渲染

Specific re-rendering using ReactDOM in React.js

  • 在React中,每个UI部分都是一个组件,每个组件都有一个状态。

  • React遵循可观察的模式并倾听状态变化。

  • 当组件的状态更改时,React更新虚拟DOM树。

  • reactdom.render()控制您传递的容器节点的内容。任何现有的
    首次调用时,内部元素将被替换。后来的呼叫使用React的Dom Dimfing
    有效更新的算法。

  • ju query利用此react.js功能仅重新渲染网站的那些部分

    这需要刷新,从我们的
    中节省了大量数据使用。
    平台。

使用Firebase保护API身份验证

Secure API authentication using Firebase

  • firebase身份验证是一种基于代币的可扩展的auth系统,并提供开箱即用
    与Google,Facebook和Twitter等最常见的提供商的集成,
    等等。

  • ju Query对Firebase身份验证API的安全功能具有杠杆作用,以保持我们的用户
    确保对我们平台用户体验的信任。

实时使用Firebase Firestore数据库获取数据

Real time fetching data using Firebase Firestore database

  • Firestore具有更丰富,更快的查询和缩放,这非常有帮助。

  • 从后端的数据实时获取数据,并在前端渲染数据,并以非常低的
    使用户体验非常有效的延迟。

  • ju query使用这些技术和技术,并测试
    的每个组件 代码库本地和使用内建造的反应测试图中的生产。

  • 在ju query中,反应组件遵循关联原理的分离
    共同使用依赖注入和重新渲染组件以进行编码实施
    有效地易于扩展和维护,以使其可扩展和灵活。

  • 此组件结构为用户提供更新版本的准时交付和
    升级。


系统设计

建筑学

Architecture

用例图

Use case diagram

用户端的JU查询活动图

JU Query Activity Diagram for User Side

ju查询活动图

JU Query Activity Diagram for Admin Side

班级图

Class Diagram

用户端的JU查询序列图

JU Query Sequence Diagram for User Side

JU查询序列图

JU Query Sequence Diagram for Admin Side

是图表

ER Diagram


贡献者


IEEE出版物


我是谁?

我是一个软件工程书呆子Aswin Barath,他喜欢构建Web应用程序,现在在我自由职业生活生活的繁忙时期内通过博客分享我的知识。这是我所有由一个地点下平台分类的我所有社交的链接:https://linktr.ee/AswinBarath

非常感谢您阅读我的博客。