Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kshiti-24/blog-website
A Mega Blog Project build using React, Redux Toolkit(RTK) and Appwrite as backend.
https://github.com/kshiti-24/blog-website
appwrite react react-hooks react-router reactjs reactrouterdom redux redux-toolkit vite
Last synced: 14 days ago
JSON representation
A Mega Blog Project build using React, Redux Toolkit(RTK) and Appwrite as backend.
- Host: GitHub
- URL: https://github.com/kshiti-24/blog-website
- Owner: Kshiti-24
- Created: 2024-07-03T20:06:33.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-07-14T10:56:39.000Z (6 months ago)
- Last Synced: 2024-11-11T21:39:07.525Z (2 months ago)
- Topics: appwrite, react, react-hooks, react-router, reactjs, reactrouterdom, redux, redux-toolkit, vite
- Language: JavaScript
- Homepage: https://blog-app-fawn-eta.vercel.app
- Size: 67.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blog Website (React + VITE)
**Blog Website** is a feature-rich React application designed to provide a seamless blogging experience. This repository houses the source code for Blog Website, a powerful platform offering user authentication, secure signup, login functionalities, and CRUD operations for creating, editing, and deleting blog posts.
## Sign-up Page
![2024-07-14](https://github.com/user-attachments/assets/eb005b60-2ad2-4567-a844-d9f3cf73c714)
## All Post Page
![2024-07-14 (2)](https://github.com/user-attachments/assets/bfd2c650-d272-4682-a935-9768c2c4cafc)
## Add Post Page
![2024-07-14 (3)](https://github.com/user-attachments/assets/6586f7f0-6670-4549-b60b-897b834fb0da)
## Post Page
![2024-07-14 (4)](https://github.com/user-attachments/assets/59177b7d-da5a-4b07-9c57-6681da4f6777)
## Edit Post Page
![2024-07-14 (5)](https://github.com/user-attachments/assets/c0d85013-fb15-4d04-b8e2-502210b7f105)
## Features
- **Register**: New users can sign up to create an account.
- **Login**: Registered users can log in to access their account.
- **Show Others' Posts**: Users can view posts made by other users.
- **Add Post**: Users can create and publish new blog posts.
- **Delete Post**: Users can delete their own posts.
- **Like Post**: Users can like posts to show appreciation.
- **Comment on Post**: Users can leave comments on posts.
- **View User Profile**: Users can view their profile and other users profiles.
- **Logout**: Users can log out of their account.## Technologies Used
- **React**: A JavaScript library for building user interfaces.
- **Redux**: A state management library for JavaScript apps.
- **Appwrite**: An open-source backend server.
- **TailwindCSS**: A utility-first CSS framework for rapid UI development.
- **Vite**: A fast front-end build tool.
- **Vercel**: A platform for frontend developers, providing global deployment.## Getting Started
### Prerequisites
Ensure you have the following installed on your local machine:
- Node.js
- npm (Node Package Manager)
- Appwrite backend setup### Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/blog-website.git
cd blog-website
```2. Install dependencies:
```bash
npm install
```
3. Provide necessary environment variables to run the app properly:
```bash
VITE_APPWRITE_URL='YOUR_APPWRITE_URL'
VITE_APPWRITE_PROJECT_ID='YOUR_APPWRITE_PROJECT_ID'
VITE_APPWRITE_DATABASE_ID='YOUR_APPWRITE_DATABASE_ID'
VITE_APPWRITE_COLLECTION_ID='YOUR_APPWRITE_COLLECTION_ID'
VITE_APPWRITE_FEEDBACK_COLLECTION_ID='YOUR_APPWRITE_FEEDBACK_COLLECTION_ID'
VITE_APPWRITE_BUCKET_ID='YOUR_APPWRITE_BUCKET_ID'
VITE_APPWRITE_API_KEY='YOUR_APPWRITE_API_KEY'
VITE_TINYMCE_API_KEY='YOUR_TINYMCE_API_KEY'
VITE_EMAILVERIFICATION_URL='YOUR_EMAILVERIFICATION_URL'
```4. Run the app:
```bash
npm run dev
```
5. Open your browser and navigate to:
```
http://localhost:3000
```