diff --git a/public/images/gen2/getting-started/data-manager.png b/public/images/gen2/getting-started/data-manager.png
new file mode 100644
index 00000000000..94fa632e41c
Binary files /dev/null and b/public/images/gen2/getting-started/data-manager.png differ
diff --git a/src/pages/[platform]/start/quickstart/index.mdx b/src/pages/[platform]/start/quickstart/index.mdx
index 6294397b21f..0c832070318 100644
--- a/src/pages/[platform]/start/quickstart/index.mdx
+++ b/src/pages/[platform]/start/quickstart/index.mdx
@@ -35,6 +35,246 @@ export function getStaticProps(context) {
};
}
+
+
+👋 Welcome to AWS Amplify! In this quickstart guide, you will:
+
+1. Deploy a Vanilla JavaScript app with Vite
+2. Build and connect to a database with real-time data updates
+3. Configure authentication and authorization rules
+
+
+## Create project
+
+Create a new Vanilla JavaScript app with vite using the following commands, create the directory (`amplify-js-app`) and files for the app.
+
+```bash
+npm create vite@latest
+✔ Project name: amplify-js-app
+✔ Select a framework: › Vanilla
+✔ Select a variant: › TypeScript
+```
+
+Initialize npm and install dependencies and dev dependencies.
+```bash
+cd amplify-js-app
+npm install
+npm run dev
+```
+
+This runs a development server and allows you to see the output generated by the build. You can see the running app by navigating to [http://localhost:5173](http://localhost:5173).
+
+Add the following to the `index.html` file:
+
+```html title="index.html"
+
+
+
+
+
+ Todo App
+
+
+
+
+
+
+
+
+```
+
+Add the following to `style.css` file:
+
+{/* cSpell:disable */}
+
+```css title="style.css"
+body {
+ margin: 0;
+ background: linear-gradient(180deg, rgb(117, 81, 194), rgb(255, 255, 255));
+ display: flex;
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ height: 100vh;
+ width: 100vw;
+ justify-content: center;
+ align-items: center;
+}
+
+main {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+ color: white;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+ul {
+ padding-inline-start: 0;
+ margin-block-start: 0;
+ margin-block-end: 0;
+ list-style-type: none;
+ display: flex;
+ flex-direction: column;
+ margin: 8px 0;
+ border: 1px solid black;
+ gap: 1px;
+ background-color: black;
+ border-radius: 8px;
+ overflow: auto;
+}
+
+li {
+ background-color: white;
+ padding: 8px;
+}
+
+li:hover {
+ background: #dadbf9;
+}
+
+a {
+ font-weight: 800;
+ text-decoration: none;
+}
+```
+{/* cSpell:enable */}
+
+In `main.js` remove the boilerplate code and leave it empty. Then refresh the browser to see the changes.
+
+## Create Backend
+
+The easiest way to get started with AWS Amplify is through npm with `create-amplify` command. You can run it from your base project directory.
+
+```bash title="Terminal" showLineNumbers={false}
+npm create amplify@latest
+? Where should we create your project? (.) # press enter
+```
+
+Running this command will scaffold Amplify backend files in your current project with the following files added:
+
+```text
+├── amplify/
+│ ├── auth/
+│ │ └── resource.ts
+│ ├── data/
+│ │ └── resource.ts
+│ ├── backend.ts
+│ └── package.json
+├── node_modules/
+├── index.html
+├── style.css
+├── .gitignore
+├── package-lock.json
+├── package.json
+└── tsconfig.json
+```
+
+### Set up local AWS credentials
+
+To make backend updates, we are going to require AWS credentials to deploy backend updates from our local machine.
+
+**Skip ahead to step 8**, if you already have an AWS profile with credentials on your local machine, and your AWS profile has the `AmplifyBackendDeployFullAccess` permission policy.
+
+Otherwise, **[set up local AWS credentials](/[platform]/start/account-setup/)** that grant Amplify permissions to deploy backend updates from your local machine.
+
+### Deploy cloud sandbox
+
+To deploy your backend use Amplify's per-developer cloud sandbox. This feature provides a separate backend environment for every developer on a team, ideal for local development and testing. To run your application with a sandbox environment, you can run the following command:
+
+```bash title="Terminal" showLineNumbers={false}
+npx ampx sandbox
+```
+
+Once the sandbox environment is deployed, it will create a GraphQL API, database, and auth service. All the deployed resources will be available in the `amplify_outputs.json`. However, Xcode won't be able to recognize them. For recognizing the files, you need to drag and drop the generated files to your project.
+
+## Connect frontend to backend
+
+The initial scaffolding already has a pre-configured data backend defined in the `amplify/data/resource.ts` file. The default example will create a Todo model with `content` field. Update your main.js file to create new to-do items.
+
+```typescript title="src/main.ts"
+import { generateClient } from "aws-amplify/data";
+import type { Schema } from "../amplify/data/resource";
+import './style.css';
+import { Amplify } from 'aws-amplify';
+import outputs from '../amplify_outputs.json';
+
+Amplify.configure(outputs);
+
+
+const client = generateClient();
+
+document.addEventListener("DOMContentLoaded", function () {
+ const todos: Array = [];
+ const todoList = document.getElementById("todoList") as HTMLUListElement;
+ const addTodoButton = document.getElementById("addTodo") as HTMLButtonElement;
+
+ addTodoButton.addEventListener("click", createTodo);
+
+ function updateUI() {
+ todoList.innerHTML = '';
+ todos.forEach(todo => {
+ const li = document.createElement('li');
+ li.textContent = todo.content ?? '';
+ todoList.appendChild(li);
+ });
+ }
+
+ function createTodo() {
+ console.log('createTodo');
+ const content = window.prompt("Todo content");
+ if (content) {
+ client.models.Todo.create({ content }).then(response => {
+ if (response.data && !response.errors) {
+ todos.push(response.data);
+ updateUI();
+ } else {
+ console.error('Error creating todo:', response.errors);
+ alert('Failed to create todo.');
+ }
+ }).catch(error => {
+ console.error('Network or other error:', error);
+ alert('Failed to create todo due to a network or other error.');
+ });
+ }
+ }
+
+
+ client.models.Todo.observeQuery().subscribe({
+ next: (data) => {
+ todos.splice(0, todos.length, ...data.items);
+ updateUI();
+ }
+ });
+});
+```
+
+
@@ -112,7 +352,7 @@ Let's take a tour of the project structure in this starter repository by opening
In the Amplify Console, navigate to the Data manager to see the data entered in your database.
-TK IMAGE
+
## Make frontend updates
@@ -449,7 +689,7 @@ Let's take a tour of the project structure in this starter repository by opening
In the Amplify Console, navigate to the Data manager to see the data entered in your database.
-TK IMAGE
+
## Make frontend updates
@@ -782,7 +1022,7 @@ Let's take a tour of the project structure in this starter repository by opening
In the Amplify Console, navigate to the Data manager to see the data entered in your database.
-TK IMAGE
+
## Make frontend updates
@@ -1074,7 +1314,7 @@ flutter create my_amplify_app
The easiest way to get started with AWS Amplify is through npm with `create-amplify` command. You can run it from your base project directory.
```bash title="Terminal" showLineNumbers={false}
-npm create amplify@beta
+npm create amplify@latest
? Where should we create your project? (.) # press enter
```
@@ -2698,15 +2938,7 @@ For publishing the changes to cloud, you need to create a remote git repository.
-
+
## 🥳 Success