Mega Project - Blog App

Start and Installlation

Redux Toolkit

npm install @reduxjs/toolkit

React-Redux

npm install react-redux

React-Router-Dom

npm install react-router-dom

Appwrite cloud backend as a service

npm install appwrite

a rich-text editor that allows users to create formatted content within a user-friendly interface

npm install @tinymce/tinymce-react

The parser converts an HTML string to one or more React elements

npm install html-react-parser

React Hook Form

npm install  react-hook-form

Learn Day 1-

1-Make a environment variables and how to define it.

2-Make a config file and import data and store it to string.

Like this

appwriteUrl: String(import.meta.env.VITE_APPWRITE_URL)

Learn Day 2-

1-Make a authentication file, auth creataccount, login, getCurrentUser & logout.

2-Future proof code for authentication add more services and use this file future appwrite backend as a service.

Learn Day-3

1-Make a config file to config Appwrite database, file upload and custom queries.

2-Make a functionality on createPost, updatePost, deletePost, getPost(get one post), getPosts, uploadFile, delete file etc.

Learn Day-4

1-Setting up a store using Redux toolkit in a big project.

2-Creating and configuring redux store and authentication slice.

3-Configuring Redux Toolkit for managing state and actions in big projects.

4-Configuring tailwind css and organizing components in big projects.

Learn Day-5

1-Create separate component every field, Updating React components gradually & Importing components in React using index file.

2-Creating objects and adding values to them is a common syntax in production-grade React components, Create a navigation bar with a logo, Adding navigation with React Router.

3-React components can be referred to as children or text, Creating production grade React components & Creating unique IDs for accessibility purpose.

Learn Day-6

1-Create separate component like select, signup, postcard, login, authlayout, Updating React components gradually & Importing components in React using index file.

2-Intoduction of react hook form and learn how to use it in react app how to use handleSubmit and register methods.

Learn Day-7

1-Create RTE commponent using react and tinymce-react npm package for a text-editor and add value to a form.

2-Create PostForm component which is about how to handle post-form data it's very commplicated and very imp topic.

3-Create form to get slug to every user based on there post title.

Learn Day-8

1-Create a pages for user interface and a view a frontend and on web page.

2-Debug some bugs and fix them.

Learn Day-9

1-Fix sum bugs and debug whole project setp by setp.

2-Add some features on it.

Learn Day-10

1-Complete project and change css and make user friendly and responsive.

2-Make a new repo for this project and deploy it on versel and netlify.