diff --git a/projects/eventonica-react/README.md b/project-example/week-9/eventonica/README.md
similarity index 100%
rename from projects/eventonica-react/README.md
rename to project-example/week-9/eventonica/README.md
diff --git a/projects/eventonica-react/eventonica-express-backend.md b/project-example/week-9/eventonica/eventonica-express-backend.md
similarity index 52%
rename from projects/eventonica-react/eventonica-express-backend.md
rename to project-example/week-9/eventonica/eventonica-express-backend.md
index 172e985ef..791f23b96 100644
--- a/projects/eventonica-react/eventonica-express-backend.md
+++ b/project-example/week-9/eventonica/eventonica-express-backend.md
@@ -6,7 +6,7 @@ Up until now in your Eventonica project, all the data is deleted every time you
 
 #### Example API Endpoint
 
-For example, in your code before, to get all the events, you might've had a function like `app.getAllEvents()`. Instead, we will create an API endpoint like `http://127.0.0.1:3000/events` that returns all the current events as a JSON response.
+For example, in your code before, to get all the events, you might've had a function like `app.getAllEvents()`. Instead, we will create an API endpoint like `http://127.0.0.1:4000/events` that returns all the current events as a JSON response.
 
 #### Why is this better?
 
@@ -24,147 +24,184 @@ The following directions are an adaptation of [this freeCodeCamp tutorial](https
 
 #### Create a new Express App
 
-1. In your terminal, navigate to your `eventonica-react` project.  Start it with `npm start`.
+1. In your terminal, navigate to your `eventonica-react` project i.e `client` directory . Start it with `npm start`.
 
-1. You will need to create a second app for your Express backend.  In a second terminal window, navigate to your general Techtonica project folder.  Follow these commands to create a new project called `eventonica-api` and start it.  If it asks you if you want to download `express-generator`, choose `yes`.
-    ```
-    npx express-generator eventonica-api
-    cd eventonica-api
-    npm install
-    npm start
-    ```
+1. You will need to create a second app for your Express backend. In a second terminal window, navigate to your general `Eventonica` project folder. Follow these commands to create a new project called `server` and start it. If it asks you if you want to download `express-generator`, choose `yes`.
 
-1. Did you get a message that says?:
-    ```
-    ? Something is already running on port 3000. Probably:
-      node ./bin/www (pid 13314)
-      in /Users/al/projects/eventonica-api
+   ```
+   npx express-generator server
+   cd server
+   npm install
+   ```
 
-    Would you like to run the app on another port instead? › (Y/n)
-    ```
-      Each app needs its own port if we want to run them on the same machine!  
+> If you see warning on your terminal like  
+>  `npm WARN deprecated transformers@2.1.0: Deprecated, use jstransformer <br/> npm WARN deprecated constantinople@3.0.2: Please update to at least constantinople 3.1.1 <br/>npm WARN deprecated jade@1.11.0: Jade has been renamed to pug, please install the latest version of pug instead of jade`
 
-1. To solve this problem, let's change the port for your frontend app. In `eventonica-react/package.json`, find the start script that says `    "start": "react-scripts start",`.  Change it to now say:
-    `"start": "PORT=8888 react-scripts start",`
-      Now start your eventonica-react project again.  Go to `http://localhost:8888/` and you should see your app running on its new port.  
+> You need to follow this instructions
+>
+> > - In package.json remove Jade
+> > - Install Pug (Jade has been renamed to pug) `npm install pug`
+> > - Run `npm install` again
+> > - In **server/app.js** changes `app.set('view engine', 'jade');` to `app.set('view engine', 'pug');`
+> > - In **views** folder rename all jade file to pug. Ex: index.jade -> index.pug
+> > - Run `npm audit` to check for any vulnerabilities again
 
-1. To be thorough, you should also search your `eventonica-react` project and make sure you've replaced references to port 3000.  I had to change `http://localhost:3000` in the README.md to `http://localhost:8888` in a few spots.
+1. Inside the **server** directory, go to **bin/www** and change the port number on line 15 from 3000 to 4000. You will be running both apps at the same time later on, so doing this will avoid issues.
 
-1. In your second window, you should now be able to start `eventonica-api` on port 3000 without any problems.  Open a browser window and go to `http://localhost:3000/`.  If it's working, you should see a welcome message!
+```js
+// server/bin/www
 
-1. Open `eventonica-api/routes/index.js` and find line 6 that says:
-    ```
-    res.render('index', { title: 'Express' });
-    ```
-    Change the title so it says this instead:
-    ```
-    res.render('index', { title: 'Our express app is working properly' });
-    ```
+var port = normalizePort(process.env.PORT || '4000');
+app.set('port', port);
+```
 
-1. Stop your `eventonica-api` app and restart.  `http://localhost:3000` should now show your new message.
+1. In your second window, you should now be able to start `server` on port 4000 without any problems using the command `npm start`. Open a browser window and go to [http://localhost:4000/](http://localhost:4000/). If it's working, you should see a welcome message!
 
-1. `.gitignore` your `node_modules`.  Push your project up to GitHub by creating a new repo there also called `eventonica-api`. Follow the directions on the page that include the first commit, etc.
+1. Open `server/routes/index.js` and find line 6 that says:
+
+   ```js
+   res.render('index', { title: 'Express' });
+   ```
+
+   Change the title so it says this instead:
+
+   ```js
+   res.render('index', { title: 'Our express app is working properly' });
+   ```
+
+1. Stop your `server` app and restart. `http://localhost:4000` should now show your new message.
+
+1. `.gitignore` your `node_modules`. Push your project up to GitHub.
 
 #### Create a new Events route
 
-1. Duplicate your `eventonica-api/routes/index.js` file and name it `eventonica-api/routes/events.js`. In this new file, change line 6 to say:
-    ```
-    res.render('index', { title: 'This is my events route.' });
-    ```
+1. Duplicate your `server/routes/index.js` file and name it `server/routes/events.js`. In this new file, change line 6 to say:
 
-1. In `eventonica-api/app.js`, add this to line 25:  `app.use("/events", eventsRouter);` You'll need to define `eventsRouter`, so add this to line 9: `var eventsRouter = require("./routes/events");`
+   ```js
+   res.render('index', { title: 'This is my events route.' });
+   ```
 
-1. Stop your `eventonica-api` app and restart.  `http://localhost:3000/events` should now show your new message: 'This is my events route.' You just made a new route!
+1. In `server/app.js`, add this to line 25: `app.use("/events", eventsRouter);` You'll need to define `eventsRouter`, so add this to line 9: `var eventsRouter = require("./routes/events");`
 
-> Note: Obviously, any other app calling `http://localhost:3000/events` would be doing it to get data, not to get a visual web page, but it's nice to have proof that things are working so far. Thanks [express-generator](http://expressjs.com/en/starter/generator.html)!
+1. Stop your `server` app and restart. `http://localhost:4000/events` should now show your new message: **This is my events route.** You just made a new route!
+
+> Note: Obviously, any other app calling `http://localhost:4000/events` would be doing it to get data, not to get a visual web page, but it's nice to have proof that things are working so far. Thanks [express-generator](http://expressjs.com/en/starter/generator.html)!
 
 #### Returning data in the Users endpoint
-1. Copy your list of mock users to the to of `users.js` into an array called `users`. 
+
+1. Copy your list of mock users from your client/src/components/Users.js file to the `server/routes/users.js` into an array called `users`.
+
+```js
+let mockUsers = [
+  { id: 1, name: 'Marlin', email: 'marlin@gmail.com' },
+  { id: 2, name: 'Nemo', email: 'nemo@gmail.com' },
+  { id: 3, name: 'Dory', email: 'dory@gmail.com' }
+];
+```
 
 2. Update the endpoint so it returns `res.json({users:[your mock users here]});`
-**Check** Review the difference between `res.json` and `res.send`. Typically front-end apps to expect to receive responses as a JSON. 
 
-Restart your server. Do you see the events list at `http://localhost:3000/users`?
+```js
+// server/routes/users.js`
+router.get('/', function (req, res, next) {
+  console.log(req.body, 'the body');
+  res.json({ users: mockUsers });
+});
+```
+
+**Check** Review the difference between `res.json` and `res.send`. Typically front-end apps to expect to receive responses as a JSON.
+
+Restart your server. Do you see the users list at `http://localhost:4000/users`?
 
 **What shape should the response object be?**
 The example response returns `{ users: [array of users] }` instead of just `res.json(users)`. This is because naming the user object `users` is a more clear way of presenting this information. Also, this endpoint could send other information in addition to the user array. For example, it is common to have pagination in GET endpoints. So the response could eventually be something like `res.json( { users:[user array], pagination: {pageSize: 10, page: 1 } });`
+
 #### Testing in Postman
-Testing in Postman (or a similar app) is a great way to test and understand your backend services. While you can test the URLs in Chrome, or test your endpoints by calling them in React, they offer less flexibility, and/or might have less context into the endpoint's behavior and errors. 
+
+Testing in Postman (or a similar app) is a great way to test and understand your backend services. While you can test the URLs in Chrome, or test your endpoints by calling them in React, they offer less flexibility, and/or might have less context into the endpoint's behavior and errors.
 
 1. Testing the endpoint
-Open Postman, and open a new tab called "Eventonica". "GET" should be automatically selected in the dropdown. Enter `http://localhost:3000/users` into the request URL and press send. You should see the same list of users in the response below. 
+   Open Postman, and open a new tab called "Eventonica". "GET" should be automatically selected in the dropdown. Enter `http://localhost:4000/users` into the request URL and press send. You should see the same list of users in the response below.
 
 2. Testing sending information
-Now the get users endpoint always returns all users. However, in the future we might want filtering. 
+   Now the get users endpoint always returns all users. However, in the future we might want filtering.
 
 To test this, you can console log `console.log(req.body, 'the body')` before the `res.json` line. In Postman, now try adding a body. Click the "body" tab and select "raw". Then select "JSON" from the dropdown. Try sending a JSON of something that the API might send. For example, it could send `{"name": "nemo"}` for when you implement filtering. If you added the console log, do you see this information printed in your express server terminal? (Note that console logs will not show up in Postman).
 
 #### Access your API from your React app
 
-1. Back in your frontend, open `eventonica-react/src/Users.js`. Add this code to be the next line right after `const Users = () => {` so that it is inside your React code block:
-    ```
+1.  Back in your frontend, open `client/src/Users.js`. Add this code to be the next line right after `const Users = () => {` so that it is inside your React code block:
+
+    ```jsx
     const [users, setUsers] = useState([]);
 
-    console.log("users", users)
+    console.log('users', users);
 
     const getUsers = () => {
-      fetch("http://localhost:3000/users")
-        .then(res => res.json())
-        .then(res => setUsers(res.users))
+      fetch('http://localhost:4000/users')
+        .then((res) => res.json())
+        .then((res) => setUsers(res.users));
     };
 
     useEffect(() => {
-      getUsers(); // useEffect will run getUsers() every time this component loads, as opposed to just the first time it is rendered.
+      // useEffect will run getUsers() every time this component loads, as opposed to just the first time it is rendered.
+      getUsers();
     }, []);
     ```
-**Check**
-Why do we set `setUsers(res.users)` instead of `setUsers(res)`? Remember that `res` is an object with a key `users`, but it could also have other information. Try to keep states as specific as possible. ie if the `res` response did have other information such as pagination, we want to keep the `users` state as "specific" as possible, so that it only stores the users array part of the API response.
 
-1. If you look at http://localhost:8888/ or your terminal, it will probably say that `useState` and `useEffect` are not defined.  You should import these React hooks from React like this on line 1:
-    ```
-    import React, {useEffect, useState} from 'react';
+    **Check**
+    Why do we set `setUsers(res.users)` instead of `setUsers(res)`? Remember that `res` is an object with a key `users`, but it could also have other information. Try to keep states as specific as possible. ie if the `res` response did have other information such as pagination, we want to keep the `users` state as "specific" as possible, so that it only stores the users array part of the API response.
+
+1.  If you look at http://localhost:3000/ or your terminal, it will probably say that `useState` and `useEffect` are not defined. You should import these React hooks from React like this on line 1:
+
+    ```js
+    import React, { useEffect, useState } from 'react';
     ```
 
 1.  On the line after `<ul id="users-list">`, add this line: `{JSON.stringify(users)}`.
 
-1. If you visit http://localhost:8888/ and look in your User Management section.... you won't see it.  But if you look in your console, your console log should be working as expected and printing `apiResponse`.  You may be getting a `403 error: forbidden` or a `Access-Control-Allow-Origin` message. So what's the problem?
+1.  If you visit http://localhost:3000/ and look in your User Management section.... you won't see it. But if you look in your console, your console log should be working as expected and printing `apiResponse`. You may be getting a `403 error: forbidden` or a `Access-Control-Allow-Origin` message. So what's the problem?
 
-1. We need to allow cross-origin resource sharing.  By default, your Express app will block "localhost:8888" because it's not using the same domain as itself, "localhost:3000". But since you're working locally, we can disable this for now.
+1.  We need to allow cross-origin resource sharing. By default, your Express app will block "localhost:3000" because it's not using the same domain as itself, "localhost:4000". But since you're working locally, we can disable this for now.
 
-1. In your terminal navigate to the `eventonica-api` directory, stop your app, and install the CORS package:
-`npm install --save cors`
+1.  In your terminal navigate to the `server` directory, stop your app, and install the CORS package:
+    `npm install --save cors`
 
-1. In `eventonica-api/app.js`, require CORS on line 6:
-  `var cors = require("cors");`
-1. Now on line 22 have express use CORS:
-  `app.use(cors());`
+1.  In `server/app.js`, require CORS on line 6:
+    `var cors = require("cors");`
+1.  Now on line 22 have express use CORS:
+    `app.use(cors());`
 
-1. Restart `eventonica-api`.  If you refresh localhost:8888, you should see the response from your `/users` route!
+1.  Restart `server`. If you refresh localhost:3000, you should see the response from your `/users` route!
 
 #### Use your API data to render a users list in your React app
+
 Now your challenge is to:
-- Move your example users out of `eventonica-react/src/components/Users.jsx` and into `eventonica-api/routes/users.js` and make sure it is a single array of users.
-- Have the users array be the response from http://localhost:3000/users, and make sure it renders in your frontend on localhost:8888
+
+- Move your example users out of `client/src/components/Users.jsx` and into `server/routes/users.js` and make sure it is a single array of users.
+- Have the users array be the response from http://localhost:4000/users, and make sure it renders in your frontend on localhost:3000
 - Have your React Users component render users as HTML list items rather than plain text.
 
 #### The real work
 
-Add remaining REST API routes for `users` listed in the [project README](./README.md). Dont worry about `events` or `favorites` for now... you can add those after we get our database going.
+Add remaining REST API routes for `users` listed in the [project README](./README.md). Don't worry about `events` or `favorites` for now... you can add those after we get our database going.
 
-`Users` now needs "add" and "delete" functionality.  For example, a frontend function called `addUser()` should make a POST request to http://localhost:3000/users/
+`Users` now needs "add" and "delete" functionality. For example, a frontend function called `addUser()` should make a POST request to http://localhost:4000/users/
 and add a user by posting JSON with your API (which currently just saves to a variable since we have no DB), and the API would need a route like this:
-```
-router.post('/', function(req, res, next) {
+
+```js
+router.post('/', function (req, res, next) {
   // save request data to a variable in routes/users.js
 
   res.send('some message about your data being saved, and a copy of that data');
 });
 ```
-**Tip** 
+
+**Tip**
 Did you declare your `users` variable with `var`, `const`, or `let`? You can review the differences [here](https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/)
 This could make a difference depending on how you implement your `addUser` functionality - how so?
 
--  Commit after every successful addition - that way if you get mixed up, you have a clean save point to return to.
+- Commit after every successful addition - that way if you get mixed up, you have a clean save point to return to.
 
 - Use Postman or your preferred tool to test the API routes.
 
diff --git a/projects/eventonica-react/eventonica-postgres.md b/project-example/week-9/eventonica/eventonica-postgres.md
similarity index 100%
rename from projects/eventonica-react/eventonica-postgres.md
rename to project-example/week-9/eventonica/eventonica-postgres.md
diff --git a/projects/eventonica-react/eventonica-react-ui-advanced.md b/project-example/week-9/eventonica/eventonica-react-ui-advanced.md
similarity index 84%
rename from projects/eventonica-react/eventonica-react-ui-advanced.md
rename to project-example/week-9/eventonica/eventonica-react-ui-advanced.md
index 3445c6762..3859c2309 100644
--- a/projects/eventonica-react/eventonica-react-ui-advanced.md
+++ b/project-example/week-9/eventonica/eventonica-react-ui-advanced.md
@@ -1,5 +1,7 @@
 # Eventonica React UI: Part 2
+
 ## Projected Time
+
 6-8 Hours
 
 ## Primary Goal
@@ -11,7 +13,8 @@ To continue the Eventonica UI with more advanced React principles
 In this tutorial, you will create a form for creating events, and learn about React `useReducer` hooks.
 
 ## Events List
-Similar to the `Users` list in part 1, create a UI that renders a list of events. 
+
+Similar to the `Users` list in part 1, create a UI that renders a list of events.
 
 1. Create an `Events` component. Copy the `<section className="event-management">` section from the start code into this new component.
 2. Create a few mock events at the top of this file. These should at least have a name, description, and ID, and at least 2 other fields. You may use the [mockEvents](./starter-code/mockEvents.js), or create your own.
@@ -19,75 +22,79 @@ Similar to the `Users` list in part 1, create a UI that renders a list of events
 4. Iterate through each event and display its name, description, etc. For now, the UI can be simple.
 
 ---
+
 ## Create events with useReducer
 
-We want to create a new form to create events. In part one, you made have used a different `useState` hook and variable for each field. Now that there are more fields, notice how creating a new state for each field can get tedious, and the component grows larger. 
+We want to create a new form to create events. In part one, you made have used a different `useState` hook and variable for each field. Now that there are more fields, notice how creating a new state for each field can get tedious, and the component grows larger.
 
 There is another hook called [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer) which is better for more complex state management. Read [this article](https://blog.logrocket.com/guide-to-react-usereducer-hook/) about the reducer concept. There are 3 main parts of a reducer:
-**Store**, or state: the information you want to store and update.  Yours will have all of the event fields. 
+**Store**, or state: the information you want to store and update. Yours will have all of the event fields.
 **Actions: how state is updated**
-For a state like `[users, setUsers] = React.useState([])`, `setUsers` is the only function that can mutate `users`. Similarly, the `dispatch` function can "send" specific actions, which are the only way to update the state. Actions typically have a *type* and a *payload*. 
+For a state like `[users, setUsers] = React.useState([])`, `setUsers` is the only function that can mutate `users`. Similarly, the `dispatch` function can "send" specific actions, which are the only way to update the state. Actions typically have a _type_ and a _payload_.
 
 **Reducer**
-A function that accepts the current state and action. It returns the new state.  
+A function that accepts the current state and action. It returns the new state.
 
 #### Example
-Look at [this example](https://codesandbox.io/s/wild-brook-5drvk?file=/src/App.js). Try to identify the main parts of the useReducer. 
+
+Look at [this example](https://codesandbox.io/s/wild-brook-5drvk?file=/src/App.js). Try to identify the main parts of the useReducer.
 
 Note: this example uses the spread operator. To review this concept, you can check out [this](https://medium.com/coding-at-dawn/how-to-use-the-spread-operator-in-javascript-b9e4a8b06fab) article.
-Using the spread operator is a common way objects are modified. 
+Using the spread operator is a common way objects are modified.
 For example, say if there is an object `const meal = {"appetizer":"bread", "entree": "Noodles", "dessert": "Ice cream"}`, and you want to update the `dessert` field.
 You can say `meal.dessert = "pie"`. Or, you can say `meal = {...meal, dessert:"pie"}`
 
-
 ## Making the form
+
 1. Fill in the form `<form id="add-event">` by creating inputs for each event field. These do not have to work yet.
 
-3. Initialize the reducer that will store and update the form data. 
-```
+2. Initialize the reducer that will store and update the form data.
+
+```jsx
 const EventForm = () => {
-  const [events, setEvents] = React.useState([])
+  const [events, setEvents] = React.useState([]);
   const [state, dispatch] = React.useReducer(reducer, initialState);
-  
+
   return <div>...</div>;
 };
 ```
+
 This will throw an error, since `reducer` and `initialState` are undefined.
 
 4. Create an initial state for the form reducer. This will be an object with keys for each field in the form. The values will be updates as the user fills out the form.
-For example,
-```
+   For example,
+
+```jsx
 const initialState = {
-  id: "",
-  name: "",
+  id: '',
+  name: '',
   date: null,
-  description: "",
-  category: "",
-  maxAttendees: 10,
+  description: '',
+  category: ''
 };
-``` 
+```
 
 5. Create the reducer function. Each action type will mutate the state in its own way.
-This reducer function returns a new state.
+   This reducer function returns a new state.
 
 These usually use a [switch statement](https://www.w3schools.com/js/js_switch.asp).
 
 This is one approach, where there is a different action type for each field that is edited. For example, when an action is send with `type === "editCategory"`, the `category` field of state will be updated. The rest of the fields will remain the same.
 
-
 There are some example console logs here in places that can help you debug.
-```
+
+```jsx
 const reducer = (state, action) => {
-  console.log(action, "this is the action");
+  console.log(action, 'this is the action');
   switch (action.type) {
-    case "editName":
-      console.log("Logged if the editName action is being dispatched")
+    case 'editName':
+      console.log('Logged if the editName action is being dispatched');
       return { ...state, name: action.payload };
 
-    case "editDescription":
+    case 'editDescription':
       return { ...state, description: action.payload };
 
-    case "editCategory":
+    case 'editCategory':
       return { ...state, category: action.payload };
 
     default:
@@ -95,28 +102,34 @@ const reducer = (state, action) => {
   }
 };
 ```
+
 Add actions types for all of your form fields.
 
 6. Actions that affect multiple fields
-One of the main benefits of `useReducer` is you can easily update *multiple* fields with *one* action.
+   One of the main benefits of `useReducer` is you can easily update _multiple_ fields with _one_ action.
 
-Say we want the following flow: when the user changes the date of the event, the description and category are reset. Without a reducer, everywhere you change the date, you would have add something like 
-```
+Say we want the following flow: when the user changes the date of the event, the description and category are reset. Without a reducer, everywhere you change the date, you would have add something like
+
+```jsx
 onChange={(e) =>
   setDate(e.target.value)
   setDescription('')
   setCategory('')
 }
 ```
-This can become tedious, and if you have a larger state where many fields depend on each other, this can become prone to bugs. 
+
+This can become tedious, and if you have a larger state where many fields depend on each other, this can become prone to bugs.
 
 In a reducer, this logic becomes a lot cleaner. Instead of updating just the date:
-```
+
+```jsx
 case "editDate":
   return { ...state, date: action.payload };
 ```
+
 We can update many fields inside this `case`:
-```
+
+```jsx
 case "editDate":
   return { ...state, description: '', category: '', date: action.payload };
 ```
@@ -126,28 +139,28 @@ Note: you don't actually have to add this functionality - this was mainly an exa
 7. Dispatching an action
 
 When connected to the reducer, the event name field could look like this:
- ```
+
+```jsx
 <input
   type="text"
   value={state.name}
   onChange={(e) =>
     dispatch({
-    type: "editName",
-    payload: e.target.value
+      type: 'editName',
+      payload: e.target.value
     })
   }
 />
- ```
- 
+```
+
 When this input is changed, it will dispatch the `"editName"` action. The payload of this action (aka the data), will be the input field value. The reducer will "read" this action, and know to update `state.name`. Try testing this. If you console log the state, do you see how it changes?
 
 Dispatch events for all fields in your form.
 
-
-**Check**: you should have a form with all the fields needed to create a new event. The reducer `state` stores all of these values. When the user types in a field, this should dispatch an action to update the state. 
+**Check**: you should have a form with all the fields needed to create a new event. The reducer `state` stores all of these values. When the user types in a field, this should dispatch an action to update the state.
 
 8. Adding an event
-Now the `state` stores all the data the user entered, but the data doesn't go anywhere. When the user presses submit, it should  create a new event object from the field values, and add that event to the list of events using `setEvents`. That event should then appear in the Events list.
+   Now the `state` stores all the data the user entered, but the data doesn't go anywhere. When the user presses submit, it should create a new event object from the field values, and add that event to the list of events using `setEvents`. That event should then appear in the Events list.
 
 ### Add Remaining Functions
 
@@ -163,13 +176,12 @@ Once all the behavior is fully working, move on to these enhancements.
 
 **Using a Date formatting Library (optional)**
 
-You may have noticed that manipulating Date objects and formatting them can be time consuming. There are JS libraries that specialize in this. Install the [date-fns](https://date-fns.org/) library to help easily format the event dates. Using external libraries that specialize in one thing can save you time as a developer, because you won't have to implement these yourself. 
+You may have noticed that manipulating Date objects and formatting them can be time consuming. There are JS libraries that specialize in this. Install the [date-fns](https://date-fns.org/) library to help easily format the event dates. Using external libraries that specialize in one thing can save you time as a developer, because you won't have to implement these yourself.
 
-Try using the `format` function to format the event dates. For example, `format(new Date(2021, 10, 1), 'MMM dd yyyy')`. 
+Try using the `format` function to format the event dates. For example, `format(new Date(2021, 10, 1), 'MMM dd yyyy')`.
 
 Bonus: explore the documentation - there are many other helpful functions, like `isBefore`, `startOfWeek`, `addDays`, etc. How could you use this library to implement a "search events by date" function?
 
-
 #### Challenges
 
 Try to do at least one of these challenges to improve your site:
@@ -186,4 +198,8 @@ Try to do at least one of these challenges to improve your site:
 
 - Change the UI. Draw up a design for how you'd like your app to look and then code your site to match. The changes could involve breaking the UI into multiple pages, adding more CSS, using a styling library such as Bootstrap, and/or adding more JS. Look at websites that have successful UIs for creating, retrieving, updating, deleting, and filtering data for inspiration. Consider designing a desktop and a mobile version and create a responsive UI.
 
+### Supplemental Materials
+
+- [How to use React useReducer hook like a pro](https://devtrium.com/posts/how-to-use-react-usereducer-hook)
+
 ### Good luck!
diff --git a/projects/eventonica-react/eventonica-react-ui.md b/project-example/week-9/eventonica/eventonica-react-ui.md
similarity index 74%
rename from projects/eventonica-react/eventonica-react-ui.md
rename to project-example/week-9/eventonica/eventonica-react-ui.md
index 4a0fab338..491d64b5f 100644
--- a/projects/eventonica-react/eventonica-react-ui.md
+++ b/project-example/week-9/eventonica/eventonica-react-ui.md
@@ -1,6 +1,7 @@
 # Eventonica - Build a React UI
 
 ## Projected Time
+
 4-6 Hours
 
 ## Primary Goal
@@ -12,6 +13,7 @@ To build a UI for a portfolio-ready client-side application.
 You'll build a web UI for the Eventonica app that will allow a user to interact with the code you already wrote in Part 1. This will be the basis of the subsequent parts as well.
 
 In this tutorial, we will create:
+
 - a form for creating a user with an email
 - a form for deleting a user ID
 - a list to display all users
@@ -25,6 +27,7 @@ In this tutorial, we will create:
 You'll use React and JavaScript to build functionality for all the features listed in the [main project README](./README.md#project-requirements).
 
 By the end of this lesson, your project will have:
+
 1. A user list
 2. A form to create a user and delete a user
 
@@ -42,16 +45,15 @@ Remember to commit your code and push to GitHub frequently while working on this
 
 Before we create some components from scratch, your first challenge is to abstract an existing element into a new file, then export it as a component.
 
-It's typical for a React developer to start in one file, then begin to divide it into new files and components as things grow.  This keeps things organized and easy to read.  There seems to be a general agreement that files should not be over 200 or 300 lines long, but of course there are plenty of opinions.
+It's typical for a React developer to start in one file, then begin to divide it into new files and components as things grow. This keeps things organized and easy to read. There seems to be a general agreement that files should not be over 200 or 300 lines long, but of course there are plenty of opinions.
 
-1. Create a new folder in `eventonica-react/src` named `components`.  Create a file called `footer.jsx` within `components`.
+1. Create a new folder in `client/src` named `components`. Create a file called `footer.jsx` within `components`.
 
 Having a folder called `components` will be useful because in the future, we can have other folders such as `apis` or `utils`. Separating concerns in a project is a good practice because it makes the files and folders easier to read and navigate.
 
 2. Copy all the code from `<footer>` to `</footer>` in `App.js` and paste it into `components/footer.jsx`.
 
-3.  Use your knowledge of React to convert this to a component named `Footer` that is exported from `components/footer.jsx` back to its original position in `App.js`. You can do it!
-
+3. Use your knowledge of React to convert this to a component named `Footer` that is exported from `components/footer.jsx` back to its original position in `App.js`. You can do it!
 
 ### Users Subcomponent
 
@@ -61,16 +63,13 @@ Before this stage, ensure you have a commit in place with the working app.
 
 ### Display All Users
 
-1. Copy the code in `App.js` in the `<section className="user-management">` section (from line 9 to 39). Create a new file in the `components` file called `Users.jsx`, and paste the section code here. This section should be deleted from `App.js` once it is in `Users.jsx`. Make sure your file looks like this:
-```
+1. Copy the code in `App.js` in the `<section className="user-management">` section. Create a new file in the `components` file called `Users.jsx`, and paste the section code here. This section should be deleted from `App.js` once it is in `Users.jsx`. Make sure your file looks like this:
+
+```js
 import React from 'react';
 
 const Users = () => {
-  return (
-    <section className="user-management">
-    ...
-    </section>
-  );
+  return <section className="user-management">...</section>;
 };
 
 export default Users;
@@ -80,18 +79,18 @@ Use this `Users` component in `App.js`, and check that the section is rendering
 
 2. Try adding some mock users at the top of your `Users` file. For example,
 
-```
-const marlin = { name: "Marlin", email: "marlin@gmail.com", id:"1" };
-const nemo = { name: "Nemo", email: "nemo@gmail.com", id: "2" };
-const dory = { name: "Dory", email: "dory@gmail.com" , id: "3"};
+```js
+const marlin = { name: 'Marlin', email: 'marlin@gmail.com', id: '1' };
+const nemo = { name: 'Nemo', email: 'nemo@gmail.com', id: '2' };
+const dory = { name: 'Dory', email: 'dory@gmail.com', id: '3' };
 ```
 
 Later on you will add more fields to this form, and eventually store these users in a database.
 
 ### Displaying Users
 
-1. Use `setState` to create `users` and `setUsers`. The default value for `users` can be a list of your mock users. For example,
- `const [users, setUsers] = React.useState([marlin, nemo, dory])`
+1. Use `useState` to create `users` and `setUsers`. The default value for `users` can be a list of your mock users. For example,
+   `const [users, setUsers] = useState([marlin, nemo, dory])`
 
 2. Iterate through your user list and display their name and email in the list. Remember to have a key for each list item
 
@@ -99,7 +98,6 @@ Later on you will add more fields to this form, and eventually store these users
 
 With JS DOM, you would attach event handlers to the DOM. In React, you should not be doing any direct DOM manipulation (ie `document.getElementById`, setting `innerHTML`, etc)
 
-
 See the example code below to compare Vanilla JS vs React (this example code may not be exactly how your code works but hopefully you can see how to apply the idea to yours)
 
 #### JS DOM Example of Handling a "Create User" Action
@@ -110,11 +108,9 @@ document
   .querySelector('#add-user-action')
   .addEventListener('click', (event) => {
     event.preventDefault();
-    const newId = parseInt(
-      document.querySelector('#new-user-id').value
-    );
+    const newId = parseInt(document.querySelector('#new-user-id').value);
     const newName = document.querySelector('#new-user-name').value;
-    const newUser = {id: newId, name: newName };
+    const newUser = { id: newId, name: newName };
     users.push(newUser);
     displayEvents(); // calls another function to refresh the DOM after users is updated
   });
@@ -126,12 +122,13 @@ document
 // id, name, and email are states that store what values the user types in those fields
 // users is an array of user objects
 // All of these states can be defined in the component
-const onSubmit = e => {
+const handleSubmit = (e) => {
   e.preventDefault();
-  const newUser = {id: id, name: name, email: email};
+  const newUser = { id: id, name: name, email: email };
   setUsers([...users, newUser]);
 };
 ```
+
 **JS Syntax Checks**:
 Take a look at some of the object and array syntax in the code snippet above. Do you understand what `[...users, newUser]` represents?
 
@@ -139,20 +136,20 @@ Take a look at some of the object and array syntax in the code snippet above. Do
 `const newUser = {id, name, email}`
 This is a ES2015 feature called [Object property shorthand](https://alligator.io/js/object-property-shorthand-es6/)
 
-
 ### Adding a User
 
 1. Update the HTML form under "Add User" to have an ID field and an email field.
 
 2. As the user types in the input fields, we will need to store what value is in each field. For now, we will have a different state for each field. For example, for storing what the user types in the name field, there can be a new state
- `const [name, setName] = React.useState('')`
+   `const [name, setName] = useState('')`
 
-    Every time the user types a name in the name field, the `name` state is updated. How can we achieve this?
+   Every time the user types a name in the name field, the `name` state is updated. How can we achieve this?
 
-    Hint: Input elements have a `value` property that contains the current input, [see example at w3schools](https://www.w3schools.com/jsref/prop_text_value.asp).
+   Hint: Input elements have a `value` property that contains the current input, [see example at w3schools](https://www.w3schools.com/jsref/prop_text_value.asp).
 
 Your input field could look something like this:
-```
+
+```js
 <input
   type="text"
   id="add-user-name"
@@ -165,8 +162,9 @@ Do the same thing for the ID and email fields.
 **Check** : try console logging your `name`, `id`, and `email` states. Do you see them changing as the user types?
 
 3. When the user clicks submit, it should:
-    - create a new user  with the ID, email, and name that the user entered
-    - add that new user to the list of users
+
+   - create a new user with the ID, email, and name that the user entered
+   - add that new user to the list of users
 
    Notice `preventDefault` used in the sample code -- Comment it out and see what happens. Learn more about it from the [preventDefault MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
 
@@ -183,18 +181,22 @@ The form should allow a user to be deleted from your list of users. For this fun
 2. To delete a user, you'll need a way to uniquely identify what user should be deleted. We will ask the user for an ID, and delete the user with that ID. Create a state to store what `deleteId` the user has typed.
 
 3. When a user is deleted, we want the user object with that ID to be removed from the `users` list. How can you use the `setUsers` function to do that? Create a function in the `Users` component:
-```
-  const deleteUser = (deleteId) => {
-    const newUsers = users.filter(i=>i.id !== deleteId)
-    setUsers(newUsers)
-  };
+
+```js
+const deleteUser = (deleteId) => {
+  const newUsers = users.filter((i) => i.id !== deleteId);
+  setUsers(newUsers);
+};
 ```
 
 4. Pass this function as a prop to your `DeleteUser` component.
 
 5. Clicking submit in the delete form should call this function with the ID that the user entered. Don't forget `preventDefault()`.
-After `deleteUser` is called, a user should be removed from the `users` list in `Users.jsx`. Check this by looking at your `<ul>` list of users, or by console logging `users` state.
+   After `deleteUser` is called, a user should be removed from the `users` list in `Users.jsx`. Check this by looking at your `<ul>` list of users, or by console logging `users` state.
 
 **Check for understanding:**
+
 - Why do we define `deleteUser` in `Users.jsx` instead of `DeleteUser.jsx`?
-- Discuss with a partner how props and state work together for the delete functionality.  
+- Discuss with a partner how props and state work together for the delete functionality.
+
+**Note**: You can find the code on [Github](https://github.com/priyaraj7/Eventonica/tree/react-2)
diff --git a/project-example/week-9/eventonica/eventonica-setup.md b/project-example/week-9/eventonica/eventonica-setup.md
new file mode 100644
index 000000000..44850e107
--- /dev/null
+++ b/project-example/week-9/eventonica/eventonica-setup.md
@@ -0,0 +1,58 @@
+# Eventonica Part 1 - Setup your React App
+
+### Projected Time: ~ 30 min
+
+### Prerequisites
+
+- [Full Apps using create-react-app](../../react-js/react-part-5-full-apps.md)
+
+### Primary Goals
+
+- Get experience writing your own React code
+
+## Instructions
+
+In this outline, you'll create a React app for frontend Eventonica project.
+
+### Requirements
+
+We will be working from the same set of [Eventonica Requirements](./README.md) as all parts of this project.
+
+### Set up a new React App with API Support
+
+First create a folder for your Eventonica project and move inside that directory.
+
+```bash
+mkdir Eventonica
+cd Eventonica
+```
+
+To create a React app, you can use the tool `npx`. npx gives you the ability to use the `create-react-app` package without having to first install it on your computer, which is very convenient.
+
+```bash
+npx create-react-app client
+cd client
+npm start
+```
+
+Once you run this command, a folder named "client" will be created and all of the packages it requires will be automatically installed.
+
+Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
+
+### Insert Starter Code
+
+#### JSX Starter Code
+
+1. Inside `/src/App.js`, delete all the code. In its place, add code from [starter-code](./starter-code/starter-jsx.js). You should see your UI update automatically on `localhost:3000` to an Eventonica form. If there's an error, `ctrl + c` and `npm start` again.
+
+2. Go to `client/src/App.css` and delete the contents. You can also delete the file itself for `client/src/index.css`. Replace the `App.css` contents with all the CSS code from [css-starter-code](./starter-code/index.css). You should see 2 columns on your form now on `localhost:3000`.
+
+3. Drag and drop, or copy and paste, [calendar icon](./images/calendar.png) in the `src` folder.
+
+   ![](./images/eventonica-setup.png)
+
+   <sub><sub>Please ignore calender icon in this image</sub></sub>
+
+4. Look at all the code that's now in your App component. Take 2 minutes to point out to yourself where repeated elements might be turned into a reusable component later.
+
+> Note:<br> Remove `.git` folder from your react app before pushing into your git repo.<br>Navigate to your `client` folder in the terminal.<br> Remove the `.git` folder using `rm -rf .git` command. <br>Come out of client folder using `cd ..`. <br>Inside Eventonica directory, initialize Git repository and push all your code to Github.
diff --git a/projects/eventonica-react/eventonica-test-api.md b/project-example/week-9/eventonica/eventonica-test-api.md
similarity index 100%
rename from projects/eventonica-react/eventonica-test-api.md
rename to project-example/week-9/eventonica/eventonica-test-api.md
diff --git a/projects/eventonica-react/eventonica-test-frontend.md b/project-example/week-9/eventonica/eventonica-test-frontend.md
similarity index 100%
rename from projects/eventonica-react/eventonica-test-frontend.md
rename to project-example/week-9/eventonica/eventonica-test-frontend.md
diff --git a/projects/eventonica-react/eventonica-test-rtl.md b/project-example/week-9/eventonica/eventonica-test-rtl.md
similarity index 100%
rename from projects/eventonica-react/eventonica-test-rtl.md
rename to project-example/week-9/eventonica/eventonica-test-rtl.md
diff --git a/projects/eventonica-react/starter-code/calendar.png b/project-example/week-9/eventonica/images/calendar.png
similarity index 100%
rename from projects/eventonica-react/starter-code/calendar.png
rename to project-example/week-9/eventonica/images/calendar.png
diff --git a/project-example/week-9/eventonica/images/eventonica-setup.png b/project-example/week-9/eventonica/images/eventonica-setup.png
new file mode 100644
index 000000000..53eca5b9c
Binary files /dev/null and b/project-example/week-9/eventonica/images/eventonica-setup.png differ
diff --git a/projects/eventonica-react/starter-code/eventForm.js b/project-example/week-9/eventonica/starter-code/eventForm.js
similarity index 100%
rename from projects/eventonica-react/starter-code/eventForm.js
rename to project-example/week-9/eventonica/starter-code/eventForm.js
diff --git a/projects/eventonica-react/starter-code/events.js b/project-example/week-9/eventonica/starter-code/events.js
similarity index 100%
rename from projects/eventonica-react/starter-code/events.js
rename to project-example/week-9/eventonica/starter-code/events.js
diff --git a/projects/eventonica-react/starter-code/index.css b/project-example/week-9/eventonica/starter-code/index.css
similarity index 100%
rename from projects/eventonica-react/starter-code/index.css
rename to project-example/week-9/eventonica/starter-code/index.css
diff --git a/projects/eventonica-react/starter-code/mockEvents.js b/project-example/week-9/eventonica/starter-code/mockEvents.js
similarity index 100%
rename from projects/eventonica-react/starter-code/mockEvents.js
rename to project-example/week-9/eventonica/starter-code/mockEvents.js
diff --git a/project-example/week-9/eventonica/starter-code/starter-jsx.js b/project-example/week-9/eventonica/starter-code/starter-jsx.js
new file mode 100644
index 000000000..c7944869d
--- /dev/null
+++ b/project-example/week-9/eventonica/starter-code/starter-jsx.js
@@ -0,0 +1,118 @@
+import calendar from "./calendar.png";
+import "./App.css";
+
+function App() {
+  return (
+    <div className="App">
+      <header>
+        <img src={calendar} alt="Calendar Star Logo" />
+        <h1>Eventonica</h1>
+      </header>
+
+      <main>
+        <div className="user-and-events">
+          <section className="user-management">
+            <h2>User Management</h2>
+
+            <ul id="users-list">
+              {/* display all existing Users here */}
+              <li>...</li>
+            </ul>
+
+            <div>
+              <h3>Add User</h3>
+              <form id="add-user" action="#">
+                <fieldset>
+                  <label>Name</label>
+                  <input type="text" id="add-user-name" />
+                </fieldset>
+                {/* Add more form fields here */}
+                <input type="submit" value="Add" />
+              </form>
+            </div>
+
+            <div>
+              <h3>Delete User</h3>
+              <form id="delete-user" action="#">
+                <fieldset>
+                  <label>User ID</label>
+                  <input type="text" id="delete-user-id" />
+                </fieldset>
+                <input type="submit" />
+              </form>
+            </div>
+          </section>
+
+          <section className="event-management">
+            <h2>Event Management</h2>
+            <div>
+              <h3>All Events</h3>
+              <ul id="events-list">
+                {/* Display all Events here */}
+                <li>...</li>
+              </ul>
+
+              <h3>Add Event</h3>
+              <form id="add-event" action="#">
+                <fieldset>
+                  <label>Name</label>
+                  <input
+                    type="text"
+                    id="add-event-name"
+                    placeholder="Virtual corgi meetup"
+                  />
+                </fieldset>
+                {/* Add more form fields here */}
+                <input type="submit" />
+              </form>
+            </div>
+          </section>
+        </div>
+
+        <div>
+          <h3>Delete Event</h3>
+          <form id="delete-event" action="#">
+            <fieldset>
+              <label>Event ID</label>
+              <input type="number" min="1" id="delete-event-id" />
+            </fieldset>
+            <input type="submit" />
+          </form>
+        </div>
+
+        <aside className="search-toolbar">
+          <div>
+            <h3>Find Events</h3>
+            <form id="search" action="#">
+              <fieldset>
+                <label htmlFor="date-search">Date</label>
+                <input type="text" id="date-search" placeholder="YYYY-MM-DD" />
+              </fieldset>
+              <fieldset>
+                <label htmlFor="category-search">Category</label>
+                <input type="text" id="category-search" />
+              </fieldset>
+
+              <input type="submit" value="Search" />
+            </form>
+          </div>
+        </aside>
+      </main>
+
+      <footer>
+        <div>
+          Star Calendar favicon made by
+          <a href="https://www.flaticon.com/authors/freepik" title="Freepik">
+            Freepik
+          </a>
+          Find your own on
+          <a href="https://www.flaticon.com/" title="Flaticon">
+            FlatIcon.com
+          </a>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export default App;
diff --git a/projects/eventonica-react/starter-code/users.js b/project-example/week-9/eventonica/starter-code/users.js
similarity index 100%
rename from projects/eventonica-react/starter-code/users.js
rename to project-example/week-9/eventonica/starter-code/users.js
diff --git a/projects/eventonica-react/ticketmaster-api.md b/project-example/week-9/eventonica/ticketmaster-api.md
similarity index 100%
rename from projects/eventonica-react/ticketmaster-api.md
rename to project-example/week-9/eventonica/ticketmaster-api.md
diff --git a/projects/eventonica-react/eventonica-setup.md b/projects/eventonica-react/eventonica-setup.md
deleted file mode 100644
index 8208023f1..000000000
--- a/projects/eventonica-react/eventonica-setup.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# Eventonica Part 1 - Setup your React App
-
-### Projected Time: ~ 30 min
-
-### Prerequisites
-
-- [Full Apps using create-react-app](../../react-js/react-part-5-full-apps.md)
-
-### Primary Goals
-
-- Get experience writing your own React code
-
-## Instructions
-
-In this outline, you'll create a React frontend for your Eventonica API.
-
-### Requirements
-
-We will be working from the same set of [Eventonica Requirements](./README.md) as all parts of this project.
-
-### Set up a new React App with API Support
-
-We'll use `create-react-app` to set up a basic app, first covered in [React Full App](../../react-js/react-part4-full-apps.md) lesson.
-
-For this project, we'll use create-react-app to set up the React frontend. There are many possible ways to set up React,
-and we're going to describe one specific setup that will make it easy for you to deploy your project later.
-
-- Use `create-react-app` to create a new React App, with `npx create-react-app eventonica-react`.
-  If you haven't used create-react-app before, you can read more about what it sets up here: https://www.codecademy.com/articles/how-to-create-a-react-app
-
-Here's an example of what `package.json` might look like now:
-
-```json
-{
-  "name": "eventonica-react",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
-    "react-scripts": "2.1.5"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
-}
-```
-
-- In your React app directory, run `npm install`.
-- Make sure your React app works by running `npm start`. You should be able to go to `http://localhost:3000/` and see it running.
-
-### Insert Starter Code
-
-> Note: sorry the instructions and your new projects are both called `eventonica-react`.  When we mention the one in this curriculum repo, we'll use the path `curriculum/projects/eventonica-react`. Otherwise you can assume it's your new create-react-app project.
-
-#### JSX Starter Code
-
-1. Inside `eventonica-react/src/App.js`, collapse the entire div on line 6 and delete it completely along with its contents.  In its place, add all the code from [curriculum/projects/eventonica-react/starter-code/starter-jsx.js](./starter-code/starter-jsx.js).  You should see your UI update automatically on `localhost:3000` to an Eventonica form.  If there's an error, `ctrl + c` and `npm start` again.
-
-2. Go to `eventonica-react/src/App.css` and delete the contents. You can also delete the file itself for `eventonica-react/src/index.css`. Replace the `App.css` contents with all the CSS code from [starter-jsx.js](./starter-code/index.css). You should see 2 columns on your form now on `localhost:3000`.
-
-3. Delete the file `eventonica-react/src/logo.svg`. This is the React logo that you won't be needing. Drag and drop, or copy and paste, `curriculum/projects/eventonica-react/starter-code/calendar.png` in the logo file's place.  
-
-Are you getting an error?  Your file is still trying to import the logo!  Deleting line 1 from `eventonica-react/src/App.js` should fix it. Refresh your `localhost:3000` page.
-
-4. Is your calendar image still not working?  That's because React does not import images the same way as HTML. Because of the way Babel converts the code into regular HTML and CSS for the browser to use, the path ends up being different.
-  - Add this to line 2 of `App.js`: `import calendarImg from './calendar.png'`
-  - Change your `img` tag inside the `header` too look like this: `<img src={calendarImg} alt="Calendar Star Logo" />
-`.
-
-5.  Look at all the code that's now in your App component. Take 2 minutes to point out to yourself where repeated elements might be turned into a reusable component later.
-
-> Note on Babel:  [Babel](https://medium.com/swlh/the-role-of-babel-in-react-dbcf78c69125) comes with the whole `create-react-app` project, and you don't really have to worry about it during Techtonica. However, if you're curious to see how much code React + Babel saves you from writing, you can glance at the files in `eventonica-react/node_modules/.cache/babel-loader/`.
diff --git a/projects/eventonica-react/starter-code/starter-jsx.js b/projects/eventonica-react/starter-code/starter-jsx.js
deleted file mode 100644
index 7ff2dc62e..000000000
--- a/projects/eventonica-react/starter-code/starter-jsx.js
+++ /dev/null
@@ -1,109 +0,0 @@
-<div className="App">
-  <header>
-    <img src="./calendar.png" alt="Calendar Star Logo" />
-    <h1>Eventonica</h1>
-  </header>
-
-  <main>
-    <div className="user-and-events">
-      <section className="user-management">
-        <h2>User Management</h2>
-
-        <ul id="users-list">
-          {/* display all existing Users here */}
-          <li>...</li>
-        </ul>
-
-        <div>
-          <h3>Add User</h3>
-          <form id="add-user" action="#">
-            <fieldset>
-              <label>Name</label>
-              <input type="text" id="add-user-name" />
-            </fieldset>
-            {/* Add more form fields here */}
-            <input type="submit" value="Add" />
-          </form>
-        </div>
-
-        <div>
-          <h3>Delete User</h3>
-          <form id="delete-user" action="#">
-            <fieldset>
-              <label>User ID</label>
-              <input type="text" id="delete-user-id" />
-            </fieldset>
-            <input type="submit" />
-          </form>
-        </div>
-      </section>
-
-      <section className="event-management">
-        <h2>Event Management</h2>
-        <div>
-          <h3>All Events</h3>
-          <ul id="events-list">
-            {/* Display all Events here */}
-            <li>...</li>
-          </ul>
-
-          <h3>Add Event</h3>
-          <form id="add-event" action="#">
-            <fieldset>
-              <label>Name</label>
-              <input
-                type="text"
-                id="add-event-name"
-                placeholder="Virtual corgi meetup"
-              />
-            </fieldset>
-            {/* Add more form fields here */}
-            <input type="submit" />
-          </form>
-        </div>
-      </section>
-    </div>
-
-    <div>
-      <h3>Delete Event</h3>
-      <form id="delete-event" action="#">
-        <fieldset>
-          <label>Event ID</label>
-          <input type="number" min="1" id="delete-event-id" />
-        </fieldset>
-        <input type="submit" />
-      </form>
-    </div>
-
-    <aside className="search-toolbar">
-      <div>
-        <h3>Find Events</h3>
-        <form id="search" action="#">
-          <fieldset>
-            <label htmlFor="date-search">Date</label>
-            <input type="text" id="date-search" placeholder="YYYY-MM-DD" />
-          </fieldset>
-          <fieldset>
-            <label htmlFor="category-search">Category</label>
-            <input type="text" id="category-search" />
-          </fieldset>
-
-          <input type="submit" value="Search" />
-        </form>
-      </div>
-    </aside>
-  </main>
-
-  <footer>
-    <div>
-      Star Calendar favicon made by
-      <a href="https://www.flaticon.com/authors/freepik" title="Freepik">
-        Freepik
-      </a>
-      Find your own on
-      <a href="https://www.flaticon.com/" title="Flaticon">
-        FlatIcon.com
-      </a>
-    </div>
-  </footer>
-</div>