Add README and initial project structure for WebSocket chat application

* Created README.md for project overview and setup instructions.
* Updated App component to use selector for todo items.
* Enhanced TodoItemComponent styling and structure.
* Introduced new Redux selectors for better state management.
* Added initial configuration files for RequireJS and Bun.
* Established project structure for WebSocket chat application with server and frontend components.
* Included necessary dependencies and configurations for TypeScript and Vite.

React/DoItJust/src/App.tsx

@@ -1,8 +1,10 @@
-import {useAppSelector} from './store';
-import {TodoItem} from './entities/TodoItem';
+import {selectTodoItems} from "./store/slices";
 import {TodoItemComponent} from './components/TodoItem/TodoItem';
+import { useAppSelector } from "./store";
+
 export default function App() {
-  const items = useAppSelector(state => state.todo.items);
+  const items = useAppSelector(selectTodoItems);
+  
 
   return (
     <div style={{width: '100vw', height: '100vh'}}>

React/DoItJust/src/components/TodoItem/TodoItem.tsx

@@ -6,7 +6,14 @@ export interface ITodoItemProps {
 }
 
 export const TodoItemComponent = ({todo: {id, title, notes, createdAt, updatedAt, dueAt, isArchived, isDone}}: ITodoItemProps): JSX.Element => {
-  return <div key={id} style={{border: '2px solid black', display: 'flex', width: '800px', height: '400px', flexDirection: 'column', margin: 'auto'}}>
+  return <div key={id} style={{
+    border: '2px solid black', 
+    display: 'flex', 
+    width: '800px', 
+    height: '250px', 
+    flexDirection: 'column', 
+    margin: 'auto'
+  }}>
     <header >{title}</header>
     <div>
       <textarea defaultValue={notes ?? ''}></textarea>

React/DoItJust/src/store/slices/TodoSlice.ts

@@ -1,5 +1,5 @@
 import type {Nullable} from '../../types/definedTypes';
-import {createSlice} from '@reduxjs/toolkit';
+import {createSelector, createSlice} from '@reduxjs/toolkit';
 import {TodoItem} from '../../entities/TodoItem';
 
 interface ITodoSliceState {
@@ -20,6 +20,7 @@ const initialTodoState: ITodoSliceState = {
   error: null
 };
 
+
 export const TodoSlice = createSlice({
   name: 'todo',
   initialState: initialTodoState,
@@ -61,5 +62,8 @@ export const TodoSlice = createSlice({
   //}
 });
 
+
+const selectTodos = (state: {todo: ITodoSliceState}) => state.todo;
+export const selectTodoItems = createSelector([selectTodos], todo => todo.items);
 export const {appendTodoItem} = TodoSlice.actions;
 export const todoSliceStateReducer = TodoSlice.reducer;