priyanshukumarsinha / react-new

This is a tutorial on React JS.

Mega Project : Blog Website

Tech Stack Used :

• Frontend : HTML, CSS, JS, React
• Backend : appWrite
• For Text Editor : tinyMCE
• For Forms : React-hook-form
• html-react-parser

Step 1 : Project Setup and Setting up Environment Varibales

Steps Involved :

1. Create Vite App ✅
   

npm create vite@latest

2. Install dependencies ✅

   1. Install Redux Toolkit
      

        npm install @reduxjs/toolkit react-redux
      

   2. Install React Redux
      

       npm install react-redux
      

   3. Install React Router Dom
      

       npm install react-router-dom
      

   4. Install appwrite
      

       npm install appwrite 
      

   5. Install tinyMCE
      

       npm install tinymce
      

   6. install html-react-parser
      

       npm install html-react-parser
      

   7. Install React hook form
      

      npm install react-hook-form
      

   8. Install Tailwind and Configure
      

      npm install -D tailwindcss postcss autoprefixer
      npx tailwindcss init -p
      

3. Test Server ✅
   

  npm run dev

4. Setup Environment Variables ✅(.env file)

5. git ignore for .env file ✅

6. Initialize Environment Variables (appWrite) ✅

   1. Create Project
   2. Create DataBase
   3. Create Collection
   4. Create Attributes (title, content, featuredImage, status, userID)

   

   5. Create Index (status)
   6. Create Bucket / Storage (Images)

7. Configure Environment Varibales ✅

Step 2 : Setting up Authentication Service using Appwrite

1. Create a Service (AuthService : It is a Class), in a file auth.js ✅
2. Define Constructor Mehtod ✅
3. Define all other Mehods for : (SignUp, Login, Logout and getCurrentUser) ✅

For Better Practices, we use try catch in all these methods so that we can easily handle errors.

Here is documentation on How to use Appwrite for Authentication

Step 3 : Configuration, creating Services to Manage Databases, File Upload or Delete and Queries

1. Create Config.js service ✅
2. Create Constructor Mehod and Initialize variables ✅
3. Post Related Services : Database Docs
4. createPost Method : Create a Document ( taking slug as id ) ✅
5. updatePost Method : Update the Document ( No need to pass UserID, as only the owner can use this method) ✅
6. deletePost Method : Deletes the Document ✅
7. getPost Method : On Clicking a Particular Post, that post opens up. ✅
8. getPosts Method : All the posts available on the feed. Query Docs ✅ [Here, We got to know how to pass Queries, and what Other parameters we can give in this method ( i.e Pagination , Number of Results, etc)]
9. File Upload Services : Storage Docs
10. uploadFile Method : Upload the File to the Storage (or Bucket) ✅
11. deleteFile Method : Delete the File Using the fileId provided during uploadFile() ✅
12. getFilePreview Method : Previews the File, It is fast and hence We don't need to use async - await here. ✅

Step 4 : Configuration of Redux Toolkit

1. Setting up a store using Redux toolkit : (store.js, configureStore({}))✅
2. Creating and configuring redux store and authentication slice (authSlice.js, createSlice({name, initialState, reducers : {//actions(methods)}}), authSlice.reducers, authSlice.actions) ✅
3. Configuring Redux Toolkit for managing state and actions in big projects (state, action, action.payload)✅

Step 5 : Creating Header and Footer Components

Create Components ✅

Step 6 : Configuring Redux Toolkit Methods for login and logout in App.jsx

1. setLoader ✅
2. getCurrentUser and dispatch() ✅
3. change Loader value ✅
4. Conditional Rendering ✅

Step 7 : Create All Components : Understanding React components for form validation

1. Container
2. Updating Footer Component ✅
3. Create Logo Component
4. Create LogoutBtn Component in Header
5. update Header Component ✅
6. Create Button Componenet ✅
7. Create Input Component ✅
8. Importing components in React using index file ✅
9. Create Select Component ✅
   
10. Create PostCards Component ✅
    
11. Create Login Component ✅
    
12. Create Signup Component