https://github.com/pranavarora1895/appwrite-react-blog-app

A production grade React and Appwrite Blog application
https://github.com/pranavarora1895/appwrite-react-blog-app

appwrite blog react redux redux-toolkit

Last synced: 21 days ago
JSON representation

A production grade React and Appwrite Blog application

• Host: GitHub
• URL: https://github.com/pranavarora1895/appwrite-react-blog-app
• Owner: pranavarora1895
• License: mit
• Created: 2024-09-12T22:34:14.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-10-18T00:25:02.000Z (3 months ago)
• Last Synced: 2024-11-09T03:16:22.995Z (3 months ago)
• Topics: appwrite, blog, react, redux, redux-toolkit
• Language: JavaScript
• Homepage: https://appwrite-react-blog-app-weld.vercel.app
• Size: 84 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# AppWrite React Blog App

This Cloud Application was developed using AppWrite as a BaaS (Backend as a Service), React as its frontend, and Tailwind CSS. The users can signup/login, read other users' posts or create, edit or delete their posts.

## Checkout this demo video

https://github.com/user-attachments/assets/0241458e-2d77-4fe7-827e-bf105437d8b1

### Video Description

The video shows the implementation of the following:

1. Authentication (SignUp and Login)

2. Authentication storage in Redux

3. Reading the posts created by others

4. Creating a post

5. Editing a post that was owned by a respective user

6. Unable to Edit or Delete other users' posts

### AppWrite Stats

![image](https://github.com/user-attachments/assets/a05bd13d-f203-4aa9-bb4b-3f0dd27f64ed)

## Following concepts are implemented:

### Cloud Backend

> Implementation of Appwrite that gives BaaS (Backend as a Service) on Cloud (Similar to AWS).

### Vendor Lock-in prevention

> Inorder to separate the dependency of Appwrite which is a Backend as a Service, a separate service has been created. This ensures separating the app if the app needs to be migrated to any other cloud platform.

> Implementation of Clean Code

### Redux Store

> Redux Toolkit is used to track the authentication (login and logout)

> In the branch named `post-redux`, postSlice has been created to cache the posts to minimize the GET request from the server.

### Components Reusablity

> useForwardRef is used to transfer the state from parent to child component

### React Hook Form

> Usage of React hook form for signup and login

> Slug Transformation: used `watch` method of React hook form to watch the activity of the `title` field and transformed slug based on the `title`.

### Mechanism to protect pages and routes

> Protected Container is created to protect pages and routes

### TinyMCE Rich Text Editor