You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- Migrated from Webpack to Vite, improving HMR times drastically
12
+
- Deployed app using Heroku instead of AWS decreasing time to deployment
13
+
-**User Features:**
14
+
-**Collaboration Room:**
15
+
- Implemented live video, audio, and text functionality using socket.IO
16
+
- Added authentication and error handling to joining existing rooms
17
+
-**UI updates to enhance user experience:**
18
+
- In addition to drag to add, users are now able to click to add
19
+
- Updated left panel to include user information and settings
20
+
- Added scroll and zoom buttons to canvas. Scroll now automatically scrolls to bottom once enough elements are added
21
+
- Updated UI design to reflect a more modern look
22
+
-**Bugs Fixed:**
23
+
- Canvas - All appropriate elements can now be nested - Nested Elements in the code preview now accurately reflect nested elements. They can also be dragged.
24
+
- Bottom Panel - Now opens by click instead of hover
25
+
- Users can now delete elements without first clicking it and then the X. This applies to the nested components as well.
26
+
-**Landing Page:**
27
+
- Revamped entire landing page for a more modern look
28
+
29
+
### Recommendations for Future Enhancements:
30
+
31
+
- Fix bottom panel to only close upon clicking the icon, and not anywhere else
32
+
- Populate settings tab in the left panel with additional functionality
33
+
- Allow users to modify code dynamically in the code preview and reflect visual componenets in real time
34
+
- Add zoom in and zoom out / scroll functionality to code preview and component tree
35
+
- Convert from 95% to 100% typescript
36
+
- Add more functionality to the nav bar
37
+
- List all active rooms to join
38
+
- Clean up unnecessary code / comments and deprecated libraries
39
+
- a tags which are nested do not display accurate code in code preview
40
+
- Eliminate all Webpack associated files/folders/dependencies/etc... now that we run on Vite
41
+
- Remove the many deprecated dependencies
42
+
- Add additional features to the live chat (Links, reactions, raise hand feature etc)
43
+
- Allow live chat to be a popup and draggable outside of the app
44
+
- Implement MUI/ShadcnUI in addition to standard html elements on left panel so that users are able to start off with pre styled elements
45
+
- Make the app mobile responsive. Right now it does not work/look good on mobile
46
+
- We had to deploy via Heroku due to time limitations and Vite. We would recommend going back to AWS with dockerized containers.
47
+
- Light/Dark mode in the left settings tab
48
+
- Update links in the footer of the landing page
49
+
50
+
## Version 19.0.0 Changes
51
+
52
+
### Changes:
53
+
54
+
-**Developer Improvement:**
11
55
- Typescript conversion continued and now sits at ~95%
12
-
- User Features:
13
-
- Collaboration Room:
14
-
- Bug Fixes:
56
+
-**User Features:**
57
+
-**Collaboration Room:**
58
+
-**Bug Fixes:**
15
59
- Debug “Leave Room” functionality removing username from the users list
16
60
- Debug “Join Room” functionality so the current canvas does not reset upon new user joining collaboration
17
61
- 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>
23
67
- 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
24
68
- Added Event Emitters for each action that updates canvas
25
69
- Created a websocket service layer to maintain a single socket instance throughout the app
26
-
- User List:
70
+
-**User List:**
27
71
- Displays the username and mouse cursor of all connected users in a particular room with a specific color scheme
28
-
- UI updated to enhance user experience
72
+
- UI updated to enhance user experience:
29
73
- Rendered MUI Icons in HTML Element Panel
30
74
- Redesigned drag-n-drop to be more intuitive and professionalize application design.
31
75
- Updated styling to overall style and theme to maintain consistency across the application
32
76
- Removed Tailwind and CSS save buttons in Customization panel for cleaner UI and drying up repetitive functionality
33
77
34
-
Recommendations for Future Enhancements:<br>
78
+
### Recommendations for Future Enhancements:
35
79
36
80
- Fix Undo & Redo functionality. Undo & Redo buttons on the customization page not functioning as expected.
37
81
- 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>
49
93
- True real-time rendering so users can see components as they're being dragged onto the canvas, rather than only when they're placed.
50
94
- 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.
51
95
- Chat Feature in Collaboration Room
52
-
- 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. "
96
+
- 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. "
**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!**
51
+
**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!**
Visit [reactype.dev](https://reactype.dev) to learn more about the product.
59
58
60
59
Follow [@ReacType](https://twitter.com/reactype) on Twitter for important announcements.
61
60
62
-
## Changes with Version 19.0.0
61
+
## Changes with Version 20.0.0
63
62
64
-
-**Collaboration Rooms**: Official launch of v1 collaboration rooms - allowing developers to work together on the same project smoothly.
65
-
The Collaboration Room also has user mouse tracking for increased ease in collaboration.
66
-
-**UI Updates**: Designed with users in mind - the interface is redesigned with a smoother, more intuitive look.
67
-
-**Typescript Conversion**: Typescript coverage is now increased to ~95%.
63
+
-**Collaboration Rooms**: Official launch of v2 collaboration rooms - Now featuring a secure live collaborative chat room with video and cursor tracking functionality!
64
+
-**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.
65
+
-**DX Updates**: Migrated from WebPack to Vite, drastically reducing HMR time. Now deployed via Heroku instead of AWS.
66
+
-**Typescript Conversion**: Typescript coverage is at 95%.
68
67
-**Cleanup**: Removed unused code, fixed bugs, and made major performance improvements.
69
68
-**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!
Given to us courtesy of our friends over at React Relay
92
-
93
-
Please refer to the [Excalidraw](https://excalidraw.com/#json=JKwzVD5qx6lsfiHW1_pQ9,XJ6uDoehVu-1bsx0SMlC6w) provided by ReacType Version 14.0 for more details.
94
91
92
+
Given to us courtesy of our friends over at React Relay
95
93
96
94
## Run ReacType using CLI
97
95
@@ -121,7 +119,7 @@ npm run test
121
119
npm run dev
122
120
```
123
121
124
-
- Note that a .env with DEV_PORT, and a NODE_ENV flag (=production or development) are needed.
122
+
- Note that DEV_PORT, NODE_ENV flag (=production or development) and VIDEOSDK token are needed in the .env file.
125
123
- 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.)
0 commit comments