dartmouth-cs98 / convocode-frontend

project-22f-convocode created by GitHub Classroom

ConvoCode

About the Site

ConvoCode is a community hub to ignite curiosity and conversation around AI coding possibilities. Whether you're a software developer, a researcher, an entrepreneur, or simply interested in the future of technology, we invite you to join the #ConvoCode community in exploring this fascinating topic. View our mockups below and read more about ConvoCode in our medium article.

Setup

You must have Node and yarn installed to run this project.

1. Clone the repository
2. yarn install
3. yarn start to run in the local development environment

Architecture

This web site uses React.js. We use react-redux for persistent state management, and react-router for internal routing.

Stack

• React.js frontend
• Node.js backend

Packages

• create-react-app -> used to generate scaffolding for React.js frontend
• redux -> JavaScript library for managing and centralizing application state
• axios -> Promise based HTTP client for the browser and node.js
• @monaco-editor/react -> Monaco package for code editor component
• formik-> a small group of React components and hooks for building forms in React
• yup-> Object schema validation
• react-iframe-> Simple React component for including an iframed page

APIs

• Judge0 CE -> compiler API for running code in the IDE
  • Documentation: https://ce.judge0.com/
• OpenAI Codex -> text to code AI generation model
  • Documentation: https://openai.com/blog/openai-codex

Repository Structure

src/
   components/		    	[reusable components across several screens]
   resources/             	[image files]
   services/			[service files for sending server requests]
   state/			[all redux interactions]
   utils/			[utility functions]
   App.js                     	[main routing file]
   index.js                   	[initialize the redux store and app]
package.json			[package]

Data Flow

Our data flow uses a combination of service files and redux actions. Each request to one of our servers is encapsulated in a function that is stored in a file in the services/ directory. We use axios for sending all server requests. Most service functions are then imported into action files in the state/actions/ directory. Within an action, we call the service function to fetch data or perform an action, then dispatch actions with the resulting data. The reducers in the state/reducers/ directory then are invoked when the actions are dispatched, and they update the relevant state.

Code Style

We use React functional components and hooks in all of our components. We leverage the useState, useEffect, and useRef hooks throughout each of our components. We use async/await for all asynchronous functions.

Deployment

• The application is deployed frontend and backend on render. To view our deployed site, visit ConvoCode. Merging a PR to the main branch will trigger an update on the deployed site.

Authors

• Dylan Bienstock
• Lily Maechling
• William Perez
• Abby Owen
• Annie Revers
• Melissa Valencia

Acknowledgments

CS 98 Tim Tregubov and Natalie Svoboda