Skip to content

JavaScript-Mastery-Pro/Evolution-of-Form-Management-in-React

Repository files navigation

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Appwrite

We're using Appwrite for quick bootstrapping of a database for this project. To setup the database, follow below instructions:

  • Create Your Account on Appwrite
  • Visit Appwrite Cloud
  • Create a new Project New Project
  • Select region of your Project Select Region
  • After successful creation of Project, you'll be redirected to the created Project Overview dashboard. Copy the Project ID Project Overview
  • Create a new Database and Copy the Database ID New Database
  • Next, create a new Collection and Copy the Collection ID New Collection
  • A collection is a list of documents. You can think of it like a table in a database. You can add, update, and delete documents in a collection. So let's define our collection schema
    • First, we'll need name of the confession Name Attribute
    • Second, we'll need weapon of the confession as an Enum Weapon Attribute
    • Lastly, we'll need confession of the confession Confession Attribute
  • We'll also implement search functionality to search for confessions based on the name of the confession or the confession itself. So in Appwrite, we'll have to index the name and confession attributes Create Indexes
  • Appwrite has lots of other features such as backup policies or permissions. By default, permissions are set to private so we'll need to change that to public. So go to the settings of created Collection and set Permissions to any Set Permissions
  • Finally, we'll need API key to perform actions on Appwrite database through it's Node SDK. This is only needed if you're going to use Appwrite on backend. So let's create a new API key Create API Key
  • Copy the API key, database ID, collection ID and paste them in .env.local file in this format
      APPWRITE_NODE_API_KEY=
      APPWRITE_PROJECT=
      APPWRITE_DATABASE=
      APPWRITE_COLLECTION=
      APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

About

Final repo of Evolution of Form Management in React Workshop for React Summit 2024

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published