AryaBota: An app to teach Python coding via gradual programming and visual output

Related tags

Miscellaneous aryabota-ui
Overview

AryaBota UI

Development

Note: Before you begin, make sure you have the back-end Flask app up and running. Visit aryabota-services to learn more about this.

Requirements

  • Node v14

Run the App

  1. npm install to install the required dependencies from package.json
  2. npm start to run the app locally in development mode

Visit localhost:3000 to use the app!

How To

Visit the documentation here.

Vercel

Deploy your own React project, along with Serverless Functions, with Vercel.

Deploy with Vercel

Live Example: https://create-react-app.now-examples.now.sh/

Comments
  • Fix responsive issue in small screens

    Fix responsive issue in small screens

    I fix this issue #31 as following :

    • add scroll bar in divs when run button and another content not show on the screen so you can scroll and click the button.
    • make a grid and code editor small a little bit in small screens.
    opened by MostafaKMilly 5
  • Responsive Design for Grid Page [in-progress]

    Responsive Design for Grid Page [in-progress]

    The grid page looks like the below screenshot on larger screens. The left sidebar is not aligned with the AryaBota logo (it's wider) and ends with a little space on the bottom. Screenshot 2021-10-04 at 12 51 44 PM

    Add CSS such that it responsively resizes the sidebar and logo. What we want it to look like: image

    good first issue hacktoberfest 
    opened by ab-apps 4
  • Fix extra height in large screen

    Fix extra height in large screen

    according to height issue #34 I did the following:

    • add height: auto to separator class
    • in the large screen height Seperator height became 100vh and if did not do this the side bar and Seperator height won't change
    opened by MostafaKMilly 1
  • issue while signing in

    issue while signing in

    there is an issue when I sign in (maybe that because I have slow internet connection) can I add catch method and display popup with error message instead?

    note: this error solved when I use VPN and I think the sign service need VPN in my country

    Error

    opened by MostafaKMilly 2
  • Footer CSS not Responsive

    Footer CSS not Responsive

    On smaller screens, it looks like this: image "Run" button is not visible and users have to zoom out to be able to hit it. Footer CSS needs to be responsive so as to prevent this.

    good first issue hacktoberfest 
    opened by varshav0119 2
  • CSS styles on Safari

    CSS styles on Safari

    Since Safari doesn't support some CSS properties, some parts of the UI look different on Chrome and Safari Task: Make styles consistent across browsers

    good first issue hacktoberfest 
    opened by prernarao 3

  • "Log Out" button is a Disco Ball! [in-progress]

    The "Log Out" button strangely changes colours with every action (when code is being typed into the editor etc.), and it is quite disorienting. Task: To figure out why this happens and fix the issue.

    good first issue hacktoberfest 
    opened by ab-apps 3
  • Ace Editor doesn't like Whitespaces

    Ace Editor doesn't like Whitespaces

    The Ace Editor for code (leftmost panel) behaves weirdly with whitespaces sometimes, making it very hard to track where the cursor is. Task: To reliably reproduce the issue and fix it.

    good first issue hacktoberfest 
    opened by ab-apps 0
Owner
null
GitHub https://aryabota.vercel.app
A discord bot that monitors the LavaLink nodes given, and updates it via an embed on discord.

LavaLink-Node-Monitor-for-Discord This Bot will help you monitor multiple LavaLink nodes directly on discord [Updates Every 30 Seconds] Setting Up The

Ranjithh K 4 Apr 2, 2022
✍️ Generative creative writing via OpenAI

The stars have always been a source of wonder and mystery. They have inspired poets and philosophers throughout the ages. Arthur Conan Doyle was no ex

Nate Goldman 0 Dec 24, 2022
FriendAdvisor is a mobile app with a focus on allowing friends and family to coordinate and receive text notifications about upcoming group events.

FriendAdvisor is a mobile app with a focus on allowing friends and family to coordinate and receive text notifications about upcoming group events.

Brad Johnson 4 Sep 29, 2022
A Pauli Test simulation app made with Web Component and RxJS

There was a discussion quite a while ago in Teknologi Umum about brain throughput or something. Basically it was about how long does your brain can maintain its performance. It was brought up because there was a discussion about typing speed and how someone can get high Words per Minute at the start but starts to slow down the longer they go.

elianiva 5 Jun 8, 2022
Web app for adding EU Digital COVID Certificates to your wallet apps

Web app for adding EU Digital COVID Certificates to your wallet apps

CovidPass 1.2k Dec 31, 2022
This is a Todo app build with JS, HTML/CSS , Webpack

todo-list Todo List app Additional description about the project and its features. Built With HTML5 CSS3 Webpack JavaScript Live Demo Live Demo Link G

houssam hichami 6 May 22, 2022
NatsirtMC is a lightweight app allowing you to connect to any Minecraft server without having Minecraft open

NatsirtMC the only way to grind without grinding NatsirtMC is a lightweight app allowing you to connect to any Minecraft server without having Minecra

tristan 3 Dec 26, 2022
Math Magician is a single Page App that allows users to perform simple math calculations

Math Magician is a single Page App that allows users to perform simple math calculations

levy_ukwishaka 11 Apr 9, 2022
The perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML.

List.js Perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on

Jonny Strömberg 10.9k Jan 1, 2023
Drag and drop library for two-dimensional, resizable and responsive lists

GridList Drag and drop library for a two-dimensional resizable and responsive list of items Demo: http://hootsuite.github.io/grid/ The GridList librar

Hootsuite 3.6k Dec 14, 2022
📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

JavaScript Algorithms and Data Structures This repository contains JavaScript based examples of many popular algorithms and data structures. Each algo

Oleksii Trekhleb 158k Dec 31, 2022
Gmail-like client-side drafts and bit more. Plugin developed to save html forms data to LocalStorage to restore them after browser crashes, tabs closings and other disasters.

Sisyphus Plugin developed to save html forms data to LocalStorage to restore them after browser crashes, tabs closings and other disasters. Descriptio

Alexander Kaupanin 2k Dec 8, 2022
A lightweight jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Close" links.

Readmore.js V3 alpha I am deprecating the 2.x version of Readmore.js. A new version is coming soon! Check it out and help me test it! Readmore.js A sm

Jed Foster 1.5k Nov 30, 2022
Defines the communication layer between mobile native(iOS/Android) and webview using JSON Schema and automatically generates SDK code

Defines the communication layer between mobile native(iOS/Android) and webview using JSON Schema and automatically generates SDK code.

당근마켓 31 Dec 8, 2022
A responsive image polyfill for , srcset, sizes, and more

Picturefill A responsive image polyfill. Authors: See Authors.txt License: MIT Picturefill has three versions: Version 1 mimics the Picture element pa

Scott Jehl 10k Dec 31, 2022
A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more

MixItUp 3 MixItUp is a high-performance, dependency-free library for animated DOM manipulation, giving you the power to filter, sort, add and remove D

Patrick Kunka 4.5k Dec 24, 2022
JavaScript Survey and Form Library

SurveyJS is a JavaScript Survey and Form Library. SurveyJS is a modern way to add surveys and forms to your website. It has versions for Angular, jQue

SurveyJS 3.5k Jan 1, 2023
Extensive math expression evaluator library for JavaScript and Node.js

?? Homepage Fcaljs is an extensive math expression evaluator library for JavaScript and Node.js. Using fcal, you can perform basic arithmetic, percent

Santhosh Kumar 93 Dec 19, 2022
Components for interactive scientific writing, reactive documents and explorable explanations.

@curvenote/article The goal of @curvenote/article is to provide web-components for interactive scientific writing, reactive documents and explorable e

curvenote 142 Dec 24, 2022