falgunmpatel/rapid-write

A Blogging Website (React + Appwrite)

Table of Contents

1. About The Project
   • Demo Credentials
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Contributing
4. License
5. Contact
6. Acknowledgments

About The Project

🚀 Rapid Write 📝

Rapid Write is a dynamic blogging website meticulously crafted with React for the frontend and Appwrite for the backend, offering a seamless and intuitive experience for bloggers and readers alike. With a focus on speed, efficiency, and functionality, Rapid Write leverages cutting-edge technologies such as react-hook-forms and TinyMCE Editor to provide users with a smooth and hassle-free writing experience.

🔑 Key Features

• User Authentication: Seamlessly manage user accounts with features for login, signup, and logout.
• Effortless Blogging: Create, edit, and delete posts with ease, all within an intuitive user interface.
• Streamlined Content Management: View all user posts or filter to see only your own, ensuring efficient content organization.
• State-of-the-Art State Management: Utilize Redux Toolkit for robust state management, ensuring optimal performance and scalability.
• Modular Component Architecture: Benefit from a well-organized and scalable codebase, enhancing maintainability and extensibility.
• And More: Explore additional features designed to enhance your blogging experience.

(back to top)

🪪 Demo Credentials

username: one@one.com password = password

(back to top)

💻 Technologies Used

Frontend: React, react-hook-forms, TinyMCE Editor Backend: Appwrite State Management: Redux Toolkit

(back to top)

Screenshots:

Home Page - All Users Posts

User's Posts

Other User's Post

User's Post - Edit/Delete Option

Login Form

Signup Form

Post Form

Getting Started

Prerequisites

Basic knowledge of React is required to setup this project.

Download latest version of npm here:

• npm

 npm install npm@latest

NOTE: I use npm version @10.1.0 while creating this project

Installation

1. Signup/Login @Appwrite
2. Setup an Appwrite Project. Appwrite Project Setup:
   1. Signup/Login to your appwrite account.
   2. Create a new project with desired title & region.
   3. Project -> Settings -> Copy Project ID, and Api Endpoint
   4. Project -> Database Section -> Create Database -> Copy Database Id -> Create Collection -> Copy Colection Id
   5. Project -> Database -> Collection -> Settings -> Update Permissions -> Add a role -> All Users -> Check all (Create, Read, Update, Delete)
   6. Inside the created collention -> Attributes -> Create Attribute -> i. title -> String -> required ii. content -> String -> required iii. featuredImage -> String -> required iv. status -> String -> required v. userId -> String -> required
   7. Project -> Storage Section -> Create Bucket -> Copy Bucket Id -> Required for setting up .env
   8. Project -> Storage -> Bucket -> Settings -> Update Permissions -> Add a role -> All Users -> Check all (Create, Read, Update, Delete)
3. Create/Login TinyMCE Account -> Copy your API KEY -> Required for setting up .env
4. Clone the repo

   git clone https://github.com/falgunmpatel/rapid-write

5. Install NPM packages

   npm install

6. Create a .env file in the root directory of the project and add following content to it

     VITE_APPWRITE_URL= "Your Apprite Project Api Endpoint"
     VITE_APPWRITE_PROJECT_ID="Your Apprite Project PROJECT ID"
     VITE_APPWRITE_DATABASE_ID="Your Apprite Project DATABASE ID"
     VITE_APPWRITE_COLLECTION_ID="Your Apprite Project COLLECTION ID"
     VITE_APPWRITE_BUCKET_ID="Your Apprite Project BUCKET ID"
     VITE_TINYMCE_API_KEY="Your TinyMCE API KEY"
   

7. Run the project by runnint the following command in the root directory of the project

     npm run dev

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Name - Falgun Patel Email - falgunmpatel9123@gmail.com

Project Link: rapid-write

(back to top)

Acknowledgments

1. React Playlist @ChaiAurCode
   Mentor: Hitesh Choudhary

2. Backend: Docs @Appwrite

3. Frontend: Docs @React

4. Forms: Docs @React-Hook-Forms

5. Editor for Creting Posts : Docs @TinyMCE

6. Toolchain/Bundler: Docs @Vite

(back to top)