doc: update code snippet examples, fix mistakes in content, fix npm create command, undo all prettier changes, revert .env.example back into repo, revert pnpm-lock file

src/routes/docs/tutorials/react/step-2/+page.markdoc

@@ -10,7 +10,7 @@ step: 2
 Create a React app with the `npm create` command.
 
 ```sh
-npm create vite@latest --template react ideas-tracker && cd ideas-tracker
+npm create vite@latest -- --template react ideas-tracker && cd ideas-tracker
 ```
 
 # Add dependencies {% #add-dependencies %}

src/routes/docs/tutorials/react/step-3/+page.markdoc

@@ -54,4 +54,4 @@ client
 
 export const account = new Account(client);
 export const databases = new Databases(client);
-```
+```

src/routes/docs/tutorials/react/step-4/+page.markdoc

@@ -29,6 +29,7 @@ export function UserProvider(props) {
   async function login(email, password) {
     const loggedIn = await account.createEmailPasswordSession(email, password);
     setUser(loggedIn);
+    navigateTo("/");
   }
 
   async function logout() {
@@ -66,13 +67,14 @@ Now, we can use the `useUser` hook to access the user's data from any component.
 
 # Basic routing  {% #basic-routing %}
 
-First, wrap the `main` element with the `UserProvider` component.
+First, wrap the `main` element with the `UserProvider` and `IdeaProvider` component.
 
 Update `src/App.jsx` to the following code.
 
 ```client-web
 import { Home } from "./pages/Home";
 import { UserProvider } from "./lib/context/user";
+import { IdeaProvider } from "./lib/context/ideas";
 
 function App() {
   const isLoginPage = window.location.pathname === "/login";
@@ -80,7 +82,9 @@ function App() {
   return (
     <div>
       <UserProvider>
-        <main>Home page</main>
+        <IdeaProvider>
+          <main>Home page</main>
+        </IdeaProvider>
       </UserProvider>
     </div>
   );
@@ -97,6 +101,7 @@ Update `src/App.jsx` to the following code.
 import { Login } from "./pages/Login";
 import { Home } from "./pages/Home";
 import { UserProvider } from "./lib/context/user";
+import { IdeaProvider } from "./lib/context/ideas";
 
 function App() {
   const isLoginPage = window.location.pathname === "/login";
@@ -104,7 +109,9 @@ function App() {
   return (
     <div>
       <UserProvider>
-        <main>{isLoginPage ? <Login /> : <Home />}</main>
+        <IdeaProvider>
+          <main>{isLoginPage ? <Login /> : <Home />}</main>
+        </IdeaProvider>
       </UserProvider>
     </div>
   );
@@ -182,5 +189,4 @@ export function Login() {
     </section>
   );
 }
-```
-
+```

src/routes/docs/tutorials/react/step-6/+page.markdoc

@@ -5,7 +5,7 @@ description: Add a database to your React application using Appwrite Web SDK.
 step: 6
 ---
 # Create collection {% #create-collection %}
-In Appwrite, data is stored as a collection of documents. Create a collection in the [Appwrite Console](https://cloud.appwrite.io/) to store our ideas.
+In Appwrite, data is stored as a collection of documents. Create a collection in the [Appwrite Console](https://cloud.appwrite.io/) to store our ideas.  Adding user's permissions allows authorized users to view, create and delete documents.
 
 {% only_dark %}
 ![Create project screen](/images/docs/tutorials/dark/idea-tracker-collection.png)
@@ -15,11 +15,11 @@ In Appwrite, data is stored as a collection of documents. Create a collection in
 {% /only_light %}
 
 Create a new collection with the following attributes:
-| Field       | Type   | Required |
-|-------------|--------|----------|
-| userId      | String | Yes      |
-| title       | String | Yes      |
-| description | String | No       |
+| Field       | Type   | Required | Size   |
+|-------------|--------|----------|--------|
+| userId      | String | Yes      |  50    |
+| title       | String | Yes      |  25    |
+| description | String | No       |  100   |
 
 # Ideas context {% #ideas-context %}
 
@@ -79,4 +79,3 @@ export function IdeasProvider(props) {
   );
 }
 ```
-