Merge pull request #248 from oslabs-beta/master

Add Version 20

.github/pull_request_template.md

@@ -0,0 +1,38 @@
+# Description
+
+Please describe the issue of the pull request and the changes
+
+<!-- Please include the following information:
+- A summary of the changes and the related issue.
+- Relevant motivation and context.
+- Any dependencies that are required for this change.
+-->
+
+## Type of Change
+
+Please check the options that apply
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] This change requires a documentation update
+
+# How Has the Changes Been Tested?
+
+<!--
+Please describe the tests that you ran to verify your changes.
+Provide instructions so we can reproduce.
+Please also list any relevant details for your test configuration
+-->
+
+# Checklist:
+
+- [ ] My code follows the style guidelines of this project
+- [ ] Changes included in this pull request covers minimal topic
+- [ ] I have performed a self-review of my code
+- [ ] I have commented my code properly, particularly in hard-to-understand areas
+- [ ] I have made corresponding changes to the documentation
+- [ ] My changes generate no new warnings
+- [ ] I have added tests that prove my fix is effective or that my feature works
+- [ ] New and existing unit tests pass locally with my changes
+- [ ] Any dependent changes have been merged and published in downstream modules

CHANGE_LOG.md

@@ -1,17 +1,61 @@
 <p align="center">
-  <img width="100" src="https://i.imgur.com/Yn70tqI.png">
+  <img width="100" src="/resources/readme.png">
   <h1 align="center">ReacType Change Log</h1>
 </p>
 
-**Version 19.0.0 Changes**
-
-Changes:<br>
-
-- Developer Improvement:
+## Version 20.0.0 Changes
+
+### Changes:
+
+- **Developer Improvement:**
+  - Migrated from Webpack to Vite, improving HMR times drastically
+  - Deployed app using Heroku instead of AWS decreasing time to deployment
+- **User Features:**
+  - **Collaboration Room:**
+    - Implemented live video, audio, and text functionality using socket.IO
+    - Added authentication and error handling to joining existing rooms
+  - **UI updates to enhance user experience:**
+    - In addition to drag to add, users are now able to click to add
+    - Updated left panel to include user information and settings
+    - Added scroll and zoom buttons to canvas. Scroll now automatically scrolls to bottom once enough elements are added
+    - Updated UI design to reflect a more modern look
+- **Bugs Fixed:**
+  - Canvas - All appropriate elements can now be nested - Nested Elements in the code preview now accurately reflect nested elements. They can also be dragged.
+  - Bottom Panel - Now opens by click instead of hover
+  - Users can now delete elements without first clicking it and then the X. This applies to the nested components as well.
+- **Landing Page:**
+  - Revamped entire landing page for a more modern look
+
+### Recommendations for Future Enhancements:
+
+- Fix bottom panel to only close upon clicking the icon, and not anywhere else
+- Populate settings tab in the left panel with additional functionality
+- Allow users to modify code dynamically in the code preview and reflect visual componenets in real time
+- Add zoom in and zoom out / scroll functionality to code preview and component tree
+- Convert from 95% to 100% typescript
+- Add more functionality to the nav bar
+- List all active rooms to join
+- Clean up unnecessary code / comments and deprecated libraries
+- a tags which are nested do not display accurate code in code preview
+- Eliminate all Webpack associated files/folders/dependencies/etc... now that we run on Vite
+- Remove the many deprecated dependencies
+- Add additional features to the live chat (Links, reactions, raise hand feature etc)
+- Allow live chat to be a popup and draggable outside of the app
+- Implement MUI/ShadcnUI in addition to standard html elements on left panel so that users are able to start off with pre styled elements
+- Make the app mobile responsive. Right now it does not work/look good on mobile
+- We had to deploy via Heroku due to time limitations and Vite. We would recommend going back to AWS with dockerized containers.
+- Light/Dark mode in the left settings tab
+- Update links in the footer of the landing page
+
+## Version 19.0.0 Changes
+
+### Changes:
+
+- **Developer Improvement:**
   - Typescript conversion continued and now sits at ~95%
-- User Features:
-  - Collaboration Room:
-    - Bug Fixes:
+- **User Features:**
+  - **Collaboration Room:**
+    - **Bug Fixes:**
       - Debug “Leave Room” functionality removing username from the users list
       - Debug “Join Room” functionality so the current canvas does not reset upon new user joining collaboration
       - Debug Code Preview button that sent error if toggled more than once and does not force toggled view to other users in the room
@@ -23,15 +67,15 @@ Changes:<br>
       - Significantly reduces the amount of data being passed among users by passing only the payload for each individual action, triggering singular updates for other users in the collaboration environment
       - Added Event Emitters for each action that updates canvas
       - Created a websocket service layer to maintain a single socket instance throughout the app
-    - User List:
+    - **User List:**
       - Displays the username and mouse cursor of all connected users in a particular room with a specific color scheme
-  - UI updated to enhance user experience
+  - UI updated to enhance user experience:
     - Rendered MUI Icons in HTML Element Panel
     - Redesigned drag-n-drop to be more intuitive and professionalize application design.
     - Updated styling to overall style and theme to maintain consistency across the application
     - Removed Tailwind and CSS save buttons in Customization panel for cleaner UI and drying up repetitive functionality
 
-Recommendations for Future Enhancements:<br>
+### Recommendations for Future Enhancements:
 
 - Fix Undo & Redo functionality. Undo & Redo buttons on the customization page not functioning as expected.
 - Update Electron for desktop application use. Resolve electron app functionality to coincide with web app functionality.
@@ -49,7 +93,7 @@ Recommendations for Future Enhancements:<br>
   - True real-time rendering so users can see components as they're being dragged onto the canvas, rather than only when they're placed.
   - List of active rooms so users can simply pick one to join. Will likely be paired with a password feature for security, so only users with the proper credentials can join a particular room.
   - Chat Feature in Collaboration Room
-  - Currently, the live tracking cursor is rendered based on the users username/nickname. If multiple users create the same username/nickname, the most recent username/nickname creator will override the former. Possible      solution to this issue could be to store cursor with the socket id rather than username/nickname. "
+  - Currently, the live tracking cursor is rendered based on the users username/nickname. If multiple users create the same username/nickname, the most recent username/nickname creator will override the former. Possible solution to this issue could be to store cursor with the socket id rather than username/nickname. "
 
 **Version 18.0.0 Changes**
 

Dockerfile

@@ -1,5 +1,5 @@
 # Stage 1: Build
-FROM node:19-alpine as build
+FROM node:21.2.0-alpine as build
 
 # python: required dependency for node alpine, shrinks image size from 2.17GB to 1.67GB
 RUN apk add --no-cache --virtual .gyp \
@@ -16,7 +16,7 @@ RUN npm install --no-install-recommends --fetch-retry-maxtimeout 500000
 COPY . .
 
 # Stage 2: Runtime
-FROM node:19-alpine as runtime
+FROM node:21.2.0-alpine as runtime
 
 WORKDIR /app
 
@@ -27,10 +27,10 @@ RUN npm install --no-install-recommends --only=production --fetch-retry-maxtimeo
 # COPY --from=build /app/.env .env
 COPY --from=build /app/config.js ./config.js
 COPY --from=build /app/server ./server
-COPY --from=build /app/app/dist /app
+COPY --from=build /app/build /app
 
 EXPOSE 5656
 
 ENV IS_DOCKER true
 
-CMD [ "npm", "start" ]
+CMD [ "npm", "start" ]

Procfile

@@ -1 +1 @@
-web: node server/server.js
+web: npx tsx server/server.ts

README.md

@@ -1,4 +1,3 @@
-
 <!-- <p align="center">
   <img width="100" src="https://i.imgur.com/Yn70tqI.png">
 
@@ -22,14 +21,13 @@
 [![ContributorShield][contributors]][contributors-url]
 [![ForksShield][forks]][forks-url]
 ![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)
-![Version: 19.0.0](https://img.shields.io/badge/version-19.0.0-orange)
+![Version: 20.0.0](https://img.shields.io/badge/version-20.0.0-orange)
 
 </div>
 
  <p align="center">
-  <img width="1000" src="https://i.imgur.com/6alI8ub.png">
-</p> 
-
+  <img width="1000" src="./resources/readme.png">
+</p>
 
 ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
 ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
@@ -46,52 +44,52 @@
 ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white)
 ![AWS](https://img.shields.io/badge/AWS-%23FF9900.svg?style=for-the-badge&logo=amazon-aws&logoColor=white)
 ![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)
+![Vite](https://img.shields.io/badge/Vite-orange?logo=vite&style=for-the-badge)
 
 <h1 align="center">ReacType </h1>
 
-**ReacType** is a rapid prototyping tool that allows users _visualize_ their application architecture dynamically, employing a _drag-and-drop canvas display_ and an interactive, _real-time component code preview_ that can be exported as a **React** app for developers employing React component architecture alongside the comprehensive type-checking of **TypeScript**. In other words, **you can draw prototypes and export React / TypeScript code!**
+**ReacType** is a React prototyping tool that allows users _visualize_ their application architecture dynamically, employing an interactive drop and drag display with real-time component code preview and a collaboration room that features live video and chat functionality. Generated code can be exported as a **React** app for developers employing React component architecture alongside the comprehensive type-checking of **TypeScript**. In other words, **you can draw prototypes and export React / TypeScript code!**
 
 <p align="center">
-  <img width="1000" src="./resources/reactype19.png">
+  <img width="1000" src="./resources/v20 empty canvas.png">
 </p>
 
 Visit [reactype.dev](https://reactype.dev) to learn more about the product.
 
 Follow [@ReacType](https://twitter.com/reactype) on Twitter for important announcements.
 
-## Changes with Version 19.0.0
+## Changes with Version 20.0.0
 
-- **Collaboration Rooms**: Official launch of v1 collaboration rooms - allowing developers to work together on the same project smoothly.
-  The Collaboration Room also has user mouse tracking for increased ease in collaboration.
-- **UI Updates**: Designed with users in mind - the interface is redesigned with a smoother, more intuitive look.
-- **Typescript Conversion**: Typescript coverage is now increased to ~95%.
+- **Collaboration Rooms**: Official launch of v2 collaboration rooms - Now featuring a secure live collaborative chat room with video and cursor tracking functionality!
+- **UI Updates**: The UI now features a new logo, zoom and scroll functionality to the canvas, and numerous updates to styling to reflect a more modern and user friendly experience.
+- **DX Updates**: Migrated from WebPack to Vite, drastically reducing HMR time. Now deployed via Heroku instead of AWS.
+- **Typescript Conversion**: Typescript coverage is at 95%.
 - **Cleanup**: Removed unused code, fixed bugs, and made major performance improvements.
 - **And more:** See the [change log](https://github.com/open-source-labs/ReacType/blob/master/CHANGE_LOG.md) for more details on what was changed from the previous versions, as well as plans for upcoming features!
 
 <p align="center">
-  <img width="1000" src="./resources/v19 collab room.png">
+  <img width="1000" src="./resources/v20 collab room.png">
 </p>
 
 ## Preview
+
 Get a glimpse of how ReacType works!
 
 <p align="center">
-  <img width="1000" src="./resources/demo19.gif">
+  <img width="1000" src="./resources/canvasDemoV20.gif">
 </p>
 
 <!-- NEED TO REPLACE THE TUTORIAL LINK -->
 
-## File Structure of ReacType Version 19.0.0
+## File Structure of ReacType Version 20.0.0
 
 Here is the main file structure:
 
 <p align="center">
   <img width="1000" src="./resources/v19filestructure.png">
 </p>
-Given to us courtesy of our friends over at React Relay  
-
-Please refer to the [Excalidraw](https://excalidraw.com/#json=JKwzVD5qx6lsfiHW1_pQ9,XJ6uDoehVu-1bsx0SMlC6w) provided by ReacType Version 14.0 for more details.
 
+Given to us courtesy of our friends over at React Relay
 
 ## Run ReacType using CLI
 
@@ -121,7 +119,7 @@ npm run test
 npm run dev
 ```
 
-- Note that a .env with DEV_PORT, and a NODE_ENV flag (=production or development) are needed.
+- Note that DEV_PORT, NODE_ENV flag (=production or development) and VIDEOSDK token are needed in the .env file.
 - Please note that the development build is not connected to the production server. `npm run dev` should spin up the development server from the server folder of this repo. For additional information, the readme is [here](https://github.com/open-source-labs/ReacType/blob/master/server/README.md). Alternatively, you can select "Continue as guest" on the login page of the app, which will not use any features that rely on the server (authentication and saving project data.)
 
 - To run the development build of electron app
@@ -146,10 +144,8 @@ npm install
 npm run build
 ```
 
-
 - Start an instance
 
-
 ```bash
 npm run start
 ```
@@ -158,7 +154,7 @@ npm run start
 
 ## Stack
 
-Typescript, React.js, Redux Toolkit, Javascript, ESM, Node.js (Express), HTML, CSS, MUI, GraphQL, Next.js, Gatsby.js, Electron, NoSQL, Webpack, TDD (Jest, React Testing Library, Playwright), OAuth 2.0, Websocket, SocketIO, Continuous Integration (Github Actions), Docker, AWS (ECR, Elastic Beanstalk), Ace Editor, Google Charts, React DnD
+Typescript, React.js, Redux Toolkit, Javascript, ESM, Node.js (Express), HTML, CSS, MUI, GraphQL, Next.js, Gatsby.js, Electron, NoSQL, Webpack, TDD (Jest, React Testing Library, Playwright), OAuth 2.0, Websocket, SocketIO, Continuous Integration (Github Actions), Docker, AWS (ECR, Elastic Beanstalk), Ace Editor, Google Charts, React DnD, Vite
 
 ## Contributions