For an intro about who we are and what we aim to develop, go here.
This is frontend repo for the AI-powered I-Stem assistive technology solutions. Currently the functionalities for registered users include:
- Ability to submit request for screen-reader accessible textual content from images and pdf files powered by advance solution for math, table and column layout detection techniques.
- Ability to get captions for audio and video content both for standard AI captioning models or custom domain specific language models.
- Overview of credit transaction history as per different services used by user.
- Next.js - Minimalistic framework for server-rendered React applications.
- Typescript - Superset of JavaScript which primarily provides optional static typing, classes and interfaces.
- Redux - A predictable state container for JavaScript apps.
- Express.js- A minimal and flexible Node.js web application framework that handles server-side rendering and integrates with Next.js.
- Sass/Scss - CSS preprocessor, which adds special features such as variables, nested rules and mixins (sometimes referred to as syntactic sugar) into regular CSS.
- Babel - The compiler for next generation JavaScript.
- ESLint - The pluggable linting utility.
- Bundler Analyzer - Visualize the size of webpack output files with an interactive zoomable treemap.
- Jest - Javascript testing framework , created by developers who created React.
- React Testing Library - Simple and complete React DOM testing utilities that encourage good testing practices.
- next-runtime-dotenv - Expose environment variables to the runtime config of Next.js
- Material UI - React components for faster and easier web development. Currently, the project have some ant components, but some of the current ant library components have accessibility issues with screen reader, therefore material UI is being tried out as an alternative. Other accessible UI components are included from libraries like, reach-ui, reakt.io and chakra as per need.
- Nodemon - nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.
- Contains only frontend components for all user interactions.
- collects data on how user is interacting with website using google analytics using react-ga.
- There are no direct databases or external API calls from this repo to 3rd-party services. It calls "lip-api" repo for all database, queuing and workflow related decisions.
- Uses next.js for server-side and static rendering of web pages for faster loads.
- Caches user preferences in user local storage for faster loads and distributed processing using redux-persist library.
Package | URL |
---|---|
Node.js ^12.x | https://nodejs.org/en/download/ |
Yarn | https://classic.yarnpkg.com/en/docs/install/ |
# Install git for Linux
sudo apt install git
# Clone the repo: https://github.com/I-Stem/lip-web
git clone https://github.com/I-Stem/lip-web
cd lip-web
Note: Copy the ".env.example" file from root project folder and change its name to ".env" file and paste in the project root folder alongside ".env.example"
Using npm
npm install
Using yarn
yarn install
Using npm
npm run start:dev
Using yarn
yarn start:dev
Launch the UI on http://localhost:3000
The following repos must also be setup to use full functionality of this repo:
Please have a look here.