FrancescoXX / rustcrab

An Open Source project with everything you need to learn about Rust.
https://rustcrab.com
MIT License
402 stars 69 forks source link

Added Rust Playground #121

Open anshumalivfx opened 1 month ago

anshumalivfx commented 1 month ago

Requirements:-

Add NEXT_PUBLIC_JDOODLE_CLIENT_ID and NEXT_PUBLIC_JDOODLE_CLIENT_SECRET to environment variables

Solves Issue #116

Thank you

Summary by CodeRabbit

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
rustcrab ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 16, 2024 5:10pm
coderabbitai[bot] commented 1 month ago

Walkthrough

This update introduces a new feature allowing Rust code execution within a React component, adds several dependencies, and includes some minor stylistic adjustments. Key changes include a new file to compare dependencies, the integration of a Rust code editor and execution component, and updates to .gitignore and various component import statements.

Changes

File(s) Change Summary
.gitignore Added .env to the ignored files list.
checkIfpackageandpnpmmatch.js New script to compare package.json and pnpm-lock.yaml dependencies for version mismatches.
next.config.mjs Added an empty eslint object in the nextConfig constant.
package.json Added dependencies (@monaco-editor/react, axios, js-yaml) and updated existing ones (monaco-editor, js-cookie).
src/app/api/execute-code/route.ts Introduced a POST request handler for executing code via an external API.
src/app/globals.css Added a newline at the end of the file.
src/app/page.tsx Updated import statements and string literals for consistency.
src/components/.../RustCompilerSection.tsx New component for a Rust code execution playground, integrating a code editor and output window.
src/components/.../CodeEditor.tsx, OutputWindow.tsx Introduced new components for code editing and output display functionalities.
src/components/.../Terminal.css Added styling for the terminal output component.
src/app/playground/page.tsx Created a new page layout component integrating the Rust code execution section.
src/components/navbar/... Updated import statements and added a "Playground" menu item with corresponding link.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant RustCompilerSection
    participant CodeEditor
    participant OutputWindow
    participant ApiServer as External API Server

    User->>CodeEditor: Enter Rust code
    User->>RustCompilerSection: Click Run
    RustCompilerSection->>ApiServer: Send code for execution
    ApiServer-->>RustCompilerSection: Return execution results
    RustCompilerSection->>OutputWindow: Display results
    OutputWindow-->>User: Show output and status

Poem

In lines of code, a new dawn breaks,
Rust playground now awakes,
Editors hum and outputs gleam,
APIs dance in a coder's dream.
With Monaco's light, the code takes flight,
A rabbit's joy, coding delight!


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
anshumalivfx commented 1 month ago

hey @FrancescoXX I've solved the the vercel Conflicts

FrancescoXX commented 1 month ago

The compilation fails image

I propose to hide it from the navbar for now, so we can work on it but it's not shown

Once we will b happy with that, we can show it up

anshumalivfx commented 1 month ago

Hey @FrancescoXX Thanks for letting me know

It might be happening because of missing env variable values please make sure that it have environment variables working

Get API Key from here:- https://www.jdoodle.com/integrate-online-ide-compiler-api-plugins

Environment Variables:-

anshumalivfx commented 1 month ago

Checkout this Section on Vercel

Screenshot 2024-07-16 at 15 13 12
anshumalivfx commented 1 month ago

@FrancescoXX Soo Should I just give playground a link ?

anshumalivfx commented 1 month ago

Hey @FrancescoXX now you can access Playground in /playground and I removed it from Navbar

anshumalivfx commented 1 month ago

@FrancescoXX Hey, should we start building our own server for compiler or go for jdoodle

FrancescoXX commented 1 week ago

hey @anshumalivfx , what we need to build is something that allows people to try some quizzes, similat to katacoda or fcc, that's what I meant - is creating the playground a step of this? or is it just a place to test code?

anshumalivfx commented 1 week ago

Hey @FrancescoXX What I've built is a place to test code where first time learners don't have to go through setting up rust compilers into their computers an can start running code right away from this web app. And Yeah sure we can start working on quizzes aswell ?

or We could make something like LEETCode platform where users will be given some problems and they need to write code to solve them Let me know if you like this Idea