search

Abhishek-Mallick / universal-box

Project scaffolding just got easier — streamline your development with Universal-Box's pre-built templates and one-click deployment! 🚀
https://universal-box.dev
Apache License 2.0
28 stars 26 forks source link

added react(Frontend) + express(Backend) template #110

Closed Ramya-Clg closed 1 month ago

Ramya-Clg commented 1 month ago

Description

Please provide a summary of the changes made in this pull request. Include any relevant motivation and context for the changes.

Fixes # (issue)

Type of Change

Please delete options that are not relevant.

How Has This Been Tested?

cd frontend -> npm run dev to test the frontend react code cd backend -> tsc -b -> node dist/index.js to test the backend code

Checklist

Summary by CodeRabbit

Release Notes

vercel[bot] commented 1 month ago

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

Name Status Preview Comments Updated (UTC)
universal-box ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 2, 2024 4:06pm
coderabbitai[bot] commented 1 month ago

Walkthrough

The changes in this pull request establish a foundational structure for a Full Stack application using React for the frontend and Express for the backend. Key additions include new configuration files, a basic Express server, and initial React components. The .gitignore files for both frontend and backend are updated to exclude unnecessary files from version control. Additionally, the README.md is enhanced with setup instructions for integrating React with Vite, while ESLint configurations are introduced to maintain code quality.

Changes

File Path Change Summary
template/FullStack/React(Frontend)+Express(Backend)/Backend/.gitignore Added entries to ignore dist, node_modules, and .env files.
template/FullStack/React(Frontend)+Express(Backend)/Backend/package.json Created a new package.json for the backend with project metadata and dependencies.
template/FullStack/React(Frontend)+Express(Backend)/Backend/src/index.ts Introduced an Express server that responds with "Hello World!" on the root URL and listens on port 3000.
template/FullStack/React(Frontend)+Express(Backend)/Backend/tsconfig.json Created a new TypeScript configuration file with compiler options.
template/FullStack/React(Frontend)+Express(Backend)/Frontend/.gitignore Added a .gitignore file for the frontend to exclude logs, node_modules, and build artifacts.
template/FullStack/React(Frontend)+Express(Backend)/Frontend/README.md Enhanced README with setup instructions for React with Vite and ESLint configuration.
template/FullStack/React(Frontend)+Express(Backend)/Frontend/eslint.config.js Introduced ESLint configuration for TypeScript and React.
template/FullStack/React(Frontend)+Express(Backend)/Frontend/index.html Added a new HTML entry point for the React application.
template/FullStack/React(Frontend)+Express(Backend)/Frontend/package.json Created a new package.json for the frontend with scripts and dependencies for React and Vite.
template/FullStack/React(Frontend)+Express(Backend)/Frontend/src/App.tsx Added a new React functional component App that displays a welcome message.
template/FullStack/React(Frontend)+Express(Backend)/Frontend/src/main.tsx Introduced main.tsx as the entry point for rendering the React application.
template/FullStack/React(Frontend)+Express(Backend)/Frontend/src/vite-env.d.ts Added reference directive for Vite client types in TypeScript.
template/FullStack/React(Frontend)+Express(Backend)/Frontend/tsconfig.app.json Created a TypeScript configuration file for the React application with specific compiler options.
template/FullStack/React(Frontend)+Express(Backend)/Frontend/tsconfig.json Introduced a TypeScript configuration file referencing other config files.
template/FullStack/React(Frontend)+Express(Backend)/Frontend/tsconfig.node.json Created a TypeScript configuration file for Node.js with optimized settings.
template/FullStack/React(Frontend)+Express(Backend)/Frontend/vite.config.ts Added Vite configuration file to integrate React with Vite.
template/FullStack/React(Frontend)+Express(Backend)/index.ts Deleted an unused index.ts file containing only a greeting message.

Possibly related issues

🐰 In the garden, a new path we lay,
With React and Express, we brighten the day.
A server that greets, a frontend so bright,
With Vite and TypeScript, all feels just right!
So hop along, friends, let’s code and create,
A full stack adventure, oh, isn’t it great? 🌟

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 , please review it.` - `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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@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 using 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. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### 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](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
Abhishek-Mallick commented 1 month ago

Hey @Ramya-Clg I reviewed your code and there's a need of a few changes

  1. The client and server part of the project is not at all configured .. the whole point of project scaffolding through Universal-Box is to provide well-configured codebase in a single command
  2. Firstly rename "Frontend" and "Backend" to client and server
    • Configure the project as a FullStack project
      • Write proper routes in server folder which will facilitate sign-up and sign-in and create necessary buttons and pages in the client calling those routes and reflecting proper flash messages
      • Import some data from the server side using a get route and a post route and maybe log some data in the client side by showing a template(data to be fetched from server)
      • Add some interaction with the server and client -- be creative
    • Configure the UI properly there's no styling to it .. no additional pages or routes
  3. You need to create two markdowns to your project name
    • one named as README.md and place it here template/FullStack/React(Frontend)+Express(Backend)/ refer this to create it
    • Another named as React(Frontend)+Express(Backend).md and place it here website/content/Templates/FullStack/React(Frontend)+Express(Backend).md refer this to create it -- add relevant screenshots to your project

You can join our Discord server to get some help from other contributors if needed

Ramya-Clg commented 1 month ago

I will not be able to add the fullstack features, if someone else wants this issue feel free to assign it to them